CSS实现呼吸效果

系列文章目录

CSS3实现半透明边框（1）
CSS3实现多重边框（2）
CSS3如何调整背景图片大小（3）
CSS3背景定位（4）
CSS3设置条纹背景（5）
CSS#实现国际象棋棋盘（6）

---

---

前言

实现一个图片有规律的大小变化，呈现呼吸效果，怎么用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来实现呼吸效果。