<!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. Android总结之json解析（FastJson Gson 对比）

    前言: 最近为了统一项目中使用的框架,发现项目中用到了两种json解析框架,他们就是当今非常主流的json解析框架:google的Gson 和阿里巴巴的FastJson,为了废除其中一个所以来个性能和 ...

  2. Android自定义View 画弧形,文字,并增加动画效果

    一个简单的Android自定义View的demo,画弧形,文字,开启一个多线程更新ui界面,在子线程更新ui是不允许的,但是View提供了方法,让我们来了解下吧. 1.封装一个抽象的View类   B ...

  3. （六）WebGIS中地图瓦片在Canvas上的拼接显示原理

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.前言 在之前的五个章节中,我们在第一章节里介绍了WebGIS的基本 ...

  4. Entity FrameWork 365日系列文章源码研究 （1）

    By KMSFan --  此系列的文章只作为自己的读书笔记,不纳入博客园首页. 总结的知识点: 1.DBContext 类 2.Attribute里的属性(NotNull) 3.DbContext实 ...

  5. 【Android】[转] Android Codec默认profile使用的是Baseline

    关于Android默认Codec使用的Profile找了半天没发现,还是Google的时候发现了开源中国有网友写的这边博客,相关的内容很少,便贴了过来做个笔记. 以下内容转自Android Media ...

  6. 【原创】技术往事：改变世界的TCP/IP协议（珍贵多图、手机慎点）

    1.前言 作为应用层开发人员,接触最多的网络协议通常都是传输层的TCP(与之同处一层的另一个重要协议是UDP协议),但对于IP协议,对于应用程序员来说更多的印象还是IP地址这个东西,再往深一点也就很难 ...

  7. 新浪云SAE使用入门，教你如何发布自己的网站

    新浪云sae是一个免费的web服务器,SAE的Web服务器采用分布式部署的方式,开发者将代码部署到SAE前端机后,会通过同步的方式,将代码部署到SAE所有的Web服务器.相当于在每一台Web服务器上都 ...

  8. MathType应用：批量改变公式格式

    首先要安装好mathtype,一般装好后mathtype会嵌入到word里去(黄色和粉红的部分是今天的主角) 然后可以用带insert开头的选项(黄色部分)添加公式,但是添加公式后可能出现一下情况,即 ...

  9. centos6搭建gitlab

    前言 原来的项目放在公网的gitlab上,处于安全考虑,在内网搭建一套,有图形界面,可以直接从外网git导入进来,使用了一下觉得挺方便,把安装流程记录下来,参考官网:https://gitlab.co ...

  10. 为Linux重新开发MVC,有图有真相

    1.写在前面 就连我们自己开始时也在问自己:我们为什么要开发一套MVC,微软的难道不可用用吗? 一开始的理由很简单.为了更好地跨平台部署;在Linux部署过.NET的人们应该知道, 部署起来是有点繁琐 ...