利用CSS的animation属性实现图片放大缩小

前言：

在新开发模板的时候看到别人家的网站有个小爱心跳动，于是好奇的去搜索了一下CSS的animation属性，做了类似的一个放大缩小的案例。

HTML代码

<script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<div class="demo"></div>

CSS代码

@keyframes scaleDraw {
	/*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/
            0% {
	transform:scale(1);
	/*开始为原始大小*/
}
25% {
	transform:scale(1.1);
	/*放大1.1倍*/
}
50% {
	transform:scale(1);
}
75% {
	transform:scale(1.1);
}
}.demo {
	width:200px;
	height:200px;
	background-color: red;
	-webkit-animation-name:scaleDraw;
	/*关键帧名称*/
            -webkit-animation-timing-function:ease-in-out;
	/*动画的速度曲线*/
            -webkit-animation-iteration-count:infinite;
	/*动画播放的次数*/
            -webkit-animation-duration:5s;
	/*动画所花费的时间*/
}
 

总结

程序猿什么都得学啊