本文主要介绍css如何实现图像放大缩小动画。 对于你现在的搜索和搜索问题还是有很好的参考价值的。 希望《编程之家》小编整理的这篇内容对您有所帮助。 如果有错误或没有充分考虑的事情css3 放大缩小动画,请告诉我。
方法:1、使用“@keyframes动画名称{}”规则和“transform:scale(缩放比例列);” 创建放大动画的语句; 2、使用“图片元素{动画:动画名称时间无限;}”语句进行缩放 动画用于图形元素。
本教程的运行环境:windows7系统,CSS3&&HTML5版本,戴尔G3笔记本。
在css中css3 放大缩小动画,可以使用animation属性、“@keyframes”规则以及transform:scale()来实现图像放大和缩小动画。
示例1:
/*css部分*/ @keyframes scaleDraw { /*定义关键帧、scaleDrew是需要绑定到选择器的关键帧名称*/ 0%{ transform: scale(1); /*开始为原始大小*/ } 25%{ transform: scale(1.1); /*放大1.1倍*/ } 50%{ transform: scale(1); } 75%{ transform: scale(1.1); } } .ballon{ width: 150px; height: 200px; background: url(images/balloon.png); background-size: 150px 200px; -webkit-animation-name: scaleDraw; /*关键帧名称*/ -webkit-animation-timing-function: ease-in-out; /*动画的速度曲线*/ -webkit-animation-iteration-count: infinite; /*动画播放的次数*/ -webkit-animation-duration: 5s; /*动画所花费的时间*/ }
上面的属性也可以写在一起
animation: scaleDraw 5s ease-in-out infinite; -webkit-animation: scaleDraw 5s ease-in-out infinite;
影响:
示例2:
.live{ position: relative; width: 100px; height: 100px; } .live img{ width: 100px; height: 100px; z-index: 0; } @keyframes living { 0%{ transform: scale(1); opacity: 0.5; } 50%{ transform: scale(1.5); opacity: 0; /*圆形放大的同时,透明度逐渐减小为0*/ } 100%{ transform: scale(1); opacity: 0.5; } } .live span{ position: absolute; width: 100px; height: 100px; left: 0; bottom: 0; background: #fff; border-radius: 50%; -webkit-animation: living 3s linear infinite; z-index: -1; } .live span:nth-child(2){ -webkit-animation-delay: 1.5s; /*第二个span动画延迟1.5秒*/ }
本质是借助动画的延迟属性,两层圆的动画相关属性基本相同,只是最里面的圆多了一些动画延迟属性。