zoukankan      html  css  js  c++  java
  • h5/css动态旋转木马源码

    html,body{ height: 100%;}

    *{ box-sizing:border-box;}

    .imgBox{ transform-style: preserve-3d; position: relative; 100px; height: 100px; margin:200px auto 0;}

    .imgBox img{100%; height: 100%; position: absolute; top:0; transition: transform 1s linear; cursor: pointer;

    border-radius: 10px; box-shadow: 1px 1px 1px 1px #222;}

    @keyframes xzmm{

    from{ transform: perspective(400px) rotateY( 0deg) translateZ(200px);}

    to{ transform: perspective(400px) rotateY( 360deg) translateZ(200px);}

    }

    .imgBox img.sel{ box-shadow: 0 0 3px 1px #00BCD4;}

     

     

    " />


     

    " />


     

    " />


     

    " />


     

    " />


     

    " />


     

    " />


     

    " />


     

    " />

    $(function(){

    var $imgBox = $("#imgBox");

    var imgCount = $imgBox.children().length;

    var dur = 9; // 旋转一圈所需时间,单位s

    $imgBox.children().each(function(i,dom){

    var $this = $(this);

    $this.css({

    "z-index": imgCount-i,

    "animation": "xzmm "+dur+"s linear "+i*(dur/imgCount)+"s infinite forwards"

    }).on("mouseenter",function(){

    $(this).parent().children().removeClass("sel").css({

    "animation-play-state": "paused"

    });

    $(this).addClass("sel");

    }).on("mouseleave",function(){

    $(this).parent().children().removeClass("sel").css({

    "animation-play-state": "running"

    });

    });

    });

    })


     

  • 相关阅读:
    c读取文本文档
    java类中定义接口
    android selector
    android listview
    android继承Dialog实现自定义对话框
    移植net-snmp到开发板(mini210)
    [BZOJ1901]Zju2112 Dynamic Rankings
    [BZOJ3524][Poi2014]Couriers
    [codeforces722D]Generating Sets
    [codeforces722C]Destroying Array
  • 原文地址:https://www.cnblogs.com/xsns/p/6698244.html
Copyright © 2011-2022 走看看