前端html+css筆記（下）

斜切的導航

圖示

    <style>
        * {margin: 0;padding: 0;}
        ul{list-style: none;}
        ul{width: 430px;margin: 30px auto;overflow: hidden;}
        /* li容器傾斜30deg */
        ul li{float: left;width: 100px;height: 30px;background: red;color: white;line-height: 30px;text-align: center;margin: 0 5px;transform: skewX(-30deg);}

        /* ul li.active{background: blue;} */
        /* 包括文字的span再傾斜回來 */
        ul li span{transform: skewX(30deg);display: block;}
        /* 左側和右側都做成直角 */
        /* 把容器變大一點,斜角就被擠出去了 */
        ul li:first-child{padding-left: 10px;margin-left: -10px;}
        ul li:last-child{padding-right: 10px;margin-right: -10px;}
    </style>

<body>
    <div>
        <ul>
            <li><span>首頁</span></li>
            <li><span>關于我們</span></li>
            <li><span>聯系方式</span></li>
            <li><span>招聘信息</span></li>
        </ul>
    </div>
</body>

變形的列表


    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        .list{width: 250px;}
        .list li{height: 97px;border-bottom: 1px #d0d6d9 dashed;overflow: hidden;}
        .list li:last-child{border-bottom: none;}
        .list .list_photo{float: left;width: 112px;height: 77px;margin: 10px 9px 0 5px;position: relative;}
        .list .list_photo .list_photo_box{width: 92px;height: 57px;border: 1px white solid;position: absolute;left: 9px;top: 9px;transform: translate(0,-60px) rotate(-90deg);transition: 1s;transform-origin: 0 0;}
        .list .list_photo .list_photo_text{width: 100%; position: relative;color: white;text-align: center;bottom: 15px;font-size: 14px;transform: translate(0,100px);transition: 1s;}

        .list .list_photo .img{width: 100%;}
        .list .list_text{float: left;width: 114px;font-size: 12px;line-height: 21px;margin-top :10px ;}

        .list li:hover .list_photo_box{transform: translate(0,0) rotate(0);}
        .list li:hover .list_photo_text{transform: translate(0,0) rotate(0);}
    </style>

<body>
    <ul class="list">
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
        <li>
            <div class="list_photo">
                <img src="../img/娜扎1.jpg" alt="">
                <div class="list_photo_box"></div>
                <div class="list_photo_text">陌陌上市</div>
            </div>
            <div class="list_text">
                <p>測試文字</p>
            </div>
        </li>
    </ul>
</body>

animation動畫(上)

animation-name：設置動畫的名字（自定義的）
animation-duration：動畫的持續時間
animation-delay：動畫的延遲時間
animation-iteration-count：動畫的重復次數，默認值就是1，infinite無限次數
animation-timing-function：動畫的運動形式

注：

運動結束后，默認情況下會停留在起始位置.
@keyframes：from——0，to——100%

    <style>
        .box1{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;}
        /* .box2{width: 100px;height: 100px;background: red;animation-name: myBox;animation-duration: 4s;animation-delay: 2s;animation-iteration-count: 3;animation-timing-function: linear;} */
        
        .box2{width: 100px;height: 100px;background: red;animation: myBox 4s 2s infinite linear;}

        /* @keyframes myBox{
            from{transform: translate(0,0);}
            to{transform:translate(200px,0);}
        } */
        @keyframes myBox{
            0%{transform: translate(0,0);}
            25%{transform: translate(200px,0);}
            50%{transform: translate(200px,200px);}
            75%{transform: translate(0,200px);}
            100%{transform:translate(0,0);}
        }
    </style>

<body>
    <div class="box1">  
        <div class="box2">

        </div>
    </div>
</body>

劃入劃出的小圖標

    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        ul{width: 150px;margin: 30px auto;}
        ul li{float: left;width: 50px;height: 50px;}
        ul li img{position: absolute;left: 50%;top: 50%;margin: -10px 0 0 --11px;}
        ul li:hover img{animation: move .5s ;}

        @keyframes move{
            0%{transform: translate(0,0);opacity:1 ;}
            60%{transform: translate(0,-50px);opacity: 0;}
            61%{transform: translate(0,30px);}
            100%{transform:translate(0,0) ;opacity: 1;}
        }
    </style>
<body>
    <ul>
        <li>
            <img src="./img/1.png" alt="">
        </li>
        <li>
            <img src="./img/2.png" alt="">
        </li>
        <li>
            <img src="./img/3.png" alt="">
        </li>
    </ul>
</body>

loading加載動畫效果

    <style>
        .loading{width: 40px;height: 40px;margin: 30px auto;position: relative;}
        .loading .box1,.loading .box2{width: 100%;height: 100%; position:absolute;}
        .loading .box2{transform: rotate(45deg);}
        .loading .box1 div,.loading .box2 div{width: 10px;height: 10px;background: blue;border-radius: 50%; position:absolute;animation: loadingMove 1.5s infinite linear;}
        .loading .box1 div:nth-child(1),.loading .box2 div:nth-child(1){left:0;top: 0;}
        .loading .box1 div:nth-child(2),.loading .box2 div:nth-child(2){right:0;top: 0;}
        .loading .box1 div:nth-child(3),.loading .box2 div:nth-child(3){right:0;bottom: 0;}
        .loading .box1 div:nth-child(4),.loading .box2 div:nth-child(4){left:0;bottom: 0;}

        @keyframes loadingMove{
            0%{transform: scale(1);}
            50%{transform: scale(0);}
            100%{transform: scale(1);}
        }

        .loading .box1 div:nth-child(1){animation-delay: -0;}
        .loading .box2 div:nth-child(1){animation-delay: -0.2s;}
        .loading .box1 div:nth-child(2){animation-delay: -0.4s;}
        .loading .box2 div:nth-child(2){animation-delay: -0.6s;}
        .loading .box1 div:nth-child(3){animation-delay: -0.8s;}
        .loading .box2 div:nth-child(3){animation-delay: -1s;}
        .loading .box1 div:nth-child(4){animation-delay: -1.2s;}
        .loading .box2 div:nth-child(4){animation-delay: -1.4s;}

    </style>

<body>
    <div class="loading">
        <div class="box1">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
        <div class="box2">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>

animation動畫(下)

animation-fill-mode：規定動畫之前或之后，其動畫效果是否可見。

none（默認值）：在運動結束之后回到初始位置，在延遲的情況下，讓0%在延遲后生效
backwards：在延遲的情況下，讓0%在延遲前生效
forwards：在運動結束之后，停到結束位置
both：backwards和forwards同時生效

    <style>
        .box1,.box2,.box3,.box4{width: 100px;height: 100px;background: red;margin: 5px;}
        .box1{animation: 2s move 2s;}
        .box2{animation: 2s move 2s;animation-fill-mode: backwards;}
        .box3{animation: 2s move 2s;animation-fill-mode: forwards;}
        .box4{animation: 2s move 2s;animation-fill-mode: both;}

        @keyframes move{
            0%{transform: translate(0,0);background: blue;}
            100%{transform: translate(300px,0);}
        }
    </style>
<body>
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
</body>

animatiom-direction：屬性定義是否應該輪流反向播放動畫。

alternate：一次正向（0%_{100%），一次反向（100%}0%）
reverse永遠都是反向，從100%~0%
normal（默認值）：永遠都是正向，從0%~100%

_animate.css動畫庫

一款強大的預設CSS3動畫庫

基本使用：

animated:基類（基礎的樣式，每個動畫效果都需要加）
infinite：動畫的無限次數

transform3D相關屬性

transform:

rotateX():正值向上翻轉
rotateY():正值向右翻轉
translateZ():正值向前、負值向后
scaleZ():立體元素的厚度

3d寫法：

scale3d：三個值 x y z
translate3d：三個值 x y z
rotate3d：四個值 0|1（x軸是否添加旋轉角度） 0|1

perspective(景深)：離屏幕多遠的距離去觀察元素，值越大幅度越小。
perspective-origin：景深-基點位置，觀察元素的角度。(center center -50px),Z軸只能寫數值，不能寫單詞
transform-origin：x y z
transform-style：3D空間（默認值2d：flat；3d：preserve-3d）
backface-visibility：背面隱藏（hidden；visiable（默認值））

實現3d立方體

    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        .box{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;perspective: 200px;}
        .box ul{width: 100px;height: 100px;margin: 100px;position: relative;transform-style: preserve-3d;transition: 2s;transform-origin: center center -50px;}
        .box ul li {width: 100px;height: 100px;position: absolute;line-height: 100px;text-align: center;color: white;font-size: 26px;}

        .box ul li:nth-child(1){background: red;left: 0;top: 0;}
        .box ul li:nth-child(2){background: blue;left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}
        .box ul li:nth-child(3){background: yellow;left: -100px;top: 0;transform-origin: right;transform: rotateY(-90deg);}
        .box ul li:nth-child(4){background: green;left:0;top: -100px;transform-origin: bottom;transform: rotateX(90deg);}
        .box ul li:nth-child(5){background: pink;left: 0;top: 100px;transform-origin: top;transform: rotateX(-90deg);}
        .box ul li:nth-child(6){background: grey;left: 0;top: 0px;transform :translateZ(-100px)rotateY(180deg);}


        .box:hover ul{transform: rotateY(180deg);}
    </style>

<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>

立方體擴展

    <style>
        *{margin:0;padding: 0;}
        ul{list-style: none;}
        .box{width: 300px;height: 300px;border: 1px black solid;margin: 30px auto;perspective: 200px;perspective-origin: top right;}
        .box ul{width: 100px;height: 100px;margin: 100px;position: relative;transform-style: preserve-3d;transition: 2s;transform-origin: center center -50px;
        /* transform: scaleZ(2); */
        /* transform: scale3d(1,1,1); */
        /* transform: translate3d(100px,100px,100px); */
        transform: rotate3d(1,1,1,30deg);
        }
        .box ul li {width: 100px;height: 100px;position: absolute;line-height: 100px;text-align: center;color: white;font-size: 26px;opacity: 0.5;backface-visibility: hidden;}

        .box ul li:nth-child(1){background: red;left: 0;top: 0;}
        .box ul li:nth-child(2){background: blue;left: 100px;top: 0;transform-origin: left;transform: rotateY(90deg);}
        .box ul li:nth-child(3){background: yellow;left: -100px;top: 0;transform-origin: right;transform: rotateY(-90deg);}
        .box ul li:nth-child(4){background: green;left:0;top: -100px;transform-origin: bottom;transform: rotateX(90deg);}
        .box ul li:nth-child(5){background: pink;left: 0;top: 100px;transform-origin: top;transform: rotateX(-90deg);}
        .box ul li:nth-child(6){background: grey;left: 0;top: 0px;transform :translateZ(-100px)rotateY(180deg);}

        .box:hover ul{transform: rotateY(360deg);}
    </style>
<body>
    <div class="box">
        <ul>
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
        </ul>
    </div>
</body>

3D效果之旋轉木馬

    <style>
        *{margin: 0;padding: 0;}
        ul{list-style: none;}
        img{display: block;}
        .parent{width: 600px;height: 600px;border: 1px black solid;margin: 30px auto;}
        .parent ul{width: 500px; height: 500px; margin: 30px auto;position: relative;transform-style: preserve-3d;transition: 2s;}
        .parent ul li{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
        .parent ul li:nth-child(1){transform: rotateY(0) translateZ(200px);}
        .parent ul li:nth-child(2){transform: rotateY(60deg) translateZ(200px);}
        .parent ul li:nth-child(3){transform: rotateY(120deg) translateZ(200px);}
        .parent ul li:nth-child(4){transform: rotateY(180deg) translateZ(200px);}
        .parent ul li:nth-child(5){transform: rotateY(240deg) translateZ(200px);}
        .parent ul li:nth-child(6){transform: rotateY(300deg) translateZ(200px);}

        .parent:hover ul{transform: rotateY(360deg);}

    </style>

<body>
    <div class="parent">
        <ul>
            <li>
                <img src="./img/1.png" alt="">
            </li>
            <li>
                <img src="./img/2.png" alt="">
            </li>
            <li>
                <img src="./img/3.jpg" alt="">
            </li>
            <li>
                <img src="./img/4.png" alt="">
            </li>
            <li>
                <img src="./img/5.png" alt="">
            </li>
            <li>
                <img src="img/6.png" alt="">
            </li>
        </ul>
    </div>
</body>

_3D效果之翻轉圖片

    <style>
        html{overflow: hidden;}
        *{margin: 0;padding: 0;}
        img{display: block;}
        .parent{width: 640px;height: 320px;margin: 30px auto;position: relative;perspective: 600px;}
        .parent div{width: 100%;height: 100%;position: absolute;left: 0;top: 0;backface-visibility: hidden;transition: 0.5s;}

        .parent div:first-child{transform: rotateY(0);}
        .parent div:last-child{transform: rotateY(-180deg);}

        .parent:hover div:first-child{transform: rotateY(180deg);}
        .parent:hover div:last-child{transform: rotateY(0);}
    </style>
<body>
    <div class="parent">
        <div>
            <img src="../img/娜扎1.jpg" alt="">
        </div>
        <div>
            <img src="../img/娜扎2.jpg" alt="">
        </div>
    </div>
</body>

背景尺寸位置裁切等

background-size:背景圖的尺寸大小
1. cover：覆蓋
2. cotain：包含
background-origin：背景圖的填充位置
1. padding-box（默認）
2. border-box
3. content-box
background-clip：背景圖的裁切方式
1. padding-box
2. border-box（默認）
3. content-box

    <style>
        .box{width: 600px;height: 600px;border: 1px black solid;background: url(../img/娜扎2.jpg) no-repeat;
        /* background-size: 50px 200px; */
        /* background-size: cover; */
        background-size: contain;
        }

        .box2{width: 1000px;height: 1000px;border: 40px solid rgba(0, 0, 0, .5);padding: 30px; background: url(../img/娜扎1.jpg) ;background-origin: content-box;background-clip: border-box;}
    </style>
<body>
   <div class="box"></div>
   <div class="box2"></div>
</body>

線性漸變與徑向漸變

線性漸變->linear-gradient是值，需要添加到background-image屬性上。

注：漸變的0度是在頁面的最下邊，正值會按照順時針旋轉，負值按照逆時針旋轉。
徑向漸變->radial-gradient

    <style>
        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient(red,blue,yellow,green);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( to right ,red,blue);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( 0deg ,red,blue);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( 0deg ,red 25%,blue 75%);} */

        /* .box{width: 300px;height: 300px;border: 1px black solid;background-image: linear-gradient( 0deg ,red 50%,blue 50%);} */

        .box{width: 300px;height: 300px;border: 1px black solid;background-image:radial-gradient(red 25%,blue 50%,yellow 75%)}
    </style>

<body>
    <div class="box"></div>
</body>

漸變的加載進度條

    <style>
        .progress{width: 300px;height: 30px;border: 1px black solid;margin: 100px ;background-image: linear-gradient(to right top,#999 25%,#080 25%,#080 50% ,#999 50%,#999 75%,#080 75%);background-size: 30px;animation: move infinite 2s linear;}
        @keyframes move {
            0%{background-position:0 0 ;}
            100%{background-position: 300px 0;}
            
        }
    </style>
<body>
    <div class="progress"></div>
</body>

字體圖標

阿里巴巴矢量圖標庫

font-face是CSS3中的一個模塊，主要是把自己定義的web字體嵌入到網頁中。

好處：

可以非常方便地改變大小和顏色（font-size ；color）
放大后不會失真
減少請求次數和提高加載速度
簡化網頁布局
減少設計師和前端工程師的工作量
可使用計算機沒有提供的字體

使用：

@font-face語法

像.woff等文件都是做兼容平臺處理的，mac，unix

    <style>
        @font-face{font-family:footer-iconfont;
        src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot);src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot?#iefix) format('embedded-opentype'),url(https://at.alicdn.com/t/font_1433225452_0164654.woff) format('woff'),url(https://at.alicdn.com/t/font_1433225452_0164654.ttf) format('truetype'),url(https://at.alicdn.com/t/font_1433225452_0164654.svg#iconfont) format('svg')}

        div{
            font-family:footer-iconfont ;
        }

    </style>
<body>
    <div></div>
</body>


<!-- 偽類的方式，不用重復造輪子 -->
    <style>
        @font-face{font-family:footer-iconfont;
        src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot);src:url(https://at.alicdn.com/t/font_1433225452_0164654.eot?#iefix) format('embedded-opentype'),url(https://at.alicdn.com/t/font_1433225452_0164654.woff) format('woff'),url(https://at.alicdn.com/t/font_1433225452_0164654.ttf) format('truetype'),url(https://at.alicdn.com/t/font_1433225452_0164654.svg#iconfont) format('svg')}

        div{
            font-family:footer-iconfont ;
         } 

        .taobaowang:after{content: "";}
    </style>

<body>
    <div class="taobaowang"></div>
</body>

_iconfont

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

人面猴
序言：七十年代末，一起剝皮案震驚了整個濱河市，隨后出現的幾起案子，更是在濱河造成了極大的恐慌，老刑警劉巖，帶你破解...
沈念sama閱讀 228,030評論 6贊 531
死咒
序言：濱河連續發生了三起死亡事件，死亡現場離奇詭異，居然都是意外死亡，警方通過查閱死者的電腦和手機，發現死者居然都...
沈念sama閱讀 98,310評論 3贊 415
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事。” “怎么了？”我有些...
開封第一講書人閱讀 175,951評論 0贊 373
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵，是天一觀的道長。經常有香客問我，道長，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 62,796評論 1贊 309
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮，結果婚禮上，老公的妹妹穿的比我還像新娘。我一直安慰自己，他們只是感情好，可當我...
茶點故事閱讀 71,566評論 6贊 407
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著，像睡著了一般。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發上，一...
開封第一講書人閱讀 55,055評論 1贊 322
城市分裂傳說
那天，我揣著相機與錄音，去河邊找鬼。笑死，一個胖子當著我的面吹牛，可吹牛的內容都是我干的。我是一名探鬼主播，決...
沈念sama閱讀 43,142評論 3贊 440
雙鴛鴦連環套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
開封第一講書人閱讀 42,303評論 0贊 288
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤，失蹤者是張志新（化名）和其女友劉穎，沒想到半個月后，有當地人在樹林里發現了一具尸體，經...
沈念sama閱讀 48,799評論 1贊 333
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內容為張勛視角年9月15日...
茶點故事閱讀 40,683評論 3贊 354
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發現自己被綠了。大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
茶點故事閱讀 42,899評論 1贊 369
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖，靈堂內的尸體忽然破棺而出，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 38,409評論 5贊 358
?日本核電站爆炸內幕
正文年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發生泄漏。R本人自食惡果不足惜，卻給世界環境...
茶點故事閱讀 44,135評論 3贊 347
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望。院中可真熱鬧，春花似錦、人聲如沸。這莊子的主人今日做“春日...
開封第一講書人閱讀 34,520評論 0贊 26
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監牢的瞬間，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 35,757評論 1贊 282
情欲美人皮
我被黑心中介騙來泰國打工，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留，地道東北人。一個月前我還...
沈念sama閱讀 51,528評論 3贊 390
代替公主和親
正文我出身青樓，卻偏偏與公主長得像，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子，可洞房花燭夜當晚...
茶點故事閱讀 47,844評論 2贊 372

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

前端html+css筆記（下）

前端html+css筆記（下）

斜切的導航

變形的列表

animation動畫(上)

劃入劃出的小圖標

loading加載動畫效果

animation動畫(下)

_animate.css動畫庫

transform3D相關屬性

實現3d立方體

立方體擴展

3D效果之旋轉木馬

_3D效果之翻轉圖片

背景尺寸位置裁切等

線性漸變與徑向漸變

漸變的加載進度條

字體圖標

_iconfont

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

前端html+css筆記（下）

斜切的導航

變形的列表

animation動畫(上)

劃入劃出的小圖標

loading加載動畫效果

animation動畫(下)

_animate.css動畫庫

transform3D相關屬性

實現3d立方體

立方體擴展

3D效果之旋轉木馬

_3D效果之翻轉圖片

背景尺寸位置裁切等

線性漸變與徑向漸變

漸變的加載進度條

字體圖標

_iconfont

推薦閱讀更多精彩內容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频