利用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 ...
随机推荐
- mysql保存emoji表情,utf8mb4保存不了表情的问题
报错信息 : Incorrect string value: '\xF0\x9F\x99\x85\xE2\x80...' for column 'content' at row 1 mysql数据库的 ...
- [递归回溯] LeetCode 504七进制数(摸鱼版)
LeetCode 七进制数 前言: 这个就没什么好说的了 题目:略 步入正题 进位制转换 10 -n 余数加倒叙 没什么好讲的直接上七进制代码 偷个懒 10进位制转7 class Solution { ...
- MATLAB绘制一幅中国地图
今天博主跟大家讲一下如何用MATLAB制作一幅中国地图,那废话不多说,我们先看一下最终效果吧. mercator墨卡托圆柱投影地图 lambert兰伯特圆锥投影地图 一张中国地图大概包括以下要素: 中 ...
- (九)React Ant Design Pro + .Net5 WebApi:后端环境搭建-IdentityServer4-简单配置
一.简介 IdentityServer4 是用于 ASP.NET Core 的 OpenID Connect 和 OAuth 2.0 框架,通过中间件的方式集成.JWT(json web token) ...
- Java基础——final、static关键字
final关键字是最终的意思,可以修饰成员方法.成员变量.类 特点: 1.修饰方法:表示该方法是最终方法,不能被重写 2.修饰变量:表示变量是常量,不能再次被赋值 3.修饰类:表示类是最终类,不能被继 ...
- 模块 序列化模块:json pickle
模块:一个模块就是一个包含了Python定义和声明的文件,文件名就是模块名字加上.py的后缀 模块的形象: 内置模块:安装Python解释器的时候一起安装上的 第三方模块(扩展模块):需要自己安装 自 ...
- 6月6日 python复习 面向对象
1.面向对象编程 1.面向过程编程核心是"过程"二字,过程指的是解决问题的步骤,即先干什么再干什么基于该思想编写程序就好比在编写一条流水线,是一种机械式的思维方式 优点:复杂的问题 ...
- Python 局域网主机存活扫描
#! python # -*- coding: utf-8 -*- __author__ = 'Deen' import os import threading import argparse # 从 ...
- redis的事件处理机制
redis的事件处理机制 redis是单进程,单线程模型,与nginx的多进程不同,与golang的多协程也不同,"工作的工人"那么少,可那么为什么redis能这么快呢? epol ...
- Azure DevOps (六) 通过FTP上传流水线制品到Linux服务器
上一篇我们实现了把流水线的制品保存到azure的流水线制品仓库里去,本篇我们会开始研究azure的发布流水线. 本篇要研究的是把流水线仓库的制品发布到任意一台公网的linux服务器上去,所以我们先研究 ...