系列文章目录
CSS3实现半透明边框(1)
CSS3实现多重边框(2)
CSS3如何调整背景图片大小(3)
CSS3背景定位(4)
CSS3设置条纹背景(5)
CSS#实现国际象棋棋盘(6)
CSS实现呼吸效果
前言
实现一个图片有规律的大小变化,呈现呼吸效果,怎么用CSS实现这个呼吸效果呢?
一、animation
1.animation属性
CSS实现动态效果可以使用动画( animation)来属性实现,animation 属性是一个简写属性,用于设置六个动画属性
分别为:
animation-name:绑定到选择器的 keyframe 名称。
animation-duration:完成动画所花费的时间。
animation-timing-function:动画的速度曲线。
animation-delay:在动画开始之前的延迟。
animation-iteration-count:动画应该播放的次数。
animation-direction:是否应该轮流反向播放动画。
2.语法
animation: name duration timing-function delay iteration-count direction;
放大缩小效果可以用transform: scale来实现,在这基础上有了动画,就可以设置一个在2秒内的呼吸箭头了!然后设置播放次数为infinite(无限)。就可以的到想要的效果了!
二、呼吸效果实现
1.CSS代码
代码如下:
.test{
width: 200px;
height: 200px;
background-image:url("./src/assets/csdn/上箭头.svg");
background-repeat: no-repeat;
background-size: contain;
animation: myBreath 2s linear infinite;
}
@keyframes myBreath {
0%{
transform: scale(0.88);
}
50%{
transform: scale(1);
}
100%{
transform: scale(0.88);
}
}
2.呼吸效果图
总结
以上就是我们用CSS的animation和transform来实现呼吸效果。