呼吸按钮 - 纯CSS

CSS呼吸按钮

直接上代码

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=utf-8"/>
    <title>呼吸按钮</title>
    <style type="text/css">
    *{
        margin: 0;
        padding: 0;
    }
    .breath_light {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        border-radius: 20px;
        width: 40px;                                    
        height: 40px;
        overflow: hidden;
        background: #99dd33;
      
        /* IE10、Firefox and Opera，IE9以及更早的版本不支持 */
        animation-name: breath;                         /* 动画名称 */
        animation-duration: 1s;                         /* 动画时长3秒 */
        animation-timing-function: ease-in-out;         /* 动画速度曲线：以低速开始和结束 */
        animation-iteration-count: infinite;            /* 播放次数：无限 */
     
        /* Safari and Chrome */
        -webkit-animation-name: breath;                 /* 动画名称 */
        -webkit-animation-duration: 1s;                 /* 动画时长3秒 */
        -webkit-animation-timing-function: ease-in-out; /* 动画速度曲线：以低速开始和结束 */
        -webkit-animation-iteration-count: infinite;    /* 播放次数：无限 */
    }
     
    @keyframes breath {
        from { opacity: 1; width: 40px; height: 40px; }                          /* 动画开始时 */
        50%  { opacity: 1; width: 60px; height: 60px; border-radius: 30px;}      /* 动画50% 时 */
        to   { opacity: 1; width: 40px; height: 40px; }                          /* 动画结束时 */    
    }
     
    @-webkit-keyframes breath {
        from { opacity: 1; width: 40px; height: 40px; }                          /* 动画开始时 */
        50%  { opacity: 1; width: 60px; height: 60px; border-radius: 30px;}      /* 动画50% 时 */
        to   { opacity: 1; width: 40px; height: 40px; }                          /* 动画结束时的 */
    }
    </style>
</head>
<body>
    <div class="breath_light" title="呼吸按钮"></div>
</body>
</html>