zoukankan      html  css  js  c++  java
  • css3 keyframes animation

    html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,address,big,cite,code,del,em,font,img,ins,small,strong,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend{margin:0;padding:0;}ol,ul{list-style:none;}:focus{outline:0;}a img{border:0;}img{vertical-align:top;}table{empty-cells:show;}ins{text-decoration:none;}del{text-decoration:line-through;}em{font-style:normal;}button::-moz-focus-inner,input[type="reset"]::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="file"]>input[type="button"]::-moz-focus-inner{border:none;padding:0;}.clearfix{*zoom:1;}.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}body{font:14px/1.5 "宋体";background:#fff;}a{color:#000;text-decoration:none;}a:hover{ text-decoration:underline;}.fl{float:left;}.fr{float:right;}.hide{display:none;}.show{display:block}.ad{display:block;height:auto;clear:both;margin-bottom:8px;overflow:hidden;zoom:1;}

    #wrap{1000px;
          height:auto;
          clear:both;
          margin:0 auto;
          padding-left:12px;
          padding-right:12px;
          overflow:hidden;
          *zoom:1;}
    .item-a li{_display:inline;float:left;margin:0 0 10px 7px}
    .item-a .pic{312px;height:184px;border:solid 6px #e6e6e6}
    @keyframes pulse {
        0% {
        transform:scale(1)
        }
        50% {
        transform:scale(1.3)
        }
        100% {
        transform:scale(1)
        }
    }
    @-webkit-keyframes pulse {
        0% {
        -webkit-transform:scale(1)
        }
        50% {
        -webkit-transform:scale(1.3)
        }
        100% {
        -webkit-transform:scale(1)
        }
    }
    @-moz-keyframes pulse {
        0% {
        -moz-transform:scale(1)
        }
        50% {
        -moz-transform:scale(1.1)
        }
        100% {
        -moz-transform:scale(1)
        }
    }

    .item-a li:hover .pic{
        border:solid 6px #c00202;
        animation:pulse 1s 0s ease both;
        -webkit-animation:pulse 1s 0s ease both;
        -moz-animation:pulse 1s 0s ease both;}

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml%22%3E%3Chead>
    <meta http-equiv="Content-Type" content="text/html; charset=gbk">
    <title>爱漫莎</title>
       
        <link href="css/master.css" rel="stylesheet" />
    <body>

    <div id="wrap">

     
      
      <ul class="item-a">
       <li>
        <p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_001.jpg" height="184" width="312"></a></p>
        
       </li>
       <li>
        <p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_002.jpg" height="184" width="312"></a></p>
        
       </li>
       <li>
        <p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_003.jpg" height="184" width="312"></a></p>
        
       </li>
       <li>
        <p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_004.jpg" height="184" width="312"></a></p>
        
       </li>
       <li>
        <p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_005.jpg" height="184" width="312"></a></p>
       
       </li>
       <li>
        <p class="pic"><a href=""><img src="%E7%88%B1%E6%BC%AB%E8%8E%8E_files/index_006.jpg" height="184" width="312"></a></p>
        
       </li>
      </ul>
     
       
    </div>

    </body></html>

  • 相关阅读:
    aspx有"记住我"的登录
    Aspx比较简单的登录
    内容显示分页数字分页 aspx
    Ashx登录
    Aspx 验证码_各种封装
    IsPostBack的使用
    Ashx增删改查_动软
    一般处理程序ashx
    dispatch_after
    pch文件的作用
  • 原文地址:https://www.cnblogs.com/xiaoleidiv/p/3247755.html
Copyright © 2011-2022 走看看