这个图片切换动画只用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>

这个图片切换动画只用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统一,又要匹配各种不同的手机,然后产品经理还有可能在中途改需求 ...

随机推荐

SQL Server 2014聚集列存储索引
转发请注明引用和原文博客(http://www.cnblogs.com/wenBlog) 简介之前已经写过两篇介绍列存储索引的文章,但是只有非聚集列存储索引,今天再来简单介绍一下聚集的列存储索引,也 ...
[DS] 标记字段
标记字段代码中有时候有这种需求:需要一个公共访问的标记字段,以下称为标记字段. 下面是案例: 一个订单详情页面,如果页面在显示中,程序中其它地方需要访问这个"正在查看中"的订单信 ...
【PRINCE2是什么】PRINCE2认证之七大主题（1）
进入第一个主题,PRINCE2商业论证:PRINCE2指出,商业论证就是进行判断是否值得对项目进行投资,值不值的问题.PRINCE2的商业论证有四个在项目开始时,开发商业论证.在整个项目生命周期中, ...
Android注解使用之使用Support Annotations注解优化代码
前言: 前面学习总结了Java注解的使用,博客地址详见Java学习之注解Annotation实现原理,从本质上了解到什么注解,以及注解怎么使用?不要看见使用注解就想到反射会影响性能之类,今天我们就来学 ...
.NET Core的文件系统[1]：读取并监控文件的变化
ASP.NET Core 具有很多针对文件读取的应用.比如我们倾向于采用JSON文件来定义配置,所以应用就会涉及针对配置文件读取.如果用户发送一个针对物理文件的HTTP请求,应用会根据指定的路径读取目 ...
Angular学习-指令入门
1.指令的定义从用户的角度来看,指令就是在应用的模板中使用的自定义HTML标签.指令可以很简单,也可以很复杂.AngularJS的HTML编译器会解析指令,增强模板的功能.也是组件化未来的发展趋势, ...
微信扫描下载提示以及js判断用户手机系统
今天抽空也写一下这个教程吧,这里面涉及到就是一个APP的页面下载.公司有这个需求,让做一个页面,就是二维码扫描下载.一开始我做的版本是只能是通过浏览器来下载的,但是实际应用中,很多用户 ...
jQuery的DOM操作实例（2）——拖拽效果&&拓展插件
一.原生JavaScript编写拖拽效果二.jQuery编写的拖拽效果三.在jQuery中拓展一个拖拽插件
Notepad2替代系统自带的记事本
事情是这样的,平时我经常把一些文字复制到记事本中编辑好了再复制到目标位置,可以在系统自带的记事本中替换删除一些内容,记事本小巧,占用很少的资源,我很喜欢:但今天复制的内容中有很多数字和一些我不想要的内 ...
Docker到底是什么？为什么它这么火！
转载来自:http://cloud.51cto.com/art/201410/453718.htm 摘要:Docker这种新的容器技术可谓热得发烫,因为有了它,人们就有可能让数量多得多的应用程序在同样 ...

这个图片切换动画只用CSS3实现

这个图片切换动画只用CSS3实现的更多相关文章

随机推荐

热门专题