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

来源:http://www.cnblogs.com/jihua/archive/2016/12/23/css3qiehuan.html
-Advertisement-
Play Games

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


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

-Advertisement-
Play Games
更多相關文章
  • 浮動與清除浮動
    浮動與清除浮動 一、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 ...
一周排行
    -Advertisement-
    Play Games
  • WPF 已知問題 監聽 WMI 事件導致觸摸失效
    示例項目結構 在 Visual Studio 中創建一個 WinForms 應用程式後，項目結構如下所示： MyWinFormsApp/ │ ├───Properties/ │ └───Settings.settings │ ├───bin/ │ ├───Debug/ │ └───Release/ ...
  • [STAThread]特性
    [STAThread] 特性用於需要與 COM 組件交互的應用程式，尤其是依賴單線程模型（如 Windows Forms 應用程式）的組件。在 STA 模式下，線程擁有自己的消息迴圈，這對於處理用戶界面和某些 COM 組件是必要的。 [STAThread] static void Main(stri ...
  • UWP WinUI3 傳入 AddHandler 的 RoutedEventHandler 類型與事件所需不匹配將拋出參數異常
    在WinForm中使用全局異常捕獲處理 在WinForm應用程式中，全局異常捕獲是確保程式穩定性的關鍵。通過在Program類的Main方法中設置全局異常處理，可以有效地捕獲並處理未預見的異常，從而避免程式崩潰。 註冊全局異常事件 [STAThread] static void Main() { / ...
  • .NET 多版本 WinForm 開源控制項庫 SunnyUI
    前言 給大家推薦一款開源的 Winform 控制項庫，可以幫助我們開發更加美觀、漂亮的 WinForm 界面。 項目介紹 SunnyUI.NET 是一個基於 .NET Framework 4.0+、.NET 6、.NET 7 和 .NET 8 的 WinForm 開源控制項庫，同時也提供了工具類庫、擴展 ...
  • .net core8 使用Swagger（附當前源碼）
    說明 該文章是屬於OverallAuth2.0系列文章，每周更新一篇該系列文章（從0到1完成系統開發）。 該系統文章，我會儘量說的非常詳細，做到不管新手、老手都能看懂。 說明：OverallAuth2.0 是一個簡單、易懂、功能強大的許可權+可視化流程管理系統。 有興趣的朋友，請關註我吧(*^▽^*) ...
  • WPF 什麼時候 VisualTreeHelper.GetDescendantBounds 將返回無窮大
    一、下載安裝 1.下載git 必須先下載並安裝git，再TortoiseGit下載安裝 git安裝參考教程：https://blog.csdn.net/mukes/article/details/115693833 2.TortoiseGit下載與安裝 TortoiseGit，Git客戶端，32/6 ...
  • C# 開源教程帶你輕鬆掌握數據結構與演算法
    前言 在項目開發過程中，理解數據結構和演算法如同掌握蓋房子的秘訣。演算法不僅能幫助我們編寫高效、優質的代碼，還能解決項目中遇到的各種難題。 給大家推薦一個支持C#的開源免費、新手友好的數據結構與演算法入門教程：Hello演算法。 項目介紹 《Hello Algo》是一本開源免費、新手友好的數據結構與演算法入門 ...
  • 第22篇 生成proto文件bat腳本
    1.生成單個Proto.bat內容 @rem Copyright 2016, Google Inc. @rem All rights reserved. @rem @rem Redistribution and use in source and binary forms, with or with ...
  • 記一次 .NET某上位機視覺程式 卡死分析
    一：背景 1. 講故事 前段時間有位朋友找到我，說他的窗體程式在客戶這邊出現了卡死，讓我幫忙看下怎麼回事？dump也生成了，既然有dump了那就上 windbg 分析吧。 二：WinDbg 分析 1. 為什麼會卡死 窗體程式的卡死，入口門檻很低，後續往下分析就不一定了，不管怎麼說先用 !clrsta ...
  • 醫學DICOM文件與PACS系統進行數據傳輸
    前言 人工智慧時代，人臉識別技術已成為安全驗證、身份識別和用戶交互的關鍵工具。 給大家推薦一款.NET 開源提供了強大的人臉識別 API，工具不僅易於集成，還具備高效處理能力。 本文將介紹一款如何利用這些API，為我們的項目添加智能識別的亮點。 項目介紹 GitHub 上擁有 1.2k 星標的 C# ...
所有分類