<!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. C#LeetCode刷题之#771-宝石与石头（Jewels and Stones）

    问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3812 访问. 给定字符串J 代表石头中宝石的类型,和字符串 S代 ...

  2. stat 命令家族（3）- 详解 mpstat

    性能测试必备的 Linux 命令系列,可以看下面链接的文章哦 https://www.cnblogs.com/poloyy/category/1819490.html 介绍 输出 CPU 相关信息 m ...

  3. centos go 安装 使用

    #goland 确保能ping通百度[root@z my_project]# vi /etc/resolv.conf# Generated by NetworkManagersearch locald ...

  4. SpringMVC4——视图、视图解析器、国际化

    视图.视图解析器.国际化 视图的顶级接口:View 视图解析器:ViewResolver   常见的视图和解析器: InternalResourceView.InternalResourceViewR ...

  5. Go 编译器内部知识：向 Go 添加新语句-第 2 部分

    这是探讨 Go 编译器两篇文章的最后一篇.在第 1 部分中,我们通过构建自定义的编译器,向 Go 语言添加了一条新语句.为此,我们按照此图介绍了编译器的前五个阶段: 在"rewrite AS ...

  6. Centos7第一安装后无法联网

  7. SpringMVC关于拦截器的使用

    这个是基于之前的视图定位进行的. @ 目录 拦截器类:IndexInterceptor 配置拦截器 修改 index.jsp 效果 拦截器类:IndexInterceptor package inte ...

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

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

  9. C++ 7种排序方法代码合集

    class Solution { public: /******************************************************************** 直接插入排 ...

  10. Java中动态规则的实现方式

    背景 业务系统在应用过程中,有时候要处理“经常变化”的部分,这部分需求可能是“业务规则”,也可能是“不同的数据处理逻辑”,这部分动态规则的问题,往往需要可配置,并对性能和实时性有一定要求. Java不 ...