css3小记----动画

一时失言乱红尘 2023-06-27 08:53 10阅读 0赞

今天写了一个挺好玩的简单动画，是一个马儿奔跑的效果，大家看了以后如果想要素材可以在下面留下你的邮箱，我会打包发给你。下面给大家看看效果  
![在这里插入图片描述][2020010522132454.gif]  
（忽略水印哈）效果是不是挺炫酷的，下面告诉大家怎么制作这个跑马

html的代码就上面这些，外面是一个显示的我们图片的区域，里面是放置我们这个跑马一系列图片的盒子，因为比较简单就不做太多讲解，下面看css代码

@keyframes move{ 
    			0%{ 
    				left: 0;
    			}
    		
    			100%{ 
    				left: -2400px;
    			}
    		}
    		@keyframes wrapMove{ 
    			0%{ 
    				right: 0;
    			}
    			100%{ 
    				right: 1500px;
    			}
    		}
    		.wrapper{ 
    			position: absolute;
    			width: 200px;
    			height: 100px;
    			top: 500px;
    			
    			overflow: hidden;
    			animation: wrapMove 12s;
    		}
    		.show{ 
    			position: absolute;
    			width: 2400px;
    			height: 100px;
    			background-image: url(img/horse.png);
    			animation: move 1s steps(12, end) both infinite;
    		}

很明显，这里用到了css3的知识，不会css3的小伙伴要看看css3的动画效果就可以看懂上面代码了。有的同学可能不知道steps（12，end）是什么意思，这是anmation的一个属性，把这个动画拆分成12小步来执行，这样我们就不用手动写每一帧动画了，后面的both属性可以不加，这个没有影响。我们给wrapper这个盒子设置一个overflow：hidden，这样就隐藏舞台外面的图片了，把这个跑马的一系列图设置成背景图片的样式。每一个个小马图片是200px 一共12个，所以要设置2400px的大小，像素的正负千万别错了，起始点是left：0，向左移动图片，所以要变成-2400px。把盒子设置成绝对定位，否则跑不动的。在马儿跑动的过程中，如果你想让马儿匀速跑动，可以加一个贝塞尔曲线（0,0,1,1），这样就不会有默认的先慢后快再慢的速度了。  
实现的方法就这么多了，因为比较简单，也没什么好说的，用到的是简单的css3的动画，如果哪位小伙伴没看懂可以在下面留言询问。

[2020010522132454.gif]: https://img-blog.csdnimg.cn/2020010522132454.gif