【每日一練】19—CSS 實(shí)現(xiàn)撕紙的效果
寫在前面
今天我們來練習(xí)一個(gè)CSS實(shí)現(xiàn)的撕紙效果，這個(gè)效果，也會(huì)在一些設(shè)計(jì)網(wǎng)站上經(jīng)常看到，但是這個(gè)用PS可以直接做成一張圖片，但是，今天我們用CSS通過兩張圖片就實(shí)現(xiàn)了，這樣做的好處，就是當(dāng)我們替換圖片時(shí)，不需要再通過PS來更改圖片，可以直接替換產(chǎn)品圖片即可，這樣會(huì)方便很多。
好了，我們一起來看一下今天練習(xí)的項(xiàng)目最終效果：
<html><head><meta charset="utf-8"><title>【每日一練】19—CSS實(shí)現(xiàn)撕紙的效果</title></head><body><section><div class="bg"></div><div class="paper"></div></section></body></html>
*{margin: 0;padding: 0;box-sizing: border-box;}section{position: relative;width: 100%;height: 100vh;}.bg{position: absolute;width: 100%;height: 100vh;background: url(bg.jpg);background-size: cover;background-position: center;}.paper{position: absolute;width: 100%;height: 100vh;background: url(paper.jpg);background-size: cover;background-position: center;mix-blend-mode: lighten;filter: brightness(1.1);}
寫在最后
以上就是今天練習(xí)的全部內(nèi)容，希望今天的小練習(xí)對你有用，如果你覺得有幫助的話，請點(diǎn)贊我，關(guān)注我，并將它分享給你身邊做開發(fā)的朋友，也許能夠幫助到他。
我是楊小愛，我們明天見。
學(xué)習(xí)更多技能
請點(diǎn)擊下方公眾號(hào)
評論
圖片
表情