html,css实现呼吸灯效果
2019-06-28 15:20
225 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/rolinabc/article/details/94006460
1、html+css实现呼吸灯效果,如下图:
代码如下:
[code]<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{ width: 100%; height: 100%; background-color: black; } .outer{ width: 150px; height: 150px; margin: 0 auto; margin-top: 300px; border-radius: 50%; background-color: yellow; box-shadow: yellow 0px 0px 80px ; } .inner{ float: left; margin-left: -60px; margin-top: -60px; width: 500px; height: 500px; background-color: black; opacity: 0.7; animation-name: move; animation-duration: 3s; animation-iteration-count: infinite; animation-direction: alternate; } @keyframes move{ from{ opacity: 0; } to{ opacity: 0.7 } } </style> </head> <body> <div class="outer"> <div class="inner"></div> </div> </body> </html>
相关文章推荐
- HTML+CSS+JS实现二级菜单的效果
- 用原生js+HTML+CSS实现一个弹幕的效果
- html+css+js简单实现图片轮播效果
- Html 和 CSS 实现 Tab 切换效果
- html+css 实现图片整体布局效果
- [前端] html+css+javascript 实现选项卡切换效果
- HTML中用CSS实现图片与内容前后翻转动画效果
- html+css实现百叶效果
- 从0开始html前端页面开发_CSS实现图像获取鼠标焦点逐渐变大动画效果
- html,css,原生js——实现常见的Tab(tab)选项卡切换效果——延迟切换
- HTML+CSS实现图片下半部分遮罩文字效果(仿微信推送信息的图片文字效果)
- 用html+css+js实现选项卡切换效果
- html+css+js实现选项卡效果
- 使用html+js+css 实现页面轮播图效果(实例讲解)
- html 使用js+css+html实现图片划过预览效果
- html,css,原生js——实现Tab(tab)选项卡切换效果——自动切换
- 原生 js+css+html实现轮播图效果及左侧菜单栏效果
- HTML + css 实现表白墙效果页面
- HTML+CSS实现动画效果
- HTML+CSS项目实践五:使用纯CSS实现点击文字切换图片效果(不使用JS)