這個圖片切換動畫只用CSS3實現

-Advertisement-

體驗效果：http://hovertree.com/texiao/css3/39/這是一個使用純CSS3實現的圖文切換效果，沒使用js腳本。點擊左右箭頭或者索圓點引按鈕可以切換內容。本特效中使用到了CSS3的新選擇器 nth-of-type(n)，:nth-of-type(n) 選擇器匹配屬於父元素 ...

體驗效果：
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/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

您的分享是我們最大的動力!

-Advertisement-

更多相關文章

浮動與清除浮動

浮動與清除浮動一、float：主要目的是為了實現文本繞排圖片的效果。也成了創建多欄佈局最簡單的方式。 <img src= “ ” /> <p>文本內容段落內容文本內容段落內容文本內容段落內容文本內容段落內容文本內容段落內容</p> 【1】文本繞排圖片 P {margin: 0; border: ...
JavaScript事件詳解-jQuery的事件實現（三）

正文本文所涉及到的jQuery版本是3.1.1，可以在壓縮包中找到event模塊。該篇算是閱讀筆記，jQuery代碼太長。。。。 Dean Edward的addEvent.js 相對於zepto的event模塊來說，jQuery的event那真是難讀了很多，先從大神Dean Edward的addE ...
JavaScript單元測試框架-Jasmine

Jasmine的開發團隊來自PivotalLabs，他們一開始開發的JavaScript測試框架是JsUnit，來源於著名的JAVA測試框架JUnit。JsUnit是xUnit的JavaScript實現。但是JsUnit在2009年後就已經停止維護了，他們推出了一個新的BDD框架Jasmine。Ja ...
angularjs—指令input

input[text] input一般和ngModel結合使用來實現雙向綁定，同時angular提供了很多表單校驗的指令 required 必填 ngRequired 必填（ngRequired可以控制是否是必填校驗） ngMinlength 最小長度 ngMaxlength 最大長度 patter ...
JQuery操作類數組的工具方法

JQuery學習之操作類數組的工具方法在很多時候，JQuery的$()函數都返回一個類似數據的JQuery對象，例如$(‘div’)將返回div裡面的所有div元素包裝的JQuery對象。在這中情況下，JQuery提供了幾個常用的屬性和方法來操作JQuery對象。 length:該屬性返回JQue ...
前端可視化開發-livereload

在前端開發中，我們會頻繁的修改html、css、js，然後刷新頁面，開效果，再調整，再刷新，不知不覺會浪費掉我們很多時間。有沒有什麼方法，我在編輯器裡面改了代碼以後，只要保存，瀏覽器就能實時刷新。經過不懈的努力，發現了這麼一個工具 livereload。這是一款能根據你本地文件(html、css、j ...
JavaScript進階篇QA總結

Q1:常用的運算符有哪些？他們的優先順序是怎樣的？A1:1.算術運算符：加（+）、減（-）、乘（×）、除（÷），自加一（++），自減一（--）；2.比較運算符：大於（>）、小於（<）、大於等於（>=）、小於等於（<=）；3.邏輯運算符：與（&&）、或（||）、非（！）；優先順序為：算術操作符 > 比較操 ...
旺財速啃H5框架之Bootstrap（二）

突然感覺不知道寫啥子，腦子裡面沒水了，可能是因為今晚要出去浪，哈哈~~~提前提醒大家平安夜要回家哦，聖誕節生00000000000這麼多蛋。。。。繼續上一篇的已經把bootstrap瞭解個大概了，接下來我們就開始學習一下它裡面的東西。瀏覽器支持舊的瀏覽器可能無法很好的支持 Bootstrap ...