您好,登錄后才能下訂單哦!
這篇文章主要講解了“實(shí)用的CSS代碼段有哪些”,文中的講解內(nèi)容簡(jiǎn)單清晰,易于學(xué)習(xí)與理解,下面請(qǐng)大家跟著小編的思路慢慢深入,一起來(lái)研究和學(xué)習(xí)“實(shí)用的CSS代碼段有哪些”吧!
html
正在加載中<dot>...</dot>
css
dot{ display: inline-block; height: 1em; line-height: 1; text-align: left; vertical-align: -.25em; overflow: hidden; } dot::before{ display: block; content: '...\A..\A.'; white-space: pre-wrap; animation: dot 2s infinite step-start both; } @keyframes dot{ 33% { transform: translateY(-2em); } 66% { transform: translateY(-1em); } }
如果你看上圖代碼沒(méi)有看懂,請(qǐng)看下圖,我注釋掉一行代碼,你就明白了。原來(lái)是dot元素,沿著Y軸在循環(huán)位移,隱藏掉就讓你看到了加載的動(dòng)畫(huà)效果。
當(dāng)你需要這樣一個(gè)上傳文件,按鈕時(shí),你考慮的是找設(shè)計(jì)弄個(gè)圖片,還是自己寫(xiě)一個(gè)???
其實(shí)CSS寫(xiě),也很簡(jiǎn)單的。
<a href="javascript:;" class="upload" title="繼續(xù)上傳">添加圖片</a> .upload{ position: relative; display: inline-block; width: 76px; height: 76px; color: #ccc; border: 2px dashed; /*邊框虛線*/ text-indent: -12em; /*使其文字看不到*/ transition: color .25s; /*hover事件:顏色漸變動(dòng)畫(huà)*/ overflow: hidden; margin: 50px 100px; } /*用before/after偽類(lèi)做 + 號(hào)樣式*/ .upload:before, .upload:after{ content: ''; position: absolute; top: 50%; left: 50%; } .upload:hover{ color: #34538b; } .upload::before{ width: 20px; border-top: 4px solid; margin: -2px 0 0 -10px; } .upload::after{ height: 20px; border-left: 4px solid; margin: -10px 0 0 -2px; }
當(dāng)我們想給一個(gè)矩形或其他能用 border-radius 生成的形狀加投影時(shí),用 box-shadow 都可以解決,如下圖:
但是,當(dāng)元素添加了一些偽元素或半透明的裝飾之后,box-shadow就有些 力不從心了,因?yàn)?border-radius 會(huì)無(wú)恥地忽視透明部分。這類(lèi)情況包括下列幾種情況:
1、半透明圖像、背景圖像、或者 border-image(比如老式的金質(zhì)像框);
2、元素設(shè)置了點(diǎn)狀、虛線或半透明的邊框,但沒(méi)有背景(或者當(dāng) background-clip 不是 border-box 時(shí));
3、對(duì)話氣泡,它的小尾巴通常是用偽元素生成的;
4、幾乎所有的折角效果
5、通過(guò) clip-path 生成的形狀。
下面來(lái)看看這個(gè)示例: html代碼
<div class="speech">不規(guī)則的投影</div>
css樣式
div { position: relative; display: inline-flex; flex-direction: column; justify-content: center; vertical-align: bottom; box-sizing: border-box; width: 8em; padding: .5em; height: 5em; margin: .6em; background: #0cc071; color: #fff; /*box-shadow: .1em .1em .3em rgba(0,0,0,.5); 此時(shí)是偽類(lèi)是沒(méi)有陰影的*/ -webkit-filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); filter: drop-shadow(.2em .2em .2em rgba(0,0,0,.5)); } .speech { border-radius: .3em; } .speech::before { content: ''; position: absolute; top: 1em; right: -.7em; width: 0; height: 0; border: 1em solid transparent; border-left-color: #0cc071; border-right-width: 0; }
從上圖可以看出box-shadow搞不定的,drop-shadow給搞定了。這是為什么了?
可以很明顯的看出區(qū)別,為什么會(huì)這樣呢?在這里我用的是div標(biāo)簽,大家都知道,div標(biāo)簽是個(gè)塊標(biāo)簽,說(shuō)白了是個(gè)盒模型,指的是一塊區(qū)域,box-shadow的屬性只能添加到盒模型外面,因此內(nèi)部的東西是不會(huì)添加上的,就變成上圖的樣子,中間還是白色部分。而drop-shadow就不一樣了,他是把所有的非透明區(qū)域都做了陰影效果,就相當(dāng)于一種真正的投影。
經(jīng)常在網(wǎng)頁(yè)中看到一些Dialog,例如有些網(wǎng)頁(yè)點(diǎn)擊登錄注冊(cè)時(shí)就會(huì)跳出一個(gè)彈框來(lái)顯示登錄注冊(cè)頁(yè)面,下面就使用 css 完成一個(gè)可以自適應(yīng),無(wú)論窗口的大小,始終能保持水平垂直居中的dialog。
<div class="c-pupup"> <div class="dialog"> <div class="content"> 我是內(nèi)容 </div> </div> </div>
css樣式
.c-pupup{ position: fixed; top:0; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,.5); text-align: center; white-space: nowrap; z-index: 99; } .c-pupup:after{ content: ''; display: inline-block; height: 100%; vertical-align: middle; } .dialog{ background-color: #fff; display: inline-block; vertical-align: middle; border-radius: 6px; text-align: left; white-space: normal; width: 400px; height: 250px; }
感謝各位的閱讀,以上就是“實(shí)用的CSS代碼段有哪些”的內(nèi)容了,經(jīng)過(guò)本文的學(xué)習(xí)后,相信大家對(duì)實(shí)用的CSS代碼段有哪些這一問(wèn)題有了更深刻的體會(huì),具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。