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

2018-06-24 00:49:32来源:未知 阅读 ()

新老客户大回馈,云服务器低至5折

体验效果:
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>

相关:

http://hovertree.com/texiao/css3/39/examples/basic.html

http://hovertree.com/texiao/css3/39/examples/dark.html

http://hovertree.com/texiao/css3/39/examples/light.html

源码下载:http://hovertree.com/h/bjaf/er3dmrth.htm

转自:http://hovertree.com/h/bjaf/3ciuqvoq.htm

推荐:http://www.cnblogs.com/jihua/p/webfront.html

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:Bootstrap之栅格系统

下一篇:Bootstrap之字体图标