【特效】简单的呼吸心跳灯

2024-04-27 15:15:24

字体：大中小

来源：转载

供稿：网友

这里写图片描述

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/CSS"> .breath{ margin: 100px auto; height: 45px;line-height: 45px; width: 100px;overflow: hidden; background: #9D3;color: #fff; opacity: .1;box-shadow: 0 0 5px #9D3; border-radius: 2px; animation: breath 6s infinite;text-align: center; } @keyframes breath{ from{opacity: .1;} 50%{opacity: 1;} to{opacity: .1;} } .heartbeat{ margin: 140px auto; height:45px;line-height: 45px; width: 100px;overflow: hidden; background: #ef0000;color: #fff; box-shadow: 0 0 5px #EF0000; border-radius: 2px;text-align: center; animation: heartbeat .83s infinite; } @keyframes heartbeat{ from{opacity: .1;} 50%{opacity: 1;} to{opacity: .1;} } </style> </head> <body> <div class="breath">呼吸灯</div> <div class="heartbeat">心跳灯</div> </body></html>

上一篇：优酷视频播放器去广告服务

下一篇：layer 的使用