使用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; /*动画所花费的时间*/ } 

总结

程序猿什么都得学啊