zoukankan      html  css  js  c++  java
  • 萤火虫效果

    <!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 {
                 960px;
                height: 60px;
                line-height: 60px;
                text-align: center;
                background-color: #056839;
                margin: 0px auto;
            }
    
                ul li {
                     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>
    

      

  • 相关阅读:
    最近工作
    有点感受
    日子有点快
    IDEA配置spring
    IDEA配置hibernate
    mysql插入中文乱码
    深夜配置一把struts2
    IDEA 配置SSH2
    找工作的事情
    YTU 2509: 奇怪的分式
  • 原文地址:https://www.cnblogs.com/ganler1988/p/3418362.html
Copyright © 2011-2022 走看看