国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

【二次元的CSS】—— 純CSS3做的能換擋的電扇

big_cat / 1961人閱讀

摘要:傳送門效果是這樣的結(jié)構(gòu)小技巧就是,一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優(yōu)化,就是在換擋的時候,動畫應該柔和些。

這次分享的電扇,和以往用css3畫人物相比 多加了一點交互,就是電扇開關的地方,用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現(xiàn)的。

GitHub傳送門:https://github.com/lancer07/css3_fan

效果是這樣的

HTML 結(jié)構(gòu)

小技巧就是,一開始就寫了一組單選按鈕來做開關的部分。把單選按鈕的透明度設為0,然后在后面疊加一個div來畫開關的樣式。

       
0
1
2
3

開關部分的LESS代碼如下

   .switch{
        position: absolute;
        width: 24px;
        height: 24px;
        top: 296px;
        z-index: 13;
        opacity: 0;
        cursor: pointer;
    }

   .switch_0{
        .switch;
        left: 50px;
        &:checked+div{
            &+input+div+input+div+input+div+.mask{
                .leafs{
                    animation-play-state:paused;
                }
            }
        }
    }
    .switch_1{
        .switch;
        left: 75px;
        &:checked+div{
            background: #a9af27;
            color: #0e6873;
            &+input+div+input+div+.mask{
                .leafs{
                    animation-duration : 0.7s
                }
            }
        }
    }
    .switch_2{
        .switch;
        left: 100px;
        &:checked+div{
            background: #a9af27;
            color: #0e6873;
            &+input+div+.mask{
                .leafs{
                    animation-duration : 0.4s
                }
            }
        }
    }
    .switch_3{
        .switch;
        left: 125px;
        &:checked+div{
            background: #a9af27;
            color: #0e6873;
            &+.mask{
                .leafs{
                    animation-duration : 0.3s
                }
            }
        }
    }

看起來有點low。

至于電扇的CSS樣式部分就不再贅述了。

有個地方需要優(yōu)化,就是在換擋的時候,動畫應該柔和些。有同學想到用什么辦法優(yōu)化下嗎?

文章版權歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址:http://specialneedsforspecialkids.com/yun/115265.html

相關文章

  • 二次CSS】—— CSS3換擋電扇

    摘要:傳送門效果是這樣的結(jié)構(gòu)小技巧就是,一開始就寫了一組單選按鈕來做開關的部分。有個地方需要優(yōu)化,就是在換擋的時候,動畫應該柔和些。 這次分享的電扇,和以往用css3畫人物相比 多加了一點交互,就是電扇開關的地方,用到了一點點css3的 :checked +div 這個很少用到的選擇器來實現(xiàn)的。 GitHub傳送門:https://github.com/lancer07/css3_fan 效...

    Cruise_Chan 評論0 收藏0
  • 二次CSS】—— CSS3畫換頻道電視機(合集)

    摘要:幫大家回憶一下,小時候的電視機。每到星期二的下午,總是這個圖案。傳送門這次分步來做,先畫電視機,再畫沒有信號的界面。這次絕筆之作中,把之前所有用畫的東西都放進電視機里了。所以電視機是可以切換頻道的。這次不貼代碼了,有點多。 幫大家回憶一下,小時候的電視機。每到星期二的下午,總是這個圖案。 GitHub傳送門:https://github.com/lancer07/css3TV 這次分2...

    LeviDing 評論0 收藏0
  • 二次CSS】—— CSS3畫換頻道電視機(合集)

    摘要:幫大家回憶一下,小時候的電視機。每到星期二的下午,總是這個圖案。傳送門這次分步來做,先畫電視機,再畫沒有信號的界面。這次絕筆之作中,把之前所有用畫的東西都放進電視機里了。所以電視機是可以切換頻道的。這次不貼代碼了,有點多。 幫大家回憶一下,小時候的電視機。每到星期二的下午,總是這個圖案。 GitHub傳送門:https://github.com/lancer07/css3TV 這次分2...

    elliott_hu 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<