css怎么实现图片放大缩小动画
在css中,可以使用animation属性、“@keyframes”规则、transform: scale()实现图片放大缩小动画。
示例1:
<div class="ballon"></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);
}
}
.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:
<div class="live">
<img src="https://www.swvq.com/images/live.png" alt="">
<span></span>
<span></span>
</div>
.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秒*/
}
实质就是就是利用了动画的延迟属性,两层圆的动画相关的属性基本相同,除了最外层的圆多设置了animation-delay属性
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanfheig
系列文章
更多
同类精品
更多
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
微信公众号没有声音提示怎么办
PHP中文网 03-31 -
excel下划线不显示怎么办
PHP中文网 06-23 -
excel打印预览压线压字怎么办
PHP中文网 06-22 -
怎样阻止微信小程序自动打开
PHP中文网 06-13 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01