HTML5+CSS3从入门到精通之只用CSS3实现图片切换动画-职坐标

HTML5+CSS3从入门到精通之只用CSS3实现图片切换动画

沉沙 2019-06-12 来源：阅读 1474 评论 0

摘要：本篇文章探讨了HTML5+CSS3从入门到精通之只用CSS3实现图片切换动画，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

本篇文章探讨了HTML5+CSS3从入门到精通之只用CSS3实现图片切换动画，希望阅读本篇文章以后大家有所收获，帮助大家对相关内容的理解更加深入。

HTML5+CSS3从入门到精通之只用CSS3实现图片切换动画

这是一个使用纯CSS3实现的图文切换效果，没使用js脚本。点击左右箭头或者索圆点引按钮可以切换内容。
本特效中使用到了CSS3的新选择器 nth-of-type(n)，:nth-of-type(n) 选择器匹配属于父元素的特定类型的第 n 个子元素的每个元素.
n 可以是数字、关键词或公式。参考：//hovertree.com/h/bjaf/c2c0k0tf.htm
代码中也出现了css的大于号选择器，请参考：//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="//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(//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(//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">
        <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="//hovertree.com">何问起</a> <a href="//hovertree.com/h/bjaf/3ciuqvoq.htm">说明</a>
                </p>
            </li>
            <li>
                <a href="//hovertree.com/texiao/"><img src="//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>
                <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>
            <label for="slides_1"></label>
            <label for="slides_2"></label>
            <label for="slides_3"></label>
            <label for="slides_4"></label>
        </div>
        <div>
            <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="//hovertree.com/" target="_blank">何问起</a></p>
</div>
</body>
</html>