【每日一練】11—復(fù)選框效果的實(shí)現(xiàn)?
寫在前面
有小伙伴在后臺(tái)留言說，為啥照著我的代碼寫的，怎么效果還不一樣，其實(shí)，就算不完全一模一樣，你也不用擔(dān)心，多看看，檢查一下會(huì)不會(huì)是瀏覽器的問題，我這邊預(yù)覽采用都是谷歌瀏覽器，瀏覽器的版本不同，有時(shí)候都會(huì)導(dǎo)致效果有些微妙的差異，這個(gè)就是做前端辛苦的地方。
以前IE一統(tǒng)天下的時(shí)候，我們就想，兼容IE就好了，現(xiàn)在IE退出江湖了，依然還是有這個(gè)問題，所以不要著急，多仔細(xì)看看。
很多時(shí)候，我們?cè)诒镜囟际荗K的，到了服務(wù)器上還有各種問題呢，怎么辦呀，只能想辦法解決，編程就是這樣，Bug是永遠(yuǎn)存在的，就是看這個(gè)Bug影響大不大了。
如果我們都把所有Bug都解決了，那程序的世界就太安靜了。
但是，有些問題，對(duì)于我們平時(shí)練習(xí)時(shí)候，影響不大的話，就不要糾結(jié)了，在實(shí)際項(xiàng)目中，這個(gè)就要具體情況具體分析了。
總之，學(xué)習(xí)HTML&CSS，看起來好像很簡(jiǎn)單，其實(shí)，這個(gè)真的沒有那么容易。
想要精通CSS就要多練習(xí)，學(xué)習(xí)它的更多甚至全部功能，這樣，我們才能做到心中有數(shù)，知道什么時(shí)候用什么功能，讓CSS幫助我們自由的設(shè)計(jì)出想要的效果。
現(xiàn)在，我們就一起來一下今天的練習(xí)：
<html><head><title>【每日一練】11—復(fù)選框效果的實(shí)現(xiàn)</title></head><body><label><input type="checkbox"><div class="icon"><div class="shadow"></div><div class="iconBox"><ion-icon name="power-outline"></ion-icon></div></div></label><script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script><script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;}body{display: flex;justify-content: center;align-items: center;min-height: 100vh;background: #cfd1e1;overflow: hidden;}label{position: relative;width: 120px;height: 60px;transition: 0.5s;cursor: pointer;display: flex;justify-content: center;align-items: center;}label::before{content: '';position: absolute;width: 60%;height: 4px;background: #444;border-radius: 4px;}label input{position: absolute;appearance: none;}.icon{position: absolute;left: 0;width: 60px;height: 100%;transition: 0.5s;}label input:checked ~ .icon{left: 60px;}.icon::before{content: '';position: absolute;top: 0;left: 0;width: 10px;height: 100%;background: linear-gradient(#fff,#fff,#e3e3e3);z-index: 1;filter: blur(1px);}.icon::after{content: '';position: absolute;top: 0;right: -1px;width: 10px;height: 100%;background: #9d9d9d;z-index: 1;filter: blur(1px);}.shadow{position: absolute;top: 30px;left: -12px;width: 84.85px;height: 300px;background: linear-gradient(180deg,rgba(0,0,0,0.1),transparent,transparent);transform-origin: top;transform: rotate(315deg);pointer-events: none;}.iconBox{position: relative;width: 100%;height: 100%;display: flex;justify-content: center;align-items: center;background: linear-gradient(#dbdae1,#a3aaba);box-shadow: 5px 5px 5px rgba(0,0,0,0.1),15px 15px 15px rgba(0,0,0,0.1),20px 20px 15px rgba(0,0,0,0.1),30px 30px 15px rgba(0,0,0,0.1),inset 1px 1px 2px #fff;}ion-icon{position: absolute;color: #555;font-size: 1.5em;--ionicon-stroke-width: 50px;transition: 0.5s;}label input:checked ~ .icon ion-icon{color: #00ffe2;filter: drop-shadow(0 0 5px #00ffe2) drop-shadow(0 0 15px #00ffe2);}
寫在最后
到今天你還在堅(jiān)持練習(xí)的話，我那真的要恭喜你了，你沒有放棄，那就繼續(xù)加油吧，后面我們將一起來寫一下靜態(tài)網(wǎng)頁(yè)的案例，每天只寫其中的某個(gè)布局，然后通過每天一點(diǎn)點(diǎn)的積累，一個(gè)完整的頁(yè)面就出來了。
好了，今天的【每日一練】就到這里了，希望今天的練習(xí)對(duì)你有用，如果你覺得有幫助的話，請(qǐng)點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)
