animation css 透明度逐渐_通过css3动画和opacity透明度实现呼吸灯效果

通过css3动画和opacity透明度实现呼吸灯效果

发布时间：2019-08-09 15:29:54   作者：殷浩   我要评论

这篇文章主要介绍了通过css3动画和opacity透明度实现呼吸灯效果,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

本文介绍了通过css3动画和opacity透明度实现呼吸灯效果的方法，分享给大家，具体如下:

呼吸灯

/*也可以通过加层罩，通过设置层罩透明度来实现亮度动画*/

body{

background-color: black;

}

div{

margin: 0 auto;

margin-top: 200px;

width: 300px;

height: 300px;

border-radius: 50%;

background-color: yellow;

box-shadow: 0 0 80px red;

animation-name: light;

animation-duration: 3s;

animation-timing-function: linear;

animation-iteration-count: infinite;

animation-direction: alternate;

}

@keyframes light{

from{

opacity: 1;

}

to{

opacity: 0.2;

}

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

相关文章

对于设置透明度，我们有两个可以选的css3属性：rgba 和 opacity。这篇文章主要介绍了详解css透明度之rgba和opacity的区别及兼容，感兴趣的可以一起跟随小编来了解一下2019-01-10

这篇文章主要介绍了CSS中 opacity的设置影响了index(层数)的改变的问题，通过各种情况出现的问题进行了总结并附上了代码，具体操作步骤大家可查看下文的详细讲解，感兴趣2017-08-17

这篇文章主要介绍了css中使用rgba和opacity设置透明度的两种方法,通过实例演示解释了两者之间的差别,需要的朋友可以参考下2017-08-14

CSS3的透明度属性opacity想必大家都已经用的无处不在了。而对于不支持CSS3的浏览器如何进行透明处理，保持浏览器效果的一致,本篇文章主要介绍了详解CSS透明opacity和IE各版2016-12-20

这篇文章主要介绍了解决CSS3的opacity属性带来的层叠顺序问题的方法,主要针对opacity的属性值小于1的层会覆盖在其他层之上的问题,需要的朋友可以参考下2016-05-09

这篇文章主要介绍了详解CSS3的opacity属性设置透明效果的用法,同时还讲到了opacity透明度带有的继承性影响子集元素的问题,值得初学者注意,需要的朋友可以参考下2016-05-09

用来设定元素透明度的 Opacity 是CSS 3里的一个属性。当然现在还只有少部分浏览器支持，不过各个浏览器都有自己的私有属性来支持,其中包括老版本的Mozilla和Safari2015-11-09

这篇文章主要介绍了CSS3中的opacity属性使用教程,主要用来设置透明效果,需要的朋友可以参考下2015-08-19

CSS 图像透明度opacity想必大家并不陌生吧，使其可以让图片或者页面拥有透明效果，下面为大家讲解下CSS opacity的使用及其兼容性，感兴趣的朋友可以参考下2013-09-08

图片的透明效果是网页中需要用到的一种特殊形式，虽然不是非常的常用，但是遇到这样的需求往往有点措手不及，在webjx.com的文章中虽然有这方面的CSS实例，但还没有系统2008-10-17

最新评论