귀여운 미니언 애니메이션 샘플 코드의 CSS3 구현
- 高洛峰원래의
- 2017-03-07 15:04:412618검색
CSS3 애니메이션을 볼 때마다 한 번 해보고 싶습니다. 한 달 전에 Bai Shu 형제님의 블로그를 읽다가 갑자기 아이디어가 떠올라 그가 제공한 데모를 시도해 보았는데, 기분이 좋았어! 아래 그림은 데모에서 제공한 애니메이션 프레임 디자인 초안을 보여줍니다.
나도 DIY 애니메이션을 만들고 싶지만 PS를 안다고 해서 디자인을 할 수 있는 건 아니다. 애니메이션 디자인 초안. [미쳤어]… 그래서 자료를 찾으러 Zoku.com에 갔는데, 결국 사진 한 장만 찾았습니다:
CSS3 애니메이션을 만들고 싶다고 생각하니, 하하... 어떡하지? - 안돼, 그냥 파! (여기서는 뿌리지 마세요. 정말 재료가 없습니다)
...최종 효과는 이렇게 생겼습니다. 모바일 단말기에서 본 예시입니다! (gif가 붙어 있으니 그냥 감상하시고, 싫으시면 뿌리지 마세요...):
그래 사실은 주요 목적은 지식 포인트를 배우는 것입니다.
이 데모에 포함된 지식 포인트는 다음과 같습니다:
perspective
perspective-origin
변형 스타일
변형 원본
애니메이션
@keyframes
translate3d,translate://www.php.cn/
이런 경우에는 이렇게 답답한 애니메이션을 어떻게 구현했을까요? 연습할 수 있도록 코드를 공유하겠습니다: html 구조:<body>
<p class="title">
<p>小黄人</p>
</p>
<p class="wrapper">
<p class="littleH">
<p class="light">
<p class="light_left">
<p>欢迎欢迎，热烈欢迎</p>
</p>
<p class="light_right">
<p>欢迎欢迎，热烈欢迎</p>
</p>
<p class="load"></p>
</p>
<p class="littleH_body">
<p class="leftHair"></p>
<p class="rightHair"></p>
<p class="leftBlackeye"></p>
<p class="leftWhiteeye"></p>
<p class="rightBlackeye"></p>
<p class="rightWhiteeye"></p>
<p class="mouse"></p>
<p class="leftFoot"></p>
<p class="rightFoot"></p>
</p>
</p>
</p>
</body>
css 코드: body{
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
.title p{
text-align: center;
font-size: 100px;
font-weight: bolder;
color:#333;
}
.wrapper{
margin: 400px auto;
}
.littleH{
position: relative;
-webkit-perspective: 800;
-webkit-perspective-origin: 50% 50%;
}
.light{
-webkit-transform-style: preserve-3d;
}
.light .light_left,.light .light_right{
position: absolute;
width: 100%;
height: 300px;
background: lightblue;
-webkit-transform: rotateY(90deg) translate3d(0,300px,-200px);
-webkit-animation: changeBgColor 2s linear infinite;
}
.light .light_right{
-webkit-transform: rotateY(-90deg) translate3d(0,300px,-215px);
-webkit-animation-delay: 1s;
}
@-webkit-keyframes changeBgColor{
0%,100%{
background: lightblue;
}
50%{
background: lightgreen;
}
}
.light .light_left p,.light .light_right p{
color:#fff;
font-size: 80px;
font-weight: bold;
margin-left: 100px;
}
.light .light_right p{
float: rightright;
margin-right: 100px;
}
.light .load{
position: absolute;
width: 500px;
height: 1500px;
background: -webkit-gradient(linear, left top, left bottombottom, color-stop(51%,#aadbdc), color-stop(52%,#ffffff));
background: -webkit-linear-gradient(top, #aadbdc 51%,#ffffff 52%);
background: linear-gradient(to bottombottom, #aadbdc 51%,#ffffff 52%);
background-size: 350px 80px;
-webkit-animation: move_load 5s linear infinite;
}
@-webkit-keyframes move_load{
0%{
-webkit-transform:rotateX(90deg) translate3d(250px,0,0);
}
100%{
-webkit-transform:rotateX(90deg) translate3d(250px,-320px,0);
}
}
.littleH_body{
position: absolute;
left:50%;
margin-left: -157px;
width: 314px;
height: 425px;
background: url(1.png);
-webkit-transform-style: preserve-3d;
}
.leftHair{
position: absolute;
rightright: 58px;
top:-5px;
width: 100px;
height: 17px;
background: url(lefthair.png);
-webkit-transform-origin: left bottombottom;
-webkit-animation: lefthair 1s .3s ease-in-out infinite;
}
@-webkit-keyframes lefthair{
0%,10%,40%,100%{
-webkit-transform: rotate(0deg) translateY(1px);
}
30%{
-webkit-transform: rotate(-3deg) translateY(1px);
}
}
.rightHair{
position: absolute;
left: 58px;
top:-8px;
width: 100px;
height: 16px;
background: url(righthair.png);
-webkit-transform-origin: rightright bottombottom;
-webkit-animation: righthair 1s ease-in-out infinite;
}
@-webkit-keyframes righthair{
0%,10%,40%,100%{
-webkit-transform: rotate(0deg) translateY(1px);
}
30%{
-webkit-transform: rotate(4deg) translateY(1px);
}
}
.leftBlackeye{
position: absolute;
rightright: 87px;
top:102px;
width: 43px;
height: 43px;
background: url(eyeblack.png);
-webkit-animation: leftblackeye 5s ease-in infinite;
}
@-webkit-keyframes leftblackeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translateX(15px);
}
80%,90%{
-webkit-transform: translateX(-15px);
}
}
.leftWhiteeye{
position: absolute;
rightright: 92px;
top:110px;
width: 20px;
height: 21px;
background: url(whiteeye.png);
background-size: 95% 95%;
background-repeat: no-repeat;
-webkit-animation: leftwhiteeye 5s ease-in infinite;
}
@-webkit-keyframes leftwhiteeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translate3d(15px,3px,0);
}
80%,90%{
-webkit-transform: translate3d(-30px,3px,0);
}
}
.rightBlackeye{
position: absolute;
left: 84px;
top:102px;
width: 43px;
height: 43px;
background: url(eyeblack.png);
-webkit-animation: rightblackeye 5s ease-in infinite;
}
@-webkit-keyframes rightblackeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translateX(15px);
}
80%,90%{
-webkit-transform: translateX(-15px);
}
}
.rightWhiteeye{
position: absolute;
left: 102px;
top:112px;
width: 20px;
height: 21px;
background: url(whiteeye.png);
background-size: 95% 95%;
background-repeat: no-repeat;
-webkit-animation: rightwhiteeye 5s ease-in infinite;
}
@-webkit-keyframes rightwhiteeye{
0%,20%,50%,70%,100%{
-webkit-transform: translateX(0px);
}
30%,40%{
-webkit-transform: translate3d(15px,3px,0);
}
80%,90%{
-webkit-transform: translate3d(-30px,3px,0);
}
}
.mouse{
position: absolute;
left: 126px;
top:210px;
width: 71px;
height: 30px;
background: url(mouse.png);
-webkit-transform-origin: center top;
-webkit-animation: mouse 5s ease-in-out infinite;
}
@-webkit-keyframes mouse{
40%{
-webkit-transform: rotate(-15deg) translateX(22px);
}
0%,20%,60%,100%{
-webkit-transform: rotate(0deg);
}
}
.leftFoot{
position: absolute;
rightright: 85px;
top:424px;
width: 68px;
height: 43px;
background: url(leftfoot.png);
-webkit-transform-origin: left top;
-webkit-animation: leftfoot .6s ease-in-out infinite;
}
@-webkit-keyframes leftfoot{
0%,50%,100%{
-webkit-transform: rotate(0deg);
}
80%{
-webkit-transform: rotate(-10deg);
}
}
.rightFoot{
position: absolute;
left: 85px;
top:424px;
width: 68px;
height: 43px;
background: url(rightfoot.png);
margin-bottom: 100px;
-webkit-transform-origin: rightright top;
-webkit-animation: rightfoot .6s ease-in-out infinite;
}
@-webkit-keyframes rightfoot{
0%,50%,100%{
-webkit-transform: rotate(0deg);
}
30%{
-webkit-transform: rotate(10deg);
}
}
코드 여전히 매우 이해하기 쉽습니다. 단점은 그림이 병합되지 않으므로 그냥 만드십시오. 주요 목적은 CSS3 애니메이션(특히 3D)의 지식 포인트를 배우고 연습하는 것입니다. 연습을 많이 할수록 더 확실하게 기억하고 더 원활하게 사용할 수 있습니다. 이것은 시작에 불과합니다... PS: 제가 잘라낸 사진을 첨부합니다
1.png
righthair.png
lefthair.png
eyeblack.png
whiteeye .png
mouse.png
rightfoot.png
leftfoot.png
위 내용은 전체 내용입니다. 이 기사가 모든 사람의 연구에 도움이 되기를 바랍니다. 또한 모든 사람이 PHP 중국어 웹사이트를 지원하기를 바랍니다. 
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.