HTML連載74-製做無限滾動窗口、3D轉換模塊

時間 2020-03-12

標籤 html 連載製做無限滾動窗口 3d 轉換模塊欄目 HTML 简体版

原文原文鏈接

1、設計一張無限滾動網頁html

這裏面的註釋複習了不少知識都是以前學習了可是可能還有些模糊的地方。git

    <style>

        *{

            padding:0;

            margin:0;

        }

        div{

            width: 600px;

            height: 188px;

            boder:1px solid black;

            margin:100px auto;

            overflow: hidden;/*這裏複習了overflow：hidden的使用方法，表明的是出了div這個邊框的東西都看不到了*/



        }

        ul{

            width: 2000px;

            height: 188px;

            background-color: black;

            animation:move 5s linear infinite;/*動畫名稱 持續時間 速度函數 延遲時間 循環次數  循環樣式*/

        }

        @keyframes move {

            from{

                margin-left:0;

            }

            to{

                margin-left:-1200px;/*這個數字很重要，咱們想要看到無限張圖片連環的話*/

                /*就得多加幾個li的前面的元素，這樣移動起來才能無縫銜接起來*/

            }

        }

        ul li{

            list-style:none;

            width: 300px;

            height: 188px;

            background-color:red;

            border:1px solid black;

            box-sizing:border-box;

            float:left;

        }

        image{

            width: 100%;

            height:100%;



        }

        ul:hover{

            animation-play-state:paused;/*複習了一旦鼠標碰觸圖片的話，就會中止的屬性*/

        }

        ul:hover li{

            /*給沒有選中的圖片添加蒙版,注意蒙版是用於ul標籤的背景顏色的百分比展現來達到的，這裏就是百分之五十的黑色*/

            opacity:0.5;

        }

        ul li:hover{

            opacity:1;/*這個優先級會更高，一是由於這裏是具體指定某個屬性的演示，二是由於咱們就是想讓選中的圖片不會產生蒙版效應*/

        }

.............省略代碼..........

<div>

    <ul>

        <li><img src="image/laptop.jpg" alt=""></li>

        <li><img src="image/play_tennis2.jpg" alt=""></li>

        <li><img src="image/example1.jpg" alt=""></li>

        <li><img src="image/line_left.jpg" alt=""></li>

        <li><img src="image/laptop.jpg" alt=""></li>

        <li><img src="image/play_tennis2.jpg" alt=""></li>

    </ul>

</div>

2、3D轉換模塊github

1.什麼2D和3D?微信

2D就是平面，只有寬度和高度，沒有厚度；3D就是立體，有寬度和高度，還有厚度，默認狀況下全部的元素都是2D展現出來的。函數

2.如何讓某個元素呈現3D形態？學習

和透視（perpective）同樣，想看到某個元素的3D效果，只須要給它的父元素添加一個transform-style屬性，而後設置爲大數據

 

transform-style:persever-3d;

 

    <style>

        *{

            padding:0;

            margin:0;

        }

        .father{

            width: 200px;

            height: 200px;

            background-color: red;

            border:1px solid black;

            margin:100 auto;

            perpective:500px;/*透視效果*/

            transform: rotateY(80deg);

            transform-style:preserve-3d;/*全部的子元素轉換爲3D元素*/

        }

        .son{

            width: 100px;

            height: 100px;

            background-color: yellow;

            border:1px solid black;

            margin:0 auto;

            margin-top:50px;

            transform:rotateY(45deg);

        }

.........省略代碼.......

<div class="father">

    <div class="son"></div>

</div>