这个图片切换动画只用CSS3实现
体验效果：
http://hovertree.com/texiao/css3/39/
这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。
本特效中使用到了CSS3的新选择器 nth-of-type(n)，:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素.
n 可以是数字、关键词或公式。参考：http://hovertree.com/h/bjaf/c2c0k0tf.htm
代码中也出现了css的大于号选择器，请参考：http://hovertree.com/h/bjaf/jc2ufc5w.htm
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯CSS3实现图文切换特效 - 何问起</title><base target="_blank" />
<link rel="stylesheet" href="http://hovertree.com/texiao/css3/39/themes/csslider.default.css" />
<style>
* {
margin: 0;
padding: 0;
} ::-webkit-scrollbar {
width: 2px;
background: rgba(255, 255, 255, 0.1);
} ::-webkit-scrollbar-track {
background: none;
} ::-webkit-scrollbar-thumb {
background: rgba(74, 168, 0, 0.6);
} ul, ol {
padding-left: 40px;
} html, body {
height: 100%;
text-align: center;
font: 400 100% 'Raleway', 'Lato';
background-color: #282828;
color: #CCC;
} h1 {
font-weight: 700;
font-size: 310%;
} h2 {
font-weight: 400;
font-size: 120%;
color: #71AD37;
} #hewenqislider {
margin: 20px;
font-family: 'Lato';
} #hewenqislider > ul > li:nth-of-type(3) {
background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg);
} #hewenqislider > input:nth-of-type(3):checked ~ ul #hovertreebg {
width: 80%;
padding: 22px;
-moz-transition: .5s .5s;
-o-transition: .5s .5s;
-webkit-transition: .5s .5s;
transition: .5s .5s;
} #hewenqislider > input:nth-of-type(3):checked ~ ul #hovertreebg div {
-moz-transform: translate(0);
-ms-transform: translate(0);
-o-transform: translate(0);
-webkit-transform: translate(0);
transform: translate(0);
-moz-transition: .5s .9s;
-o-transition: .5s .9s;
-webkit-transition: .5s .9s;
transition: .5s .9s;
} #hovertreebg {
color: #000;
padding: 22px 0;
position: absolute;
left: 0;
top: 16%;
height: 20%;
width: 0;
z-index: 10;
overflow: hidden;
} #hovertreebg:before {
content: '';
position: absolute;
left: -1px;
top: 1px;
height: 100%;
width: 100%;
z-index: -1;
background: url(http://hovertree.com/texiao/css3/39/themes/fruit.jpg) 1px 23%;
-webkit-filter: blur(7px);
} #hovertreebg:after {
content: '';
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
z-index: 20;
background: rgba(0, 0, 0, 0.35);
pointer-events: none;
} #hovertreebg div {
-moz-transform: translate(120%);
-ms-transform: translate(120%);
-o-transform: translate(120%);
-webkit-transform: translate(120%);
transform: translate(120%);
} .scrollable p {
padding: 30px;
text-align: justify;
line-height: 140%;
font-size: 120%;
}
#hewenqislider a{color:greenyellow}
.csslider>ul{width:500px;/*在这里改变宽度 何问起*/}
</style>
</head>
<body> <div style="padding: 1em 0;">
<div id="hewenqislider" class="csslider">
<input type="radio" name="slides" id="slides_1" />
<input type="radio" name="slides" id="slides_2" />
<input type="radio" name="slides" id="slides_3" checked />
<input type="radio" name="slides" id="slides_4" />
<ul>
<li>
<h1>欢迎光临何问起</h1>
<p>CSSlider is lightweight & easy to use slider. No JS - pure CSS.
<br />这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。
<br />
by <a href="http://hovertree.com">何问起</a> <a href="http://hovertree.com/h/bjaf/3ciuqvoq.htm">说明</a>
</p>
</li>
<li>
<a href="http://hovertree.com/texiao/"><img src="http://hovertree.com/texiao/css3/39/themes/stones.jpg" /></a>
</li>
<li>
<div id="hovertreebg">
<div>
<h1>CSS Events</h1>
<p>When slide 3 is reached - play CSS animation! 纯CSS3的图文切换 hovertree.com </p>
</div>
</div>
</li>
<li class="scrollable">
<h1>Lots of text</h1>
<h2>Scrollable one</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit fusce vel sapien elit in malesuada mi,
semper id sollicitudin urna fermentum ut fusce varius nisl ac ipsum gravida vel pretium tellus.
还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。
还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。
还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。
还可以有长文本，会显示滚动条。这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。by 何问起。 </p>
</li>
</ul>
<div class="arrows">
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
</div>
<div class="navigation">
<div>
<label for="slides_1"></label>
<label for="slides_2"></label>
<label for="slides_3"></label>
<label for="slides_4"></label>
</div>
</div>
</div>
</div> <div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. 不支持IE8及以下浏览器。</p>
<p>来源：<a href="http://hovertree.com/" target="_blank">何问起</a></p>
</div>
</body>
</html>
相关：
http://hovertree.com/texiao/css3/39/examples/basic.html
http://hovertree.com/texiao/css3/39/examples/dark.html
http://hovertree.com/texiao/css3/39/examples/light.html
源码下载：http://hovertree.com/h/bjaf/er3dmrth.htm
转自：http://hovertree.com/h/bjaf/3ciuqvoq.htm
推荐：http://www.cnblogs.com/jihua/p/webfront.html
这个图片切换动画只用CSS3实现的更多相关文章
- uwp 图片切换动画
最近在学习安卓,LOL自定义战绩项目近乎停工,而且腾旭把界面全改了,好烦.刚好学习到安卓中的图片切换动画,我就想在LOL项目中实现一个.首先上百度查看一下,妈的,资料少的可怜. 还是自己来吧.自定义控 ...
- JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
- uwp 图片切换动画 使用帧动画
上一篇博客使用了Timer来实现图片的切换,@lindexi_gd讨论了一下性能,我本人其实对性能这一方面不太熟,但我觉得还是有必要考虑一下,那么今天我们使用帧动画开实现以下 新建项目,添加一个But ...
- 3D立方体图片切换动画
在线演示 本地下载
- HTML5移动端图片左右切换动画
插件描述:HTML5移动端图片左右切换动画 小海今天要给大家分享一款很不错的图片左右切换焦点图动画,并且支持移动端触摸滑动.功能上,这款HTML5图片播放器支持鼠标滑动.手机端触摸滑动以及自动播放.外 ...
- 10个超赞的jQuery图片滑块动画
在网站开发过程中,特别是前端开发这块,经常会使用到很多图片滑块动画,也就是一些基于jQuery和HTML5的焦点图插件.本文将为大家收集10个超赞的jQuery图片滑块动画,这些现成的jQuery插件 ...
- Qt编写自定义控件33-图片切换动画
一.前言 在很多看图软件中,切换图片的时候可以带上动画过渡或者切换效果,显得更人性化,其实主要还是炫一些,比如百叶窗.透明度变化.左下角飞入等,无论多少种效果,核心都是围绕QPainter来进行,将各 ...
- css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
- app引导页(背景图片切换加各个页面动画效果)
前言:不知不觉中又加班到了10点半,整个启动页面做了一天多的时间,一共有三个页面,每个页面都有动画效果,动画效果调试起来麻烦,既要跟ios统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...
随机推荐
- 深入理解 Android 之 View 的绘制流程
概述 本篇文章会从源码(基于Android 6.0)角度分析Android中View的绘制流程,侧重于对整体流程的分析,对一些难以理解的点加以重点阐述,目的是把View绘制的整个流程把握好,而对于特定 ...
- NodeJS使用mysql
1.环境准备 手动添加数据库依赖: 在package.json的dependencies中新增, "mysql" : "latest", { "nam ...
- Firefox开发者专版浏览器，Web开发者利器.
2015的11月9日,Firefox迎来了自己的十周岁生日.在庆祝Firefox十周年之际,Mozilla发布了Firefox开发者专版,这是首款专门为开发者打造的浏览器. 浏览器中独特的暗色调设计. ...
- ASP.NET Aries 3.0发布（附带通用API设计及基本教程介绍）
主要更新: 1:升级处理机制(js请求由同步变更为异步) 2:优化前端JS:包括API和配置方式. 3:增加InputDialog功能. 4:增远远程验证功能. 5:优化权限安全机制. 6:增加一次请 ...
- NoSql1 在Linux(CentOS)上安装memcached及使用
前言: 今天是初五,生活基本要从过年的节奏中回归到正常的生活了,所以想想也该想想与工作有关的事情了.我之前在工作中会经常使用memcached和redis,但是自己一直没有时间系统的好好看 ...
- 玩转Windows服务系列——Debug、Release版本的注册和卸载，及其原理
Windows服务Debug版本 注册 Services.exe -regserver 卸载 Services.exe -unregserver Windows服务Release版本 注册 Servi ...
- 关于安装安卓SDK出现无法更新问题时的解决办法
近日,如果安装过安卓的同学可能知道,大家在使用Android SDK升级或者安装SDK的时候,出现了访问Failed to fetch URL http://dl-ssl.google.com/and ...
- Atitit. 提升存储过程与编程语言的可读性解决方案v3 qc25.docx
Atitit. 提升存储过程与编程语言的可读性解决方案v3 qc25.docx 1. 大原则:分解+命名1 1.1. 命名规范1 1.2. 分层.DI和AOP是继OO1 1.3. 运算符可读性一般要比 ...
- z-index--记录七
1.z-index用来控制元素重叠时堆叠顺序. 适用于:已经定位的元素(即position:relative/absolute/fixed). 2.不使用z-index的时候,堆叠顺序如下(从下到上) ...
- mysql大小写敏感与校对规则
大家在使用mysql过程中,可能会遇到类似一下的问题: root@chuck 07:42:00>select * from test where c1 like 'ab%'; +-----+ ...