利用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 ...
随机推荐
- linux echo用法和实例
echo命令用于在shell中打印shell变量的值,或者直接输出指定的字符串.linux的echo命令,在shell编程中极为常用, 在终端下打印变量value的时候也是常常用到的,因此有必要了解下 ...
- 二级python考试大纲以及考试指导复习方案
二级python考试大纲与复习指导 本人也是在备考二级py 可能理解不对的地方请指正 参考网络,侵权删除 考纲解读→ 一.考试介绍 1.1考试人群 全国计算机等级考试(python语言程序设计(二 ...
- spring框架中Bean的生命周期
一.Bean 的完整生命周期 在传统的Java应用中,bean的生命周期很简单,使用Java关键字 new 进行Bean 的实例化,然后该Bean 就能够使用了.一旦bean不再被使用,则由Java自 ...
- 手写 Vue 系列 之 Vue1.x
前言 前面我们用 12 篇文章详细讲解了 Vue2 的框架源码.接下来我们就开始手写 Vue 系列,写一个自己的 Vue 框架,用最简单的代码实现 Vue 的核心功能,进一步理解 Vue 核心原理. ...
- Spring Cloud Ribbon 中的 7 种负载均衡策略
负载均衡通器常有两种实现手段,一种是服务端负载均衡器,另一种是客户端负载均衡器,而我们今天的主角 Ribbon 就属于后者--客户端负载均衡器. 服务端负载均衡器的问题是,它提供了更强的流量控制权,但 ...
- php 23种设计模式 - 观察者模式
观察者模式 某个对象可以被设置为是可观察的,只要通过某种方式允许其他对象注册为观察者.每当被观察的对象改变时,会发送信息给观察者. 介绍 意图:定义对象间的一种一对多的依赖关系,当一个对象的状态发生改 ...
- 08 Java的方法 方法的定义
2.方法的定义 Java的方法类似于其他语言的函数,是一段用来完成特定功能的代码片段,一般情况下,定义一个方法包含以下语法: **方法包含一个方法头和一个方法体.**下面是一个方法的所有部分: 修饰符 ...
- ElasticSearch7.3 学习之定制分词器(Analyzer)
1.默认的分词器 关于分词器,前面的博客已经有介绍了,链接:ElasticSearch7.3 学习之倒排索引揭秘及初识分词器(Analyzer).这里就只介绍默认的分词器standard analyz ...
- JavaScript 里的 'this' 的一般解释
本文旨在帮助自己和大家理解 JS 里的 this, 翻译.整理并改写自本人关注的一个博主 Dmitri Pavlutin,原文链接如下: https://dmitripavlutin.com/gent ...
- 多线程笔记(学习尚硅谷java基础教程)
一.基本概念: 程序: 是为完成特定任务.用某种语言编写的一组指令的集合.即指一段静态的代码,静态对象. 进程: 是程序的一次执行过程,或是正在运行的一个程序.是一个动态的过程:有它自身的产生.存在和 ...