呼吸灯效果是一种常见的灯光效果,比如网页的按钮,现实生活中比如电脑的开机按钮。
使用CSS3的animation方法可以实现很多迷人的网页动画特效。
使用CSS3 配合box-shadow即可实现类似的效果
效果如下:
CSS代码如下:
.breathe-div { width: 100px; height: 100px; border: 1px solid #2b92d4; border-radius: 50%; text-align: center; cursor: pointer; margin:150px auto; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3); overflow: hidden; -webkit-animation-timing-function: ease-in-out; -webkit-animation-name: breathe; -webkit-animation-duration: 1500ms; -webkit-animation-iteration-count: infinite; -webkit-animation-direction: alternate; } @-webkit-keyframes breathe { 0% { opacity: .4; box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4), 0 1px 1px rgba(0, 147, 223, 0.1) inset; } 100% { opacity: 1; border: 1px solid rgba(59, 235, 235, 0.7); box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset; } }
HTML 代码:
<div class="breathe-div"> </div>
原文链接:https://blog.csdn.net/yusirxiaer/article/details/101453208

关注公众号『窗外天空』
获取更多建站运营运维新知!互联网创业、前沿技术......
最新评论
水淀粉vdfv
有其他下载方式么,网站上的点击下载后没有任何反应,或者直接发给我一下?83835079@qq.com
你好,我的型号ELECOM WRC-X3200GST3,ARMv8 Processor rev 4构架,CPU mediatek/mt7622,找了很久没有找到
我的也是这样。一直无法确认ARCH架构,或是不支持。一直没办法用。不知道怎么办了
您好,现在安装上了,可是ssr plus+配置好节点也没用,一直都是未运行,节点是有效的; 另外那个passwall2一找开就提示"无法确认ARCH架构,或是不支持", 麻烦大佬帮忙看下是什么问题,谢谢!