<!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>

css实现图片切换的更多相关文章

  1. Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行

    这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...

  2. CSS学习------之简单图片切换

    最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...

  3. JQuery图片切换动画效果

    由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...

  4. css3全屏背景图片切换特效

    效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...

  5. js鼠标滚轮滚动图片切换效果

    效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...

  6. Html标签之frameset&图片切换

    今天为大家分享一下刚刚总结好的html经验,以备不时之需. 首先介绍一下frameset标签,此标签用于同一页面内切换网页,在大多数网页中都可以看到,因为项目的需要,故而研究一二. frameset标 ...

  7. JS图片切换效果

    源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...

  8. zoeDylan.ImgChange 图片切换插件

    墨芈深夜发布插件——图片切换 附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈 插件]zoeDylan Plugins Code JS (function ($ ...

  9. javascript图片切换

    JavaScript 图片滑动切换效果 作者:cloudgamer 时间: 2009-09-25 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

随机推荐

  1. DAC Usage3：Monitor Data-tier Applications

    If you deploy a DAC to a managed instance of the Database Engine, information about the deployed DAC ...

  2. OpenCASCADE Conic to BSpline Curves-Hyperbola

    OpenCASCADE Conic to BSpline Curves-Hyperbola eryar@163.com Abstract. Rational Bezier Curve can repr ...

  3. Vue.js学习笔记（8）拖放

    小颖在目前负责的项目中,负责给同事提供所需组件,在这期间,我们家大颖姐姐让我 写个拖拽组件,一开始我是用click实现,先将你要拖拽的dom点一下,然后再点你要放的位置,这个dom再通过小颖写的方法, ...

  4. .NET平台开源项目速览(9)软件序列号生成组件SoftwareProtector介绍与使用

    在文章:这些.NET开源项目你知道吗?让.NET开源来得更加猛烈些吧!(第二辑)中,给大家初步介绍了一下Software Protector序列号生成组件.今天就通过一篇简单的文章来预览一下其强大的功 ...

  5. 【重磅开源】Hawk-数据抓取工具：简明教程

    Hawk-数据抓取工具:简明教程 标签(空格分隔): Hawk Hawk: Advanced Crawler& ETL tool written in C#/WPF 1.软件介绍 HAWK是一 ...

  6. tn文本分析语言(四) 实现自然语言计算器

    tn是desert和tan共同开发的一种用于匹配,转写和抽取文本的语言.解释器使用Python实现,代码不超过1000行. github地址:https://github.com/ferventdes ...

  7. swift 中指针的使用UnsafeMutablePointer

    在swift中已经弱化了指针的使用,可以这么使用 let s: NSRange = NSMakeRange(, ) let at = UnsafeMutablePointer<NSRange&g ...

  8. struts2学习笔记--动手搭建环境+第一个helloworld项目

    在Myeclipse中已经内置好了struts2的环境,但是为了更好的理解,这里自己从头搭建一下: 前期准备:下载struts2的完整包,下载地址:https://struts.apache.org/ ...

  9. Front End Developer Questions 前端开发人员问题（二）

    问题来源:http://markyun.github.io/2015/Front-end-Developer-Questions/ 二.CSS 1.介绍一下标准的CSS的盒子模型?与低版本IE的盒子模 ...

  10. js构建ui的统一异常处理方案（三）

    笔者之前分析了如何实现js的责任链异常处理的方法,通过promise这个异步模型,我们能够对同步方法和异步方法的两种情况,均可以实现责任链模式.有了这些武器,我们就可以开始设计ui的统一异常处理方案了 ...