呼吸灯演示

最新推荐文章于 2022-07-25 09:32:35 发布

diemengxia1380

最新推荐文章于 2022-07-25 09:32:35 发布

阅读量266

点赞数

文章标签： ui javascript ViewUI

原文链接：http://www.cnblogs.com/flyingLcode/p/7871560.html

版权

几种不同类型的呼吸灯

第一种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            font-family:'Segoe UI Light','Segoe UI',Arial,'微软雅黑',sans-serif;
            font-size: 20px;
            color:#333333;
            background: black;
        }
        .breath {
            width: 50px;
            height:50px;
            margin:100px auto;                                               
            overflow:hidden;             
            background: #99dd33;
            opacity:0.1;
            -webkit-box-shadow: 0 0 5px #99dd33;
            /*-moz-box-shadow: 0 0 5px #99dd33;
            -ms-box-shadow: 0 0 5px #99dd33;
            -o-box-shadow: 0 0 5px #99dd33;
            box-shadow: 0 0 5px #99dd33;*/
            -webkit-border-radius:50%;
            /*-moz-border-radius:2px;
            -ms-border-radius:2px;
            -o-border-radius:2px;
            border-radius:50%;*/  

            /*动画名称*/
            -webkit-animation-name: breath;
            /*动画时长6秒*/
            -webkit-animation-duration: 6s; 
            /*动画速度曲线：以低速开始和结束*/
            -webkit-animation-timing-function: ease-in-out;
            /*播放次数：无限*/
            -webkit-animation-iteration-count: infinite;
        }

        @-webkit-keyframes 'breath' {
            /*动画开始时的不透明度*/
            from {
                opacity:0.1;
            }
            /*动画50%时的不透明度*/
            50% {
                opacity:1;
            }
            /*动画结束时的不透明度*/
            to {
                opacity:0.1;
            }
        }                
    </style>
</head>
<body>
    <div class="breath" title="呼吸线"></div>
</body>
</html>

效果：

第二种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * {
            margin:0;
            padding:0;
        }
        body {
            font-size:12px;            
            font-family:Arial,Helvetica,sans-serif;
            background:#333;
            -webkit-text-size-adjust:none;
        }        
        .breathe-btn {            
            width:100px;
            height:10px;
            margin:50px auto;            
            color:#fff;
            text-align:center;
            cursor:pointer;
            border-radius:5px;
            border:1px solid #2b92d4;            
            box-shadow:0 1px 2px rgba(0,0,0,.3);
            overflow:hidden;
            background-image:-webkit-gradient(linear,left top,left bottom,from(#6cc3fe),to(#21a1d0));
            /*动画名称*/
            -webkit-animation-name:breathe;
             /*动画速度曲线：以低速开始和结束*/
            -webkit-animation-timing-function:ease-in-out;
            /*动画时长2700ms*/
            -webkit-animation-duration:2700ms;
            /*播放次数：无限*/
            -webkit-animation-iteration-count:infinite;
            /*animation-direction 属性定义是否应该轮流反向播放动画
            如果 animation-direction 值是 "alternate"，则动画会在奇数次数（1、3、5 等等）正常播放，而在偶数次数（2、4、6 等等）向后播放*/
            -webkit-animation-direction:alternate;
        }
        @-webkit-keyframes breathe {
            0% {
                opacity:.2;
                box-shadow:0 1px 2px rgba(255,255,255,0.1);
            }
            100% {
                opacity:1;
                border:1px solid rgba(59,235,235,1);
                box-shadow:0 1px 30px rgba(59,255,255,1);
            }
        }
    </style>
</head>
<body>
    <div class="breathe-btn"></div>
</body>
</html>

效果：

第三种：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        body{
            background: black;
        }
        #breathLight{
            width: 20px;
            height: 20px;
            position: fixed;
            left: 660px;
            bottom: 120px;
          }
        #breathLight:hover{
            cursor: pointer;
        }
        #circle-1,#circle-2,#circle-3{
            background-color: rgb(255,255,255);
            width: 20px;
            height: 20px;
            display: block;
            transform: scale(0);
            position: absolute;
            border-radius: 100%;
            transform-origin: 50% 50%;
        }
        #circle-1{
            animation: clickCircle  3s ease-in-out infinite;
            opacity: 0.6;
        }
        #circle-2{
            animation: clickCircle 3s ease-in-out infinite .5s;
            opacity: 0.8;
        }
        #circle-3{
            animation: clickCircle 3s ease-in-out infinite 1s;
            opacity: 1;
        }
        @keyframes clickCircle{
            0%{
                transform: scale(0);
            }
            100%{
                transform: scale(1.5);
                opacity: 0;
            }
        }
    </style>
</head>
<body>
    <div id = "breathLight">
        <i id="circle-1" class="c"></i>
        <i id="circle-2" class="c"></i>
        <i id="circle-3" class="c"></i>
    </div>
</body>
</html>

效果：

转载于:https://www.cnblogs.com/flyingLcode/p/7871560.html

diemengxia1380

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
呼吸灯演示

几种不同类型的呼吸灯第一种：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ ...
复制链接

扫一扫