css呼吸灯效果

最新推荐文章于 2024-12-18 08:44:17 发布

奚大野...

最新推荐文章于 2024-12-18 08:44:17 发布

阅读量236

点赞数

分类专栏：前端css 文章标签： css safari javascript

本文链接：https://blog.youkuaiyun.com/qq_41752378/article/details/129376653

版权

前端css 专栏收录该内容

4 篇文章

订阅专栏

.dianAnimat1{
    position:relative !important;
    animation:mymove 1.1s infinite !important;
    // animation-direction:alternate;/*轮流反向播放动画。*/
    animation-timing-function: ease-in !important; /*动画的速度曲线*/
    /* Safari 和 Chrome */
    -webkit-animation:mymove 1.1s infinite !important;
    // -webkit-animation-direction:alternate;/*轮流反向播放动画。*/
    -webkit-animation-timing-function: ease-in !important; /*动画的速度曲线*/
  }
 @keyframes mymove{
    0%{
		transform: scale(0.5);  /*开始为原始大小*/
		background:rgba(20, 255, 77, 1.0);
    }
	25%{
		transform: scale(1);
		background:rgba(20, 255, 77, .85);
	}
    50%{
		transform: scale(2);
		background:rgba(20, 255, 77, .7);
    }
	75%{
		transform: scale(3.8);
		background:rgba(20, 255, 77, .5);
	}
	100%{
		transform: scale(6);
		background:rgba(20, 255, 77, .2);
	}
  }

/*Safari and Chrome*/
@-webkit-keyframes mymove{
	0%{
		transform: scale(0.5);  /*开始为原始大小*/
		background:rgba(20, 255, 77, 1.0);
	}
	25%{
		transform: scale(1);
		background:rgba(20, 255, 77, .85);
	}
	50%{
		transform: scale(2);
		background:rgba(20, 255, 77, .7);
	}
	75%{
		transform: scale(3.8);
		background:rgba(20, 255, 77, .5);
	}
	100%{
		transform: scale(6);
		background:rgba(20, 255, 77, .2);
	}
}