<!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. 2020-03-27：分布式锁的问题，假如a线程在获得锁的情况下 网络波动 极端情况是断网了，这种情况是怎么处理的

    福哥答案2020-04-04:超时释放锁.

  2. Vuex mapGetter的基本使用

    getter相当于Vuex中的计算属性 对 state 做处理再返回 mapGetters 把 Store 中的 getters 映射到组件中的计算属性中 Store文件 import Vue fro ...

  3. vue-loader处理vue文件

    loader:"vue-loader" ,引导vue文件被vue-loader/lib/index.js处理 第一步:解析vue文件 const utils = require(' ...

  4. Spring Cloud Config Client 超时与重试

    简介 有时客户端需要在 config server 无响应时进行重试,以给 config server 时间进行恢复.利用 spring 提供的重试组件,我们可以方便的配置重试机制,包括重试间隔,重试 ...

  5. Android 使用AS编译出错：找不到xx/desugar/debug/66.jar (系统找不到指定的文件。)

    以为是合作人配置文件的问题,后发现是缓存的问题,只需要Clean project,即可. 若提示无法删除目录:Unable to delete directory,或许是因为你打开了另一个项目,只需关 ...

  6. Python-Opencv 图像处理基本操作

    Python-Opencv 图像处理基本操作 1.图像读取 使用cv2.imread(filepath,flags)读入图像 filepath: 读入图像完整路径(绝对路径,相对路径) flags: ...

  7. WARNING: The host 'db01' could not be looked up with /data/mysql/bin/resolveip. This probably means that your libc libraries are not 100 % compatible with this binary MySQL version......

    Linux系统安装MySQL,环境参数: 硬件配置:CPU: Xeon(R) CPU E5-2650 v4 @ 2.20GHz 8核内存:16G硬盘:系统盘200GB 数据盘1TB 操作系统CentO ...

  8. latex:公式的上下标

    1.行内公式的上下标 在行间公式中,例如\[\max_{i}\]的排版结果是 而在行内公式中,$max_{i}$的排版结果为 ,如果要使其仍在正下方,可插入字体尺寸档次命令 $\displaystyl ...

  9. 技术揭秘：华为云DLI背后的核心计算引擎

    摘要:介绍隐藏在华为云数据湖探索服务背后的核心计算引擎Spark,玩转DLI,,轻松完成大数据的分析处理. 本文主要给大家介绍隐藏在华为云数据湖探索服务(后文简称DLI)背后的核心计算引擎——Spar ...

  10. [SCOI2013]摩托车交易 题解

    思路分析 为了让交易额尽量大,显然我们需要尽量多地买入.对于每个城市,到达这个城市时携带的黄金受到几个条件的影响:之前卖出的黄金,之前能买入的最多的黄金,前一个城市到当前城市的路径上的最小边权.既然不 ...