用animation制作走马灯

先添加元素

<body><div class="box"><ul><li><img src="data:images/1.jpg"/></li><li><img src="data:images/2.jpg"/></li><li><img src="data:images/3.jpg"/></li><li><img src="data:images/4.jpg"/></li><li><img src="data:images/5.jpg"/></li><li><img src="data:images/6.jpg"/></li><li><img src="data:images/7.jpg"/></li><li><img src="data:images/8.jpg"/></li><li><img src="data:images/9.jpg"/></li><li><img src="data:images/10.jpg"/></li><li><img src="data:images/11.jpg"/></li><li><img src="data:images/6.jpg"/></li></ul></div>
</body>
复制代码

先给ul设置preserve-3d，然后通过定位使其呈现如图所示效果

ul{margin: 300px auto;width:133px;height:200px;border:1px solid red;position:relative;transform-style: preserve-3d;  transition: 15s;}
ul li{width:133px;height:200px;list-style: none;position: absolute;}
复制代码

之后给每个li添加偏移旋转，使其位置呈现如图所示效果

ul li:nth-child(1){transform: translateX(55px) rotateY(0) translateZ(345px)}ul li:nth-child(2){transform-origin:center;transform: translateX(55px) rotateY(30deg) translateZ(345px)}ul li:nth-child(3){transform-origin:center;transform: translateX(55px) rotateY(60deg) translateZ(345px)}ul li:nth-child(4){transform-origin:center;transform: translateX(55px) rotateY(90deg) translateZ(345px)}ul li:nth-child(5){transform-origin:center;transform: translateX(55px) rotateY(120deg) translateZ(345px)}ul li:nth-child(6){transform-origin:center;transform: translateX(55px) rotateY(150deg) translateZ(345px)}ul li:nth-child(7){transform-origin:center;transform: translateX(55px) rotateY(180deg) translateZ(345px)}ul li:nth-child(8){transform-origin:center;transform: translateX(55px) rotateY(210deg) translateZ(345px)}ul li:nth-child(9){transform-origin:center;transform: translateX(55px) rotateY(240deg) translateZ(345px)}ul li:nth-child(10){transform-origin:center;transform: translateX(55px) rotateY(270deg) translateZ(345px)}ul li:nth-child(11){transform-origin:center;transform: translateX(55px) rotateY(300deg) translateZ(345px)}ul li:nth-child(12){transform-origin:center;transform: translateX(55px) rotateY(330deg) translateZ(345px)}
复制代码

最后给ul添加hover效果，鼠标滑过时，使其产生动态效果,就是我们想要的了

ul:hover{transform: rotateX(45deg) rotateZ(90deg) rotateY(720deg);transform-origin: center center 0;}
复制代码

转载于:https://juejin.im/post/5d483219f265da03aa2553e1

用animation制作走马灯相关推荐

python matplotlib animation制作世界人口变动动画
python matplotlib animation制作世界人口变动动画主要利用animation 做了个世界人口动画,数据从网上下载的.做成json格式的.读入pandas.没有放数据, 只是弄 ...
CocosCreator中使用Animation制作动画
CocosCreator中使用Animation制作动画大家好,今天给大家分享的是关于如何使用CocosCreator来制作动画效果的经验. 我们知道,一个游戏中不可或缺的元素就是动画,比如小鸟展翅 ...
用Animation制作简单的物体动画
** 用Animation制作简单的物体动画 ** 大家好,今天来记录一下制作简单物体动画的教程. 1.首先打开窗口(Window)-动画(Animation)-动画(Animation) 2.选中需 ...
css3蒲公英飘动效果_CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星先看效果: 下面我们利用CSS3的animation写出这样的动画来,要点就是: 用动画不停改变背景图片位置; 动画高为无限循环; 在页面放三个DIV,首先将他们大小铺满整个窗口 ...
css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
css动画走马灯5秒,css3 transition 和 animation实现走马灯
这段时间在做一个App,H5的开发.页面上有公告以走马灯的形式显示出来. 在开始直接用的marquee标签,后来发现在ios客户端,走马灯移动不够平滑,有抖动现象. 对于有强迫症的我而言是无法忍受的 ...
Unity中利用动画机（Animation) 制作物体的爆炸拆解
主要介绍的是利用动画机系统来制作简单的爆炸拆解动画,并能够通过相应的键盘上的按钮来控制物体的拆分和聚合. 首先,选中你所需要拆解的物体,如果是分散的,你可以先创建一个空物体(Create Empty) ...
每天学一点flash（40）制作走马灯四
在原来的基础上再增加多一个鼠标触发事件,那就是响应点击事件.当我们点击了每一张图片的时候那么我们就可以判断每一张所在连接图片的网址了.代码如下: package { import flash.dis ...
CSS3 Animation制作飘动的浮云和星星效果
带平行视差效果的星星先看效果: 如果下方未出现效果也可前往这里查看 http://sandbox.runjs.cn/show/0lz3sl9y 下面我们利用CSS3的animation写出这样的动画 ...

用animation制作走马灯

用animation制作走马灯相关推荐

最新文章

热门文章