<!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. 存储系列之 XFS文件系统简介

    引言:磁盘容量越来越大,文件系统管理的文件也是越来越大.越来越多,如何破解?唯有快!于是动态分配.B+树开始登上舞台.还记得当年MySQL的索引结构吗,好的作品所见略同. 一.XFS为什么替换Ext4 ...

  2. 聊聊mysql中的int(1)

    昨天有个读者问了我这样一个问题在mysql中建表的时候,我设置一个字段为int类型,长度为1,但是我发现这个字段却可以存储任意长度的数字,这是什么情况?这个问题在我刚接触数据库的时候也遇到过,我觉得有 ...

  3. 分享一个Flink checkpoint失败的问题和解决办法

    本文来自: PerfMa技术社区 PerfMa(笨马网络)官网 接触Flink一段时间了,遇到了一些问题,其中有一个checkpoint失败导致作业重启的问题,遇到了很多次,重启之后一般也能恢复正常, ...

  4. NOIP真题索引

    NOIP真题索引 NOIP2019 Day 1 格雷码 括号树 树上的数 Day 2 Emiya 家今天的饭 划分 树的重心 NOIP2018 Day 1 铺设道路 货币系统 赛道修建 Day 2 旅 ...

  5. 详解Python Graphql

    前言 很高兴现在接手的项目让我接触到了Python Graphql,百度上对其介绍相对较少也不够全面,几乎没有完整的中文文档,所以这边也借此机会学习一下Graphql. 什么是Graphql呢? Gr ...

  6. try easy pytest 1tep介绍

    『 tep is a testing tool to help you write pytest more easily. Try Easy Pytest! 』 tep前身 tep的前身是接口自动化测 ...

  7. docker入门2-docker service

    docker service介绍 service是生产环境中某个image的container集合.一个service只使用一个image,但它编排这个image的运行方式,比如使用哪个端口,根据需求 ...

  8. JavaScript学习系列博客_31_JavaScript Math 工具类

    Math - Math属于一个工具类,它不需要我们创建对象(例如Date日期对象需要通过构造函数创建对象 var 变量=new Date(),Math不需要),它里边封装了属性运算相关的常量和方法 我 ...

  9. 在KVM主机和虚拟机之间共享目录

    执行以下步骤: (1)在host OS上面创建新的目录和在这个目录里面创建一个文件. root@kvm:~# mkdir /tmp/shared root@kvm:~# touch /tmp/shar ...

  10. ovs 删除流表 指定 actions 中字段

    例: ovs-ofctl del-flows br-int in_port=100,out_group=100 -O openflow13 ovs-ofctl del-flows br-int in_ ...