css实现图片切换

<!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实现图片切换的更多相关文章

Jquery实现图片切换效果（IE,FF,Goole）都可以正常运行
这里先对标签的样式进行设置(我这里只用了3张图片,可以根据自己的情况,添加) <style type="text/css"> /*展示图片切换的div样式*/ #Sho ...
CSS学习------之简单图片切换
最近一直在重温纯CSS,学习的时候真的才发现,css真的博大精深啊! 所以趁着学习的劲头,谢了个最简单的CSS图片切换! 先整理下思路: 首先我希望图片居中间,两边有个切换按钮,点击按钮的时候,可以实 ...
JQuery图片切换动画效果
由于博主我懒,所以页面画的比较粗糙,但是没关系,因为我主要讲的是如何实现图片动画切换. 思路:想必大家都逛过淘宝或者其他的一些网站,一般都会有图片动画切换的效果,那是怎样实现的呢?博主我呢,技术不是很 ...
css3全屏背景图片切换特效
效果体验:http://hovertree.com/texiao/css3/10/ 一般做图片切换效果,都会使用JS或者jQuery脚本,今天发现,其实只用CSS也可以实现.试试效果吧. 效果图: 代 ...
js鼠标滚轮滚动图片切换效果
效果体验网址:http://keleyi.com/keleyi/phtml/image/12.htm HTML文件代码: <!DOCTYPE html PUBLIC "-//W3C// ...
Html标签之frameset&图片切换
今天为大家分享一下刚刚总结好的html经验,以备不时之需. 首先介绍一下frameset标签,此标签用于同一页面内切换网页,在大多数网页中都可以看到,因为项目的需要,故而研究一二. frameset标 ...
JS图片切换效果
源地址:http://www.codefans.net/jscss/code/4699.shtml <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
zoeDylan.ImgChange 图片切换插件
墨芈深夜发布插件——图片切换附上下载地址:http://pan.baidu.com/s/17kKF3共享天地/[墨芈插件]zoeDylan Plugins Code JS (function ($ ...
javascript图片切换
JavaScript 图片滑动切换效果作者:cloudgamer 时间: 2009-09-25 文档类型:原创来自:蓝色理想第 1 页 JavaScript 图片滑动切换效果 [1] 第 2 页 ...

随机推荐

angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testServe
angular.js:13920 Error: [$injector:unpr] Unknown provider: $scopeProvider <- $scope <- testSer ...
C语言的标准输入输出
1. 标准输入输出标准输入.输出主要由缓冲区和操作方法两部分组.缓冲区实际上可以看做内存中的字符串数组,而操作方法主要是指printf.scanf.puts.gets,getcha.putcahr等 ...
谈谈php里的IOC控制反转，DI依赖注入
理论发现问题在深入细节之前,需要确保我们理解"IOC控制反转"和"DI依赖注入"是什么,能够解决什么问题,这些在维基百科中有非常清晰的说明. 控制反转(In ...
【Win 10应用开发】如何知道UAP在哪个平台上运行
面向22世纪的现代化应用程序可以同时在多种设备上运行,于是有朋友会有一个疑问:有时候,我们还真的需要判断一下,UAP应用程序在哪个平台上运行.尽管大多情况下我们不必要这样做,但某些特殊情况还得考虑.比 ...
【求助】WPF 在XP下有的Textbox光标会消失
最近做个项目,一直有一个问题没有解决,就是在XP下,有的Textbox里在文本框里没有东西的时候,会没有光标.不同的XP机器,失去光标的Textbox也不一样. 各位大师看下面的三张图,当Textbo ...
JavaScript 开发技巧 || 返回有效值
<script type="text/javascript">var objOne = undefined || "" || null || 1 | ...
深入理解CSS Media媒体查询
× 目录 [1]媒介类型 [2]媒体属性 [3]语法[4]方法前面的话一说到响应式设计,肯定离不开媒体查询media.一般认为媒体查询是CSS3的新增内容,实际上CSS2已经存在了,CSS3新增了 ...
【原创】开源Math.NET基础数学类库使用(12)C#随机数扩展方法
本博客所有文章分类的总目录:[总目录]本博客博文总目录-实时更新开源Math.NET基础数学类库使用总目录:[目录]开源Math.NET基础数学类库使用总目录前言 ...
Ubuntu杂记——Ubuntu下以USB方式连接Android手机调试
在Ubuntu下进行Android开发,发现自己的手机就算打开USB连接.USB调试还是连不上,一直都是显示??????.百度了很多,发现都是要改“ /etc/udev/rules.d/50-andr ...
Apple的LZF算法解析
有关LZF算法的相关解析文档比较少,但是Apple对LZF的开源,可以让我们对该算法进行一个简单的解析.LZFSE 基于 Lempel-Ziv ,并使用了有限状态熵编码.LZF采用类似lz77和lzs ...

css实现图片切换

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

随机推荐

热门专题