zoukankan      html  css  js  c++  java
  • transform 图标旋转,IE8、IE7不兼容

    要将图标旋转,只需使用transform的rotate以及transition即可完成旋转的动画效果。
    ease 规定慢速开始,然后变快,然后慢速结束的过渡效果;  
    ease-in 规定以慢速开始的过渡效果;  
    ease-out 规定以慢速结束的过渡效果;  
    ease-in-out 规定以慢速开始和结束的过渡效果

    li i { 
      background: url(icon.pngno-repeat; display: block;  42px; height: 32px; position: relative; z-index: 10; float:left; 
        -webkit-transition: -webkit-transform 0.4s ease-out; 
        -moz-transition: -moz-transform 0.4s ease-out; 
        transition: transform 0.4s ease-out; 

    li a:hover i { 
        -webkit-transform: rotate(360deg); 
        -moz-transform: rotate(360deg); 
        transform: rotate(360deg); 




    完整:

    <style>
    ul { 145px; margin: 0 auto; list-style: none; font-size: 30px;background-color: #ffe184;}
    li{padding:10px; background-color: #ff4d52; }
    li a{145px;height:42px;line-height:36px;display:block;color:#333; background-color: #ffff00;}
    li a:hover{text-decoration:none}
    li a i { background: url(images/icon.png) no-repeat; display: block; 42px; height: 32px; position: relative; z-index: 10; float:left;
    -webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;
    -ms-transition: -moz-transform 0.4s ease-out;
    transition: transform 0.4s ease-out;
    background-color: #003399;
    }
    li a:hover i {
    -webkit-transform: rotate(360deg);
    -moz-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
    }

    li.female a i { background-position: 0 0; }
    li.arrow a i { background-position: 0 -50px; }
    </style>

    <ul class="icos">
    <li class="female"><a href="#"><i></i>女生</a></li>
    <li class="arrow"><a href="#"><i></i>箭头</a></li>
    </ul>


     
  • 相关阅读:
    Laravel中如何将单个routes.php分割成多个子文件
    PHP中“==”运算符的安全问题
    一些需要禁用的PHP危险函数
    使用PHP QR Code生成二维码
    gulp详细入门教程
    h5+分享到微信、朋友圈代码示例
    学习地址
    关于this 方法中套方法中找 立即执行的问题 等问题
    判断条件问题是否存在
    jsp 基础语法
  • 原文地址:https://www.cnblogs.com/hubl/p/5799654.html
Copyright © 2011-2022 走看看