transition实现图片轮播
<!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实现图片轮播的更多相关文章
- css3实践之图片轮播（Transform，Transition和Animation）
楼主喜欢追求视觉上的享受,虽常以牺牲性能无法兼容为代价却也乐此不疲.本文就通过一个个的demo演示来简单了解下css3下的Transform,Transition和Animation. 本文需要实现效 ...
- 原生js+css3实现图片自动切换，图片轮播
运用CSS3transition及opacity属性 制作图片轮播动画 自己这两天根据用js来控制触发CSS3中transition属性,从而写出来的以CSS3动画为基础,js控制过程的图片轮播 运用 ...
- 图片轮播图插件的使用 unslider！！！
1.百度图片轮播图unslider,第一个就会出现jquery unslider轮播图,点击进去,下载网站提供的文件,解压,内部有我们需要使用的各种js,图片等. 2.在自己的eclipse或者int ...
- css3实践之摩天轮式图片轮播+3D正方体+3D标签云（perspective、transform-style、perspective-origin）
本文主要通过摩天轮式图片轮播的例子来讲解与css3 3D有关的一些属性. demo预览: 摩天轮式图片轮播(貌似没兼容360 最好用chrome) 3D正方体(chrome only) 3D标签云(c ...
- 分享jquery实现百叶窗特效的图片轮播
首先非常感谢网友嘉翼的无私分享,这是他刚在网站扣下来的特效,第一时间与大家分享,jquery实现百叶窗特效的图片轮播 使用方法: 1.引用css文件,css文件里面已经做了注释,基本只需要修改宽高就好 ...
- HTML DOM部分---做竖向横向的下拉导航 下拉菜单 图片轮播（圆点、箭头） 选项卡 进度条；
1,竖向下拉导航 鼠标单击打开 再打击关闭 <style> *{ margin:0px auto; padding:0px;} div{ width:100px; height:50px; ...
- CSS3图片轮播效果
原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且 ...
- Angular2组件与指令的小实践——实现一个图片轮播组件
如果说模块系统是Angular2的灵魂,那其组件体系就是其躯体,在模块的支持下渲染出所有用户直接看得见的东西,一个项目最表层的东西就是组件呈现的视图.而除了直接看的见的躯体之外,一个完整的" ...
- JS+html--实现图片轮播
大家肯定见过某些网站一个炫酷的页面,就是图片轮播,也就是我们常说的幻灯片播放.对于初学者来说,可能会有点头疼,没关系,小李在这给大家献上自己刚刚写好的关于图片轮播的代码. 以下功能的实现用了jQuer ...
随机推荐
- 【小白学AI】XGBoost 推导详解与牛顿法
文章转自公众号[机器学习炼丹术],关注回复"炼丹"即可获得海量免费学习资料哦! 目录 1 作者前言 2 树模型概述 3 XGB vs GBDT 3.1 区别1:自带正则项 3.2 ...
- C#LeetCode刷题之#59-螺旋矩阵 II（Spiral Matrix II）
目录 问题 示例 分析 问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3678 访问. 给定一个正整数 n,生成一 ...
- Vue 内联模板(inline-template)
内联模板不会把子组件的内容分发渲染到父组件中 而是需要在父组件中实现其内容的渲染 父组件 <template> <div> <template-inline inline ...
- ybt1107题解和方法总结
今天花了三个小时的时间刷了些基础题,虽说是简单题,但是有一些还是有点难度的 比如ybt1107,我死嗑了半个小时. [题目描述] 某校大门外长度为L的马路上有一排树,每两棵相邻的树之间的间隔都是1米. ...
- 精讲RestTemplate第9篇-如何通过HTTP Basic Auth认证
本文是精讲RestTemplate第9篇,前篇的blog访问地址如下: 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用 精讲RestTemplate第2篇-多种底层H ...
- 使用Java API进行tar.gz文件及文件夹压缩解压缩
在java(JDK)中我们可以使用ZipOutputStream去创建zip压缩文件,(参考我之前写的文章 使用java API进行zip递归压缩文件夹以及解压 ),也可以使用GZIPOutputSt ...
- CAP 3.1 版本发布通告
前言 今天,我们很高兴宣布 CAP 发布 3.1 版本正式版.同时我们也很高兴的告诉你 CAP 在 GitHub 已经突破了 4000 Star. CAP 3000 Star 还是去年8月份的时候,最 ...
- 搭建vue开发环境的步骤,六步完成
搭建vue开发环境的步骤,其实也挺简单的,之前这环境的配置也困扰着我一:在搭建vue的开发环境之前,一定一定要先下载node.js,vue的运行是要依赖于node的npm的管理工具来实现,下载地址:h ...
- 彻底搞懂https原理
我终于彻底理解了https原理!!!激动之下,写一篇博客,搞一波分享!!! 本篇博客比较精彩的地方: 思维方式:也是借鉴一位大佬的,写得很棒.https://blog.csdn.net/guolin_ ...
- golang学习笔记：Interface类型断言详情
原文链接:https://www.2cto.com/kf/201712/703563.html 1. 用于判断变量类型 demo如下: switch t := var.(type){ case str ...