CSS3最最好玩的东西——动画！
2016-12-02 本文已影响788人
RossWen
有一个超级好玩，极致简约的小案例，分享一下。
cute.png
源代码如下：
布局
<body style="background: black;">
<div class='container'>
<div class='person'>
<div class='head'></div>
<div class='part arm one'></div>
<div class='part arm two'></div>
<div class='torso'></div>
<div class='part leg one'></div>
<div class='part foot one'></div>
<div class='part leg two'></div>
<div class='part foot two'></div>
</div>
</div>
</body>
CSS:
.container {
height: 300px;
width: 300px;
margin:50px;
}
.person {
position: absolute;
height: 75px;
width: 0;
color: #fff;
left: 150px;
top: 159px;
transform-origin: 50% 50% 0px;
-webkit-animation: sprint 2s infinite ease-in;
}
.person .head:before {
content: "";
position: absolute;
top: 0px;
left: -6px;
height: 2.7px;
width: 42px;
border-radius: 20%;
border: 4px solid white;
background-color: #fff;
transform-origin: 50% 100% 0px;
z-index: 90;
}
.person .head {
position: absolute;
top: -30px;
left: -6px;
height: 30px;
width: 30px;
border-radius: 50%;
border: 4px solid white;
transform-origin: 50% 100% 0px;
z-index: 90;
-webkit-animation: bob 2s infinite alternate;
}
.person .head:after {
content: "";
position: absolute;
top: -12px;
left: 9px;
height: 12px;
width: 15px;
border-radius: 30%;
border: 4px solid white;
background-color: #fff;
z-index: 90;
}
.person .torso {
position: absolute;
height: 60px;
width: 0;
border-left: 2px solid white;
left: 0px;
top: 15px;
z-index: 90;
}
.person .part {
position: absolute;
left: 0;
top: 75px;
z-index: 90;
}
.person .part.arm {
position: absolute;
border-left: 3px solid white;
border-bottom: 3px solid white;
height: 45px;
width: 39px;
top: 15px;
right: 300px;
transform-origin: 0% 0% 0px;
-webkit-animation: pump 1s infinite ease-in-out;
}
.person .part.arm.one {
transform: rotate3d(0, 0, 1, -90deg);
}
.person .part.arm.two {
transform: rotate3d(0, 0, 1, -90deg);
animation-delay: .5s;
}
.person .part.leg {
height: 57px;
width: 60px;
border-right: 3px solid white;
border-top: 3px solid white;
-webkit-animation: run 1s infinite ease-in;
transform-origin: 0% 0% 0px;
}
.person .part.leg.one {
transform: rotate3d(0, 0, 1, 90deg);
}
.person .part.leg.two {
transform: rotate3d(0, 0, 1, 80deg);
animation-delay: .5s;
}
.person .part .foot {
position: absolute;
top: 90px;
left: 0;
width: 3px;
height: 3px;
background-color: #ffffff;
z-index: 900;
border: 3px solid red;
}
@keyframes run {
0% {
transform: rotate3d(0, 0, 1, -5deg);
}
50% {
transform: rotate3d(0, 0, 1, 150deg);
}
100% {
transform: rotate3d(0, 0, 1, -5deg);
}
}
@keyframes bob {
0% {
transform: rotate3d(0, 0, 1, 5deg);
}
25% {
transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
}
50% {
transform: rotate3d(0, 0, 1, 5deg);
}
75% {
transform: rotate3d(0, 0, 1, -30deg) skew(15deg, 0deg);
}
100% {
transform: rotate3d(0, 0, 1, 20deg) skew(-15deg, 0deg);
}
}
@keyframes pump {
0% {
transform: rotate3d(0, 0, 1, 80deg);
}
50% {
transform: rotate3d(0, 0, 1, -70deg);
}
100% {
transform: rotate3d(0, 0, 1, 80deg);
}
}
@keyframes spin {
0% {
transform: rotate3d(0, 0, 1, -180deg);
}
25% {
transform: rotate3d(0, 0, 1, -100deg);
}
75% {
transform: rotate3d(0, 0, 1, 100deg);
}
100% {
transform: rotate3d(0, 0, 1, 180deg);
}
}
@keyframes sprint {
0% {
transform-origin: 50% 50% 0px;
transform: translate(-200px, 0px);
}
100% {
transform: translate(0px, 0px);
transform-origin: 50% 50% 0px;
transform: translate(1300px, 0px);
}
}
效果图嘛。。没有！好奇自己去写写看！
ps：源代码不是我写的，我也不知道作者是谁，总之希望这种好玩的东西多多益善。
