zoukankan      html  css  js  c++  java
  • css3动画实现旋转木马

    写旋转木马的时候,突发奇想想加个遮罩效果,那当然是用box-reflect属性了,写的效果就是不出来,原来就是手残给包图片的li标签加了个overflow:hidden,也是醉了哈哈哈哈,去掉就好啦,上代码:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
    
    *{margin:0;padding:0}
    html,body{100%;height:100%;}
    body{background: url(img1/pic6.jpg) no-repeat ; background-size:cover}
    ul{200px;height:300px; position: absolute; top:0;right:0;left:0;bottom:0;margin:auto;
    transform-style: preserve-3d; transition: all 50s; animation: move 5s ease-in-out infinite;}
    ul li{ list-style:none;180px;height:260px; position: absolute;left:0;top:0; /*overflow:hidden;*/
    }
    ul li img{100%;height:100%;
    -webkit-box-reflect:below 10px linear-gradient(rgba(255,255,255,0)50%,rgba(255,255,255,0.7));
    }
    .img1{ transform: translateZ(350px)}
    .img2{ transform: rotateY(30deg) translateZ(360px);}
    .img3{ transform: rotateY(60deg) translateZ(360px);}
    .img4{ transform: rotateY(90deg) translateZ(360px);}
    .img5{ transform: rotateY(120deg) translateZ(360px);}
    .img6{ transform: rotateY(150deg) translateZ(360px);}
    .img7{ transform: rotateY(180deg) translateZ(360px);}
    .img8{ transform: rotateY(210deg) translateZ(360px);}
    .img9{ transform: rotateY(240deg) translateZ(360px);}
    .img10{ transform: rotateY(270deg) translateZ(360px) ;}
    .img11{ transform: rotateY(300deg) translateZ(360px);}
    .img12{ transform: rotateY(330deg) translateZ(360px);}
    
    @-webkit-keyframes move{
    from{ transform: rotate3d(0,0,1,45deg);}
    to{ transform: rotate3d(1,2,1,1000deg);}
    }
    body:hover ul{ transform: rotateY(45deg);}
    </style> 
    </head>
    <body>
    <ul>
    <li class="img1"><img src="img1/img5.jpg" ></li>
    <li class="img2"><img src="img1/pic2.jpg" ></li>
    <li class="img3"><img src="img1/pic4.jpg" ></li>
    <li class="img4"><img src="img1/pic6.jpg" ></li>
    <li class="img5"><img src="img1/pic7.jpg" ></li>
    <li class="img6"><img src="img1/pic9.jpg" ></li>
    <li class="img7"><img src="img1/img5.jpg" ></li>
    <li class="img8"><img src="img1/pic2.jpg" ></li>
    <li class="img9"><img src="img1/pic4.jpg" ></li>
    <li class="img10"><img src="img1/pic6.jpg" ></li>
    <li class="img11"><img src="img1/pic7.jpg" ></li>
    <li class="img12"><img src="img1/pic9.jpg" ></li>
    </ul>
    <script type="text/javascript">
    //var tz = Math.round( (180/ 2 ) / Math.tan( Math.PI / 10) );
    //alert(tz);
    </script>
    </body>
    </html>
    

      

  • 相关阅读:
    jquery 图片播放器插件(支持自己设定时间,自己设定是否自动播放)
    ie6下bug集合(二)li之间空隙bug
    大小不固定的图片和多行文字的垂直水平居中
    解决IE6下 position的fixed定位问题
    C# 编写不安全代码
    委托和事件的使用
    如何删除win7桌面的库和家庭组图标
    gcc g++ 区别
    Java 访问注册表
    C# 通过反射类动态调用DLL方法
  • 原文地址:https://www.cnblogs.com/aloehui/p/7355088.html
Copyright © 2011-2022 走看看