Jedes Mal, wenn ich CSS3-Animationen sehe, möchte ich es versuchen. Ich erinnere mich, dass ich vor mehr als einem Monat einen Blog von Bruder Bai Shu gelesen habe und plötzlich eine Idee hatte, also habe ich die von ihm bereitgestellte Demo ausprobiert fühlte sich großartig an! Das Bild unten zeigt den von der Demo bereitgestellten Designentwurf für den Animationsrahmen.
Ich möchte auch eine DIY-Animation erstellen, aber zu wissen, dass PS nicht unbedingt bedeutet, dass ich sie nicht entwerfen kann Animationsdesign-Entwürfe. [Verrückt]… Also ging ich zu Zoku.com, um nach Materialien zu suchen, und am Ende fand ich nur ein Bild:
Ich denke, dass ich eine CSS3-Animation machen möchte, haha... was soll ich tun? - Auf keinen Fall, es gefällt mir einfach! (Hier nicht sprühen, da ist wirklich kein Material)
...Der Endeffekt sieht so aus, das ist ein Beispiel auf dem mobilen Endgerät! (Das GIF bleibt hängen, also schauen Sie es sich bitte einfach an, sprühen Sie es nicht, wenn es Ihnen nicht gefällt...):
OK, in der Tat, das Hauptzweck ist das Erlernen von Wissenspunkten:
Die in dieser Demo beteiligten Wissenspunkte sind:
Perspektive
Perspektive-Ursprung
transform- style
transform-origin
animation
@keyframes
Translate3d, Translate ://www.php.cn/
Zurück zu diesem Fall: Wie wurde solch eine frustrierende Animation implementiert? Ich werde den Code zum Üben mit Ihnen teilen: HTML-Struktur:
<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>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);
}
}righthair.png
lefthair.png
Das Obige ist der gesamte Inhalt Ich hoffe, dass dieser Artikel für alle hilfreich ist. Ich hoffe auch, dass jeder die chinesische PHP-Website unterstützt.
Weitere Artikel zum Beispielcode für die CSS3-Implementierung von niedlichen Minion-Animationen finden Sie auf der chinesischen PHP-Website! 
