CSS3动画片简笔画大全 |css线性颜色

.square {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
0%   {background-color: red; left:0px; top:0px;}
25%  {background-color: yellow; left:200px; top:0px;}
50%  {background-color: blue; left:200px; top:200px;}
75%  {background-color: green; left:0px; top:200px;}
100% {background-color: red; left:0px; top:0px;}
}

上述代码创建了一个红色正方形，它沿着一个矩形路径运动。运动的过程中它的颜色也在不断地变化。这个动画的循环次数是无限的。

.circle {
width: 100px;
height: 100px;
background-color: black;
border-radius: 50%;
animation-name: example;
animation-duration: 1s;
animation-iteration-count: infinite;
}
@keyframes example {
0%   {transform: rotate(0deg);}
100% {transform: rotate(360deg);}
}

上述代码创建了一个黑色圆形，它在不断地旋转。动画的循环次数也是无限的。

.triangle {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid red;
animation-name: example;
animation-duration: 2s;
animation-iteration-count: infinite;
}
@keyframes example {
0%   {transform: translateX(0);}
50%  {transform: translateX(200px);}
100% {transform: translateX(0);}
}

上述代码创建了一个红色三角形，它会沿着X轴向右移动200个像素，然后再回到初始的位置。动画是循环无限次的。

通过这些简单的CSS3动画片简笔画，大家可以看到CSS3的强大，可以使网页更加生动和有趣。