【前端小技能~CSS呼吸灯效果】兼容性倍儿棒的呼吸灯CSS实现

本文链接：https://blog.csdn.net/qiuqiu1628480502/article/details/119885694

CSS呼吸灯实现

可以是按钮，可以是图片，也可以是其他dom元素，替换你想要添加呼吸灯效果的元素即可
下面以按钮为例：

元素

<body>
	<button class="myBtn">呼吸灯效果</button>
</body>

基础样式添加动画

.myBtn {
	  margin: 100px;
	  background-color: #008000;
	  color: #fff;
	  padding: 10px;
	  border: 0;
	  border-radius: 4px;
		
	  /* 动画 */
      animation: myMove 1s infinite; //循环
	  -webkit-animation: myMove 1s infinite;
	  -moz-animation: myMove 1s infinite;
	  -o-animation: myMove 1s infinite;
}

兼容性动画实现

@keyframes myMove {
		  0% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		
		  50% {
		    transform: scale(1.2, 1.2);
		    -moz-transform: scale(1.2, 1.2);
		    -webkit-transform: scale(1.2, 1.2);
		    -o-transform: scale(1.2, 1.2);
		    -ms-transform: scale(1.2, 1.2);
		  }
		
		  100% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		}
		
		@-webkit-keyframes myMove {
		  0% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		
		  50% {
		    transform: scale(1.2, 1.2);
		    -moz-transform: scale(1.2, 1.2);
		    -webkit-transform: scale(1.2, 1.2);
		    -o-transform: scale(1.2, 1.2);
		    -ms-transform: scale(1.2, 1.2);
		  }
		
		  100% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		}
		
		@-moz-keyframes myMove {
		  0% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		
		  50% {
		    transform: scale(1.2, 1.2);
		    -moz-transform: scale(1.2, 1.2);
		    -webkit-transform: scale(1.2, 1.2);
		    -o-transform: scale(1.2, 1.2);
		    -ms-transform: scale(1.2, 1.2);
		  }
		
		  100% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		}
		
		@-o-keyframes myMove {
		  0% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		
		  50% {
		    transform: scale(1.2, 1.2);
		    -moz-transform: scale(1.2, 1.2);
		    -webkit-transform: scale(1.2, 1.2);
		    -o-transform: scale(1.2, 1.2);
		    -ms-transform: scale(1.2, 1.2);
		  }
		
		  100% {
		    transform: scale(1, 1);
		    -moz-transform: scale(1, 1);
		    -webkit-transform: scale(1, 1);
		    -o-transform: scale(1, 1);
		    -ms-transform: scale(1, 1);
		  }
		}