CSS Pokeball(진동 애니메이션 포함)
내가 우유 한 병 마시는 것을 멈춰야 한다는 것을 깨달은 이래로 포켓몬은 줄곧 나의 열정이었다.나는 여전히 나의 첫 번째 포켓몬을 기억한다!!!(차만드 마스터스).
하지만 나도 나의 첫 번째 포켓몬스터 대전, 나의 첫 승급, 나의 첫 진화, 나의 첫 번째 실패를 기억한다.읊다, 읊조리다도!나의 첫 번째 정신적 붕괴는 포켓몬스터가 내 눈앞에 있다는 것을 깨달았을 때 나는 나의 진보를 보존하지 못했다. 나는 이것에 대해 아무것도 할 수 없었다. 나는 스위치를 끄고 먹통을 뽑고 빨판을 불어서 내 폐끝이 구조를 요청할 때까지 그것을 돌려놓고 10시간 전의 땅에서 다시 시작할 수 밖에 없었다.실화.
그러니까 내가 그런 격정을 놓치지 않을 거라는 거 알아!그래서 나는 포획률이 낮은 괴구의 CSS 애니메이션을 만들기로 결정했다.
🎶🎧 🎧🎶
첫걸음
우선, 화포를 설치합시다!이를 위해 저는 The Bulma CSS Framework와 일부 맞춤형 CSS를 결합할 것입니다.
Visual Studio 구성에는
Bulma Snippets Extension
이 확장이 있으면 저는 bul:html만 입력하면 완벽한Bulmahtml 시작 페이지로 확장됩니다.하지만 없으면Bulma 사이트에서 복사해서 붙일 수 있다
.시작 템플릿 두 번째 단계
핸드폰 본체에 부드러운 CSS를 뿌려.html 파일:
body{
height:100vh;
background-color:red;
display: flex;
justify-content: center;
align-items: center;
}
CSS의 경우:
.child-to-body{
width: 300px;
height: 400px;
flex-shrink: 0;
}
좋아, 쿨!이 두 CSS 규칙은 자식 div가 부모 div의 전체 중심에 정렬되는 주요 구성 요소입니다.
<body>
<div class="child-to-body box"></div
</body>
좋아요!이 아름다운 예술품은 우리의 포켓볼을 담을 수 있는 상자이다.
이것은 가장 간단한 부분이지만, 어떻게 하나의div를 다른div의 중심에 두는지 아는 것은 여전히 매우 좋다.나는 이것이 면접에서 반드시 대답해야 할 문제라고 생각한다.나는 즉시 이 문제를 물어볼 것이다.
세 번째 단계
우리 마음속의 피카소가 맡아줄 때가 됐어!
#1. 스탬프 박스 만들기
Poke box는 Pokeball의 컨테이너가 되며 Pokeball의 위치를 설정합니다.기왕 우리가 우리의 공이 완벽한 위치에 있기를 희망한다면, 우리는 공을 탄창의 중심에 두자.
.poke_box{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
#2. 개요 정보
이것도 별 어려움이 없다.주요 논리는border:&borderradius:CSS 스타일의 속성으로 상자에서 원을 만들고 원 안에 음영을 넣어 공처럼 보일 수 있도록 하는 것이다.
.pokeball{
position: relative;
width: 150px;
height: 150px;
background: #fff;
border: 5px solid #000;
border-radius: 50%;
overflow: hidden;
box-shadow: inset -10px 10px 0 10px #ccc;
animation: shake 1.25s cubic-bezier(.36,.07,.19,.97) infinite;
animation-play-state: paused;
}
overflow: visible | hidden | scroll | auto | inherit
마지막으로 애니메이션은 공을 좌우로 흔드는 쉐이크 CSS 애니메이션을 만듭니다.그러나 너도 애니메이션을 흔들기 위해 규칙을 짜서 애니메이션을 무한정 재생시키거나 내가 한 것처럼 마우스가 멈출 때 애니메이션을 실행해야 한다😋
.pokeball:hover{
animation-play-state: running;
}
@keyframes shake {
0 { transform: translate(0, 0) rotate(0); }
20% { transform: translate(-10px, 0) rotate(-20deg); }
30% { transform: translate(10px, 0) rotate(20deg); }
50% { transform: translate(-10px, 0) rotate(-10deg); }
60% { transform: translate(10px, 0) rotate(10deg); }
100% { transform: translate(0, 0) rotate(0); }
}
나는 네가 이 개념을 더욱 잘 이해하기 위해서 내가 너에게 준 CSS 규칙을 사용하라고 건의한다.테두리 색을 바꾸어 공을 크게 만들고 넘침까지 바꾸어 무슨 일이 일어날지 봅시다.
만약 네가 요령을 터득했다면, 아주 좋은 큰 공을 만들어 봐라!
#3. Pokeball의: 앞과 뒤:
CSS의:before 및:after 유사 요소를 사용하면 HTML에 컨텐트를 넣지 않고 페이지에 컨텐트를 삽입할 수 있습니다.최종 결과는 실제로 DOM에 있지 않지만 페이지에 표시되는 방식은 다음과 같습니다. 기본적으로 다음과 같습니다.
<div>
::before
<!-- Rest of stuff inside the div -->
::after
</div>
.pokeball::before,
.pokeball::after {
content:"";
position: absolute;
}
.pokeball::before {
background: red;
width: 100%;
height: 50%;
}
.pokeball::after {
top: calc(50% - 5px);
width: 100%;
height: 10px;
background: #000;
}
⚠경고: IE8은 지원하지 않습니다: before와: after, 단: before와: after는!네가 하고 싶은 대로 해라!네가 IE8에 있지 않으면.😱
#4.Pokeball 버튼
부제에서 말한 바와 같이 우리의 Pokeball을 완성할 때가 되었다!이 긴 스탬프 수수께끼의 마지막 부분은 하나의 종류를 가진div에 불과하다.pokeball 단추를 누르십시오. 이 HTML 구조를 주체에서 볼 수 있습니다.
<div class="box child-to-body">
<div class="poke_box">
<div class="pokeball">
<div class="pokeball__button"></div>
</div>
</div>
</div>
.pokeball__button {
position: absolute;
width: 30px;
height: 30px;
border: 4px solid #7f8c8d;
border-radius: 50%;
top: calc(50% - 15px);
left: calc(50% - 15px);
box-shadow: 0 0 0 7px black;
background: #fff;
z-index: 10;
animation: blink .5s alternate infinite;
animation-play-state: paused;
}
.pokeball:hover .pokeball__button{
animation-play-state: running;
}
@keyframes blink {
from { background: #eee;}
to { background: #e74c3c; }
}
이게 우리가 한 거야!
만약 당신이 어떤 이유로 어느 곳에서든 망쳤다면:
<- CatchEmAll에 복제이렇게!모든 기능을 갖춘 CSS Pokeball을 원하는 항목에 가져올 수 있습니다!나는 정말 네가 이미 약간의 지식을 얻었고, 너의 마술사 허리띠를 포함한 새로운 기교를 배웠으면 좋겠다. (이것은 놀라운 참고이다.)
css pokeball。지트 창의역
만약 네가 디자이너라면, 너는 빌어먹을!이 플래카드는 아마존 볼!그럼 내가 너에게 링크가 좀 있어!
와 Freepik로 제작된 아이콘
팡테메.일반 도메인 이름 형식 💜 사랑의 표시를 하다💜:
그 게시물 은 매우 큰 게시물 인데, 차만드 마저도 진화했다🔥🔥🔥
Sudorealm Facebook Page
시간을 내서 본문을 읽어 주셔서 감사합니다. 제 이름은 타노스입니다. 만약에 제 작문 방식을 좋아하신다면 인터넷에서 가장 책벌레의 영역Caffeinating me에서 시간을 보내세요!😍
Reference
이 문제에 관하여(CSS Pokeball(진동 애니메이션 포함)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/athanstan/css-pokeball-with-wiggle-animation-1im0텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
