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{width:100%;height:100%;}
body{background: url(img1/pic6.jpg) no-repeat ; background-size:cover}
ul{width: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;width:180px;height:260px; position: absolute;left:0;top:0; /*overflow:hidden;*/
}
ul li img{width: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>
css3动画实现旋转木马的更多相关文章
- css3动画第一式--简单翻滚
在w3cschool上面查阅css3的动画语法手册时,发现“css3 动画”栏目首页放了一个翻滚的div动画案例,觉得挺好看的,于是就自己模仿着写了一下,感觉还行O(∩_∩)O哈哈~ 查看原地址 下面 ...
- CSS3动画制作
CSS3动画制作 rotate 绕中心旋转 fadeInPendingFadeOutUp 先渐现,停留2s,再向上滑动并逐渐消失 fadeInUp2D 向上滑动并渐现, 因Animate.css的fa ...
- 学习CSS3动画（animation）
CSS3就是出了不少高大上的功能,3D效果.动画.多列等等.今天写篇文章记录怎么一下怎么用CSS3写一个动画. 丑话还得说前头,IE9以及以下版本不支持CSS3动画(如真要实现可以考虑用js,不过估计 ...
- 用CSS3动画，让页面动起来
以前就听说过有个库,叫animate.css,但是自己并没有在实际项目中使用过,这次正好要做个招聘页面,得以利用一下这个库,在经常会卡顿的UC浏览器中也能流畅执行. 扫描下面的二维码,可以看到在线的d ...
- CSS3动画几个平时没注意的属性
一.timing-function: steps() 一开始在使用CSS3的时候并没有太注意这个timing-function,只是注意到自定义贝塞尔曲线. 1)一个项目中的实例 先来看看左边加了st ...
- 用CSS3动画特效实现弹窗效果
提示:如果大家觉得本篇实现的弹窗效果有用,可持续关注.接下会添加更多效果并且封装成插件,这样使用就方便了.效果查看: https://heavis.github.io/hidialog/index.h ...
- JavaScript - 基于CSS3动画的实现
在痛苦的IE8时代,所有的动画都只能基于自己计算相关动画属性,开定时器setTimeout/setInterval轮询动画任务. 而肩负重任的HTML5,早已注意到了日益增强的动画,随着HTML5的降 ...
- CSS3动画事件
CSS3 的动画效果强大,在移动端使用广泛,动画执行开始和结束都可以使用JS来监听其事件. animationstart animationend 以下是一个示例 <!DOCTYPE html& ...
- css3动画简介以及动画库animate.css的使用
在这个年代,你要是不懂一点点css3的知识,你都不好意思说你是个美工.美你妹啊,请叫我前端工程师好不好.呃..好吧,攻城尸...呵呵,作为一个攻城尸,没有点高端大气上档次的东西怎么能行呢,那么css3 ...
随机推荐
- ASP.NET Core Razor 页面使用指南
ASP.NET Core Razor 页面作为 ASP.NET Core 2.0的一部分发布,它是基于页面的全新的Web开发框架.如果您想学习如何使用 ASP.NET Core Razor 页面,可以 ...
- PHP中的错误处理机制
常见的三种错误: 1.Notice :通知性错误,最小的错误,当发生通知性错误时,会弹出一个提示信息.不会中断代码的执行. 错误代码: #例如Notice: 2.Warning:警告性错误,当发生警告 ...
- MarkDown 编辑数学公式
1. 参考博客:http://blog.csdn.net/smstong/article/details/44340637 1 数学公式的web解决方案 在网页上显示漂亮的数学公式,是多年来数学工作者 ...
- css设置兼容的透明样式
css设置透明并实现兼容: <style>div{ filter: alpha(opacity=80); -moz-opacity: 0.8; -khtml-opacity: 0.8; o ...
- WinServer2012 R2忘记密码的解决方案+远程连接另一种莫名其妙故障
http://www.cnblogs.com/dunitian/p/4822808.html#iis 之前朋友有问道我WinServer2003密码破解的事情,基本上密码忘记了都是进PE用密码清除的工 ...
- yml 文件操作方法
文件读取方法示例: import yaml fr = open('yml_file_address', 'r',encoding='utf-8') data = yaml.load(fr) print ...
- 新手最纠结的事。学什么语言最好？学什么语言有前途（or 钱途）？
这篇文章是转载自王根的博客,源地址:http://www.yinwang.org/blog-cn/2017/07/06/master-pl ,虽然王根是一个备受争议的人,不过这篇文章写的很好,我对于编 ...
- ubuntu16.04编译安装mysql-boost-5.7.21并编译成php扩展测试与使用
我之前的文章已经改造了自定义MVC框架中的工具类(验证码,图片上传,图像处理,分类)4个类,接下来,就要改造模型类,模型类肯定要连接数据库,由于我的Ubuntu Linux是裸装的php(目前只编译了 ...
- iOS微信内存监控
WeTest 导读 目前iOS主流的内存监控工具是Instruments的Allocations,但只能用于开发阶段.本文介绍如何实现离线化的内存监控工具,用于App上线后发现内存问题. FOOM(F ...
- lnmp HTTP ERROR 500
http://www.cnblogs.com/thrillerz/p/4725409.html