資訊專欄INFORMATION COLUMN
摘要：傳送門效果是這樣的結(jié)構(gòu)小技巧就是，一開始就寫了一組單選按鈕來(lái)做開關(guān)的部分。有個(gè)地方需要優(yōu)化，就是在換擋的時(shí)候，動(dòng)畫應(yīng)該柔和些。
這次分享的電扇，和以往用css3畫人物相比 多加了一點(diǎn)交互，就是電扇開關(guān)的地方，用到了一點(diǎn)點(diǎn)css3的 :checked +div 這個(gè)很少用到的選擇器來(lái)實(shí)現(xiàn)的。
GitHub傳送門：https://github.com/lancer07/css3_fan
效果是這樣的
小技巧就是，一開始就寫了一組單選按鈕來(lái)做開關(guān)的部分。把單選按鈕的透明度設(shè)為0，然后在后面疊加一個(gè)div來(lái)畫開關(guān)的樣式。
0123CSS3 Fan
開關(guān)部分的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
}
}
}
}
看起來(lái)有點(diǎn)low。
至于電扇的CSS樣式部分就不再贅述了。
有個(gè)地方需要優(yōu)化，就是在換擋的時(shí)候，動(dòng)畫應(yīng)該柔和些。有同學(xué)想到用什么辦法優(yōu)化下嗎？
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115265.html
摘要：傳送門效果是這樣的結(jié)構(gòu)小技巧就是，一開始就寫了一組單選按鈕來(lái)做開關(guān)的部分。有個(gè)地方需要優(yōu)化，就是在換擋的時(shí)候，動(dòng)畫應(yīng)該柔和些。 這次分享的電扇，和以往用css3畫人物相比 多加了一點(diǎn)交互，就是電扇開關(guān)的地方，用到了一點(diǎn)點(diǎn)css3的 :checked +div 這個(gè)很少用到的選擇器來(lái)實(shí)現(xiàn)的。 GitHub傳送門：https://github.com/lancer07/css3_fan 效...
摘要：幫大家回憶一下，小時(shí)候的電視機(jī)。每到星期二的下午，總是這個(gè)圖案。傳送門這次分步來(lái)做，先畫電視機(jī)，再畫沒有信號(hào)的界面。這次絕筆之作中，把之前所有用畫的東西都放進(jìn)電視機(jī)里了。所以電視機(jī)是可以切換頻道的。這次不貼代碼了，有點(diǎn)多。 幫大家回憶一下，小時(shí)候的電視機(jī)。每到星期二的下午，總是這個(gè)圖案。 GitHub傳送門：https://github.com/lancer07/css3TV 這次分2...
摘要：幫大家回憶一下，小時(shí)候的電視機(jī)。每到星期二的下午，總是這個(gè)圖案。傳送門這次分步來(lái)做，先畫電視機(jī)，再畫沒有信號(hào)的界面。這次絕筆之作中，把之前所有用畫的東西都放進(jìn)電視機(jī)里了。所以電視機(jī)是可以切換頻道的。這次不貼代碼了，有點(diǎn)多。 幫大家回憶一下，小時(shí)候的電視機(jī)。每到星期二的下午，總是這個(gè)圖案。 GitHub傳送門：https://github.com/lancer07/css3TV 這次分2...
閱讀 2676·2021-11-23 09:51
閱讀 961·2021-09-24 10:37
閱讀 3664·2021-09-02 15:15
閱讀 1987·2019-08-30 13:03
閱讀 1915·2019-08-29 15:41
閱讀 2659·2019-08-29 14:12
閱讀 1456·2019-08-29 11:19
閱讀 3330·2019-08-26 13:39
