<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<title>css3 通过transform属性实现DIV元素的旋转</title>

<style>
#content{width:800px;margin: 30px auto;position: relative;}
input[type="radio"]{display: none;}
input[type="radio"]~img{width: 800px;position: absolute;top:0px;left:0px;opacity: 0;height: 500px;transform:scale(1.1);transition:all 2s;}
input:checked +label + img{opacity: 1;transform:scale(1.0);}
input:checked +label img{border: 8px solid #FFDA34; opacity: 1.0; transition: all 2s;}
label {display: inline-block;width: 134px;margin: 5px 8px;}
label img{ opacity:0.5; width: 134px; margin-top:500px;height: 75px;border:8px solid #000;}
</style>

</head>

<body>

<div class="aimateStyle">

</div>

<div id = "content">
<input type = "radio" name="carousel" id = "list1" checked>
<label for="list1">
<img src="http://p0.meituan.net/deal/d1d4b099f0f6258296f20b4782c479a254150.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D5%26y%3D5%26relative%3D1">
</label>
<img src="http://p0.meituan.net/deal/d1d4b099f0f6258296f20b4782c479a254150.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D5%26y%3D5%26relative%3D1">

<input type = "radio" name="carousel" id = "list2">
<label for="list2">
<img src="http://p1.meituan.net/deal/12cf752971008356d4c77685356aa9e355639.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D5%26y%3D5%26relative%3D1">
</label>
<img src="http://p1.meituan.net/deal/12cf752971008356d4c77685356aa9e355639.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D5%26y%3D5%26relative%3D1">

<input type = "radio" name="carousel" id = "list3">
<label for="list3">
<img src="http://p0.meituan.net/deal/723ef89c388ea1dba03e021291b153e953366.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D5%26y%3D5%26relative%3D1">
</label>
<img src="http://p0.meituan.net/deal/723ef89c388ea1dba03e021291b153e953366.jpg%40450w_280h_1e_1c_1l%7Cwatermark%3D1%26%26r%3D1%26p%3D9%26x%3D5%26y%3D5%26relative%3D1">
</div>

<script type="text/javascript">
window.onload = function(){
var i = 0;
setInterval(function(){
document.getElementsByTagName('input')[i%3].checked = true;
i++;
}, 2500);
}
</script>
</body>

</html>

实现效果静态图

transition实现图片轮播的更多相关文章

  1. css3实践之图片轮播（Transform，Transition和Animation）

    楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...

  2. 原生js+css3实现图片自动切换，图片轮播

    运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...

  3. 图片轮播图插件的使用 unslider！！！

    1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...

  4. css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）

    本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...

  5. 分享jquery实现百叶窗特效的图片轮播

    首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...

  6. HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；

    1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...

  7. CSS3图片轮播效果

    原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...

  8. Angular2组件与指令的小实践——实现一个图片轮播组件

    如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...

  9. JS+html--实现图片轮播

    大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...

随机推荐

  1. 【模式识别与机器学习】——4.3离散K-L变换

    全称:Karhunen-Loeve变换(卡洛南-洛伊变换) 前面讨论的特征选择是在一定准则下,从n个特征中选出k个来反映原有模式. 这种简单删掉某n-k个特征的做法并不十分理想,因为一般来说,原来的n ...

  2. Java—面向对象、类与对象、封装

    理解什么是面向过程.面向对象 面向过程与面向对象都是我们编程中,编写程序的一种思维方式. 面向过程的程序设计方式,是遇到一件事时,思考“我该怎么做”,然后一步步实现的过程. 面向对象的程序设计方式,是 ...

  3. JS学习第三天

    运算符: 赋值运算符 “=” ,将“=”右边的值赋值给左边 比较运算符 “>   <   >=  <=   ==   !=   ===”,  ==比较两边内容是否一致      ...

  4. golang实现 快速排序算法

    快速排序算法原理: b站https://b23.tv/uJqRYN package main import "fmt" //[]int{1,2,3,4,5,6,7,8} func ...

  5. 【POJ3071】Football - 状态压缩+期望 DP

    Description Consider a single-elimination football tournament involving 2n teams, denoted 1, 2, …, 2 ...

  6. Java并发--volatile关键字

    一.volatile的实现原理 synchronized是阻塞式同步,在线程竞争激烈的情况下会升级为重量级锁,而volatile就可以说是JVM提供的最轻量级的同步机制.JMM告诉我们,各个线程会将共 ...

  7. 面试中HashMap链表成环的问题你答出了吗

    HashMap作为老生常谈的问题,备受面试官的青睐,甚至成为了面试必问的问题.由于大量的针对HashMap的解析横空出世,面试官对HashMap的要求越来越高,就像面试官对JVM掌握要求越来越高一样, ...

  8. three.js 制作逻辑转体游戏（下）

    上一篇已经对绕非定轴转动有所了解,这篇郭先生继续说一说逻辑转体游戏的制作,这部分我们同样会遇到一些小问题,首先是根据数据渲染陷阱和目标区域,然后是对可以转动的判定,最后是获胜的判定. 1. 根据数据渲 ...

  9. python基础 Day13

    python Day13 匿名函数(一句话函数,比较简单的函数) func=lambda a,b:a+b print(func(1,2)) ###结果:3 func=lambda a:(a[0],a[ ...

  10. C++ Templates (1.1 初窥函数模板 A First Look at Function Templates)

    返回完整目录 目录 1.1 初窥函数模板 A First Look at Function Templates 1.1.1 定义模板 Defining the Template 1.1.2 使用模板 ...