css3呼吸动画按钮-文章详情-前端技术-千寻前端

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .circle{
            width: 160px;
            height: 160px;
            cursor:pointer;
            position: relative;
            border-radius: 50%;
            background-color: rgba(105,217,216,.1);

            /*倒影*/
            -webkit-box-reflect: below 0 -webkit-linear-gradient(top,rgba(250,250,250,0),rgba(250,250,250,.1) 30%,rgba(250,250,250,0.5));
        }



        .btn{
            animation-name: btn;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
            animation-play-state: running;
        }

        .circle:before,
        .circle:after{
            position: absolute;
            border-radius: 50%;
        }
        .circle:before{
            content: "";
            width: 90%;
            height: 90%;
            margin:5%;
            background-color: rgba(105,217,216,.3);
        }
        .circle:after{
            width: 80%;
            height: 80%;
            margin:10%;
            content: "";
            color: #fff;
            vertical-align: middle;
            text-align: center;

            /*镜相渐变背景*/
            background-image: radial-gradient(ellipse at left top, rgb(140,230,250),rgb(50,140,180));
        }
        @keyframes btn{
            from {background-color: rgba(105,217,216,.1);}
            to {background-color: rgba(105,217,216,.5);}
        }
    </style>
</head>
<body class="middle">

<div class="circle btn"></div>
</body>
</html>