通过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
最新评论