萤火虫效果 

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <style>
        @-webkit-keyframes glow {
            0% {    
                -webkit-box-shadow: 0 0 12px rgba(72, 106, 170, 0.5);
        border-color: rgba(160, 179, 214, 0.5);    
            }

            100% {
                -webkit-box-shadow: 0 0 12px #fff, 0 0 18px #fff;
            }
        }

        .anim_image {
            -webkit-animation-name: glow;
            -webkit-animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -webkit-animation-direction: alternate;
            -webkit-animation-timing-function: ease-in-out;
            border-radius:10px;
        }

        ul {
            width: 960px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            background-color: #056839;
            margin: 0px auto;
        }

            ul li {
                width: 150px;
                color: white;
                list-style: none;
                float: left;
            }
    </style>
</head>
<body>
    <ul>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li>首页</li>
        <li class="anim_image">我的测试</li>
    </ul>

</body>
</html>

　　

posted @ 2013-11-11 19:08  Ganler1988  阅读(270)  评论(0)  编辑  收藏  举报