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

发布时间：2020-05-11 19:30:37 所属栏目：系统来源：互联网

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

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>呼吸灯</title> /*也可以通过加层罩，通过设置层罩透明度来实现亮度动画*/ <style> 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; } } </style> </head> <body> <div></div> </body> </html>

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!