利用css3渐变效果实现圆环旋转效果
* {
margin: 0;
padding: 0;
} .stage {
width: 200px;
height: 130px;
margin: 100px auto;
position: relative;
perspective: 1300px;
perspective-origin: 100px -400px;
} .stage ul {
list-style: none;
width: 100%;
height: 100%;
} img {
backface-visibility: hidden;
} #ring {
width: 200px;
height: 130px;
position: absolute;
top: 0;
/*transform: rotateY(0deg);*/
left: 0;
transform-style: preserve-3d;
transition: all 1s ease 0s;
} .stage ul li {
position: absolute;
top: 0;
left: 0;
/*transform-origin: 30% 50%;*/
} .stage ul li:nth-of-type(1) {
transform: rotateY(0deg) translateZ(308px);
} .stage ul li:nth-of-type(2) {
transform: rotateY(36deg) translateZ(308px);
} .stage ul li:nth-of-type(3) {
transform: rotateY(72deg) translateZ(308px);
} .stage ul li:nth-of-type(4) {
transform: rotateY(108deg) translateZ(308px);
} .stage ul li:nth-of-type(5) {
transform: rotateY(144deg) translateZ(308px);
} .stage ul li:nth-of-type(6) {
transform: rotateY(180deg) translateZ(308px);
} .stage ul li:nth-of-type(7) {
transform: rotateY(216deg) translateZ(308px);
} .stage ul li:nth-of-type(8) {
transform: rotateY(252deg) translateZ(308px);
} .stage ul li:nth-of-type(9) {
transform: rotateY(288deg) translateZ(308px);
} .stage ul li:nth-of-type(10) {
transform: rotateY(324deg) translateZ(308px);
} h2 {
position: absolute;
z-index: 10;
opacity: 0.8;
color: hotpink;
}
window.onload = function() {
var ring = document.getElementById('ring');
var lis = ring.getElementsByTagName('li'); for (var i = 0; i < lis.length; i++) {
lis[i].idx = i;
lis[i].onclick = function() {
ring.style.transform = 'rotateY(-' + (this.idx * 36) + 'deg)';
}
}
}
<div class="stage">
<h2>点我我到最前面</h2>
<ul id="ring"> <li><img src="data:images/88/1.jpg" alt=""></li>
<li><img src="data:images/88/2.jpg" alt=""></li>
<li><img src="data:images/88/3.jpg" alt=""></li>
<li><img src="data:images/88/4.jpg" alt=""></li>
<li><img src="data:images/88/5.jpg" alt=""></li>
<li><img src="data:images/88/10.jpg" alt=""></li>
<li><img src="data:images/88/6.jpg" alt=""></li>
<li><img src="data:images/88/7.jpg" alt=""></li>
<li><img src="data:images/88/8.jpg" alt=""></li>
<li><img src="data:images/88/9.jpg" alt=""></li>
</ul>
</div>
图片的选择需要选择400*400的图片
利用css3渐变效果实现圆环旋转效果的更多相关文章
- 利用CSS3实现图片无间断轮播图的实现思路
前言:图片轮播效果现在在各大网站都是非常普遍的,以前我们都是通过postion的left or right来控制dom的移动,这里我要说的是利用css3来制作轮播!相比以前通过postion来移动do ...
- 利用CSS3实现页面淡入动画特效
利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性,实现页面淡入特效,在火狐24版.chrom ...
- 纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果
原文:纯代码利用CSS3 圆角边框和盒子阴影 制作 iphone 手机效果 大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事 ...
- CSS3 渐变效果
CSS3 渐变效果 background-image: -moz-linear-gradient(top, #8fa1ff, #3757fa); /* Firefox */ background-im ...
- 利用CSS3 filter:drop-shadow实现纯CSS改变图片颜色
体验更优排版请移步原文:http://blog.kwin.wang/programming/css3-filter-drop-shadow-change-color.html 之前做项目过程中有时候遇 ...
- 利用css3的text-shadow属性实现文字阴影乳白效果
现在CSS3+html5的网页应用的越来越广泛了.很多网页中的字体同样可以用CSS3来实现炫酷的效果. 下面就介绍一下利用css3的text-shadow属性实现文字阴影乳白效果.这是在设计达人上面看 ...
- 利用CSS3制作淡入淡出动画效果
CSS3新增动画属性“@-webkit-keyframes”,从字面就可以看出其含义——关键帧,这与Flash中的含义一致. 利用CSS3制作动画效果其原理与Flash一样,我们需要定义关键帧处的状态 ...
- 利用CSS3实现div页面淡入动画特效
利用CSS3实现页面淡入动画特效 摘要 利用CSS3动画属性"@keyframes "可实现一些动态特效,具体语法和参数可以网上自行学习.这篇文章主要是实践应用一下这个动画属性 ...
- CSS3渐变效果工具
推荐一个css3渐变效果工具,觉得有帮助的可以收藏下. 工具链接 CSS3 渐变(gradients)可以让你在两个或多个指定的颜色之间显示平稳的过渡.CSS3 定义了两种类型的渐变(gradient ...
随机推荐
- Kotlin笔记小结(For Java Developer)
这篇文章为kotlin学习记录,主要针对的是自己的知识盲区,不适用于新手. 文中所有demo均来自于kotlin官网 类型 整形 Type Size (bits) Min value Max valu ...
- ArcMap操作随记(10)
1.基于点生成辐射线 [缓冲区]→[构造视线] 2.求算点集中于剩余点距离总和最小的点 [构造视线]→[计算几何]→[汇总] 3.关于空间参考,关于投影 ①横轴墨卡托投影 "等角横轴切圆柱投 ...
- linux 常用命令:
查看启动进程命令 ps -ef | grep donet 1.vi 进入编辑界面 2.ls,ll 查看命令 3.cd 进入命令 4.i 进入插入界面 5. esc 退出编辑界面 6.输入:冒号,进入 ...
- 常用的dos指令
•常用的DOS指令 dir:列出当前目录下的文件及文件夹 md:创建文件 rd:删除文件 cd:进入指定目录 cd..:退回到上一级目录 cd\:退回到根目录 del:删除文件 exi ...
- JavaWeb 07_创建web项目连接MySQL实现注册登录功能
一.创建一个web项目,参照JW/01_创建web项目及部署 二.在NAVICat 里建数据库 db_01,建表tb_user ,字段UName .Pwd 三.在web下创建一个Directory, ...
- ansible 一 简介和部署
一.Ansible的介绍 Ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric)的优点.实现了批量系统配置 ...
- 【文件系统】dumpe2fs命令
dumpe2fs - dump ext2/ext3/ext4 filesystem information dumpe2fs prints the super block and blocks gro ...
- ShardingSphere-Proxy(一)
1.现实中的问题 我们知道数据库的数据,基本80%的业务是查询,20%的业务涵盖了增删改,经过长期的业务变更和积累数据库的数据到达了一定的数量之后,直接影响的是用户与系统的交互,查询时的速度,插入数据 ...
- Python的类和继承
一.类的封装: 封装将类的信息隐藏在类内部,不允许外部直接修改该类的变量,只能通过该类提供的方法来实现对隐藏信息的操作和访问 class Boss(): # 类的公共属性 level=1 # 类的初始 ...
- 转载:STL四种智能指针
转载至:https://blog.csdn.net/K346K346/article/details/81478223 STL一共给我们提供了四种智能指针: auto_ptr.unique_ptr.s ...