zoukankan      html  css  js  c++  java
  • css实现鼠标移上去变大,旋转,转别人的额

    <!doctype html>
    <html>
    <head>
      <meta charset="utf-8">
      <title>CSS3鼠标滑过图标放大旋转动画DEMO演示</title>
      <style type="text/css">
      *{margin:0px;padding:0px;}
      #nav{980px;height:350px;margin:50px auto;}
      #nav ul li{list-style:none;background:rgba(0,0,0,.5);height:105px;180px;float:left;margin:60px 5px;position:relative;}  
      #nav ul li:before{
        content:"";height:105px;180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;
        transform:rotate(60deg);
        -webkit-transform:rotate(60deg);
        -moz-transform:rotate(60deg);
      }
      #nav ul li:after{
        content:"";height:105px;180px;background:rgba(0,0,0,.5);position:absolute;top:0px;left:0px;z-index:1;
        transform:rotate(-60deg);
        -webkit-transform:rotate(-60deg);
        -moz-transform:rotate(-60deg);
      }
      #nav ul li.mar{margin-left:100px;}
      #nav ul li img{
        top:0px;left:0px;right:0px;bottom:0px;margin:auto;z-index:2;position:absolute;
        transition:1s;
        -webkit-transition:1s;
        -moz-transition:1s;
      }
      #nav ul li img:hover{
        -webkit-transform:rotate(360deg) scale(1.2); 
        -moz-transform:rotate(360deg) scale(1.2);
        -ms-transform:rotate(360deg) scale(1.2);
        -o-transform:rotate(360deg) scale(1.2);
      }
      </style>
    </head>

    <body>

    <div id="nav">
      <ul>
        <li><img src="images/1.png"/></li>
        <li><img src="images/2.png"/></li>
        <li><img src="images/3.png"/></li>
        <li><img src="images/4.png"/></li>
        <li><img src="images/5.png"/></li>
        <li class="mar"><img src="images/1.png"/></li>
        <li><img src="images/7.png"/></li>
        <li><img src="images/8.png"/></li>
        <li><img src="images/9.png"/></li>
        <li><img src="images/10.png"/></li>
        <li><img src="images/11.png"/></li>
        <li><img src="images/12.png"/></li>
        <li><img src="images/13.png"/></li>
        <li><img src="images/14.png"/></li>
      </ul>
    </div>

    </body>

    </html>

  • 相关阅读:
    Java的格式化输出
    常用排序算法的Python实现
    零基础自学用Python 3开发网络爬虫(一)
    Python常见数据结构整理
    百度天气预报API的使用(java版本)
    大总结
    CCS学习(三)
    CSS学习(页外引用还不懂)
    CSS自定义动画
    ssm日期格式转换
  • 原文地址:https://www.cnblogs.com/qiuchunxia/p/5920249.html
Copyright © 2011-2022 走看看