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

随机推荐

MemoryMappedFile 在 Mono in Linux 的开发笔记
前言 MemoryMappedFile(简称MMF)类是.NET中对内存映射文件进行操作的类,内存映射文件是非常高效的本地IO方案,由操作系统提供内存与IO文件之间的映射转换,对内存映射文件的更改由操 ...
那些年黑了你的微软BUG
本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 前言炎炎夏日,朗朗乾坤,30℃ 的北京,你还在 Coding 吗? 整个 7 月都在忙项目,还加了 ...
Linex 配置php服务器
此文是可以参考楼主也不是系统管理员只是迫不得已所以自己才找的大家可以参考 .... ..... 安装apache 安装mysql 安装PHP 测试服务器 php -v 查询php的版本就这些了 ...
Atitit onvif 协议截图 getSnapshotUri 使用java
Atitit onvif 协议截图 getSnapshotUri 使用java 1.1. ONVIF Device Test Tool1 1.2. 源码2 1.3. 直接浏览器访问http://192 ...
[CentOs7]搭建ftp服务器(2)——添加用户
摘要上篇文章完成了ftp服务器的安装与匿名访问的内容,当然出于安全的考虑是不允许匿名访问服务器的,所以就有了本篇的内容 ,为ftp服务器添加用户,用改用户进行访问. vsftpd添加用户 FTP用户 ...
【WCF】为终结点地址应用地址头
记得不久前,老周写过博文,探讨过在ContextScope以一定的范内向发出的消息中插入消息头,scope只能为特定的某一次服务操作的调用而添加SOAP头,要是需要在每次调用操作协定的时候都插上Hea ...
Logstash时区、时间转换，message重组
适用场景获取日志本身时间日志时间转Unix时间重组message 示例日志: hellow@,@world@,@2011-11-01 18:46:43 logstash 配置文件: input{ ...
git命令分类图
Android okHttp网络请求之Json解析
前言: 前面两篇文章介绍了基于okHttp的post.get请求,以及文件的上传下载,今天主要介绍一下如何和Json解析一起使用?如何才能提高开发效率? okHttp相关文章地址: Android o ...
初步认识Node 之Web框架
上一篇我们认识了Node是什么之后,这一篇我们主要了解的就是它的框架了.而它的框架又分为两大类,Web框架和全栈框架,接下来我们一个一个的来了解. Web框架 Web框架可以细分为Web应用程序 ...

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

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

随机推荐

热门专题