呼吸灯效果 

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3实现会呼吸的灯</title>
    <style type="text/css">
    body,
    div,
    dl,
    dt,
    dd,
    ul,
    ol,
    li,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    form,
    input,
    textarea,
    p,
    th,
    td {
        margin: 0;
        padding: 0;
    }

    body {
        background: #333;
    }
    
    .circle {
        position: relative;
        margin: 100px auto;
        width: 120px;
        height: 120px;
        line-height: 40px;
        border: 1px solid #FFC0CB;
        border-radius: 5px;
        color: #fff;
        font-size: 20px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
        background-image: -webkit-gradient(linear, left top, left bottom, from(#FFC0CB), to(#FF69B4));
        background-image: -moz-linear-gradient(#FFC0CB, #FF69B4);
        animation: ease-in-out breath 2500ms infinite alternate;
        -webkit-animation: ease-in-out breath 2500ms infinite alternate;
        cursor: pointer;

    }
    
    @keyframes breath {
        0% {
            opacity: .2;
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }
        100% {
            opacity: 1;
            border: 1px solid rgba(255, 192, 203, 1);
            box-shadow: 0 1px 30px rgba(255, 192, 203, 1);
        }
    }
    
    @-webkit-keyframes breath {
        0% {
            opacity: .2;
            box-shadow: 0 1px 2px rgba(255, 255, 255, 0.1);
        }
        100% {
            opacity: 1;
            border: 1px solid rgba(255, 192, 203, 1);
            box-shadow: 0 1px 30px rgba(255, 192, 203, 1);
        }
    }
    </style>
</head>

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

</html>
View Code

 

posted @ 2017-06-09 17:11  越来越好888  阅读(1404)  评论(0)    收藏  举报