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

来源：互联网发布：酒泉市大数据公司编辑：程序博客网时间：2024/04/28 01:46
这里写图片描述
<!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>
0 0