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

最新推荐文章于 2024-02-27 18:01:25 发布

邹大叔

最新推荐文章于 2024-02-27 18:01:25 发布

阅读量2.3k

点赞数

分类专栏： CSS

CSS 专栏收录该内容

22 篇文章 4 订阅

订阅专栏

这里写图片描述

<!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
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
【特效】简单的呼吸心跳灯

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .breath{
复制链接

扫一扫

专栏目录