磨砂玻璃效果
在學(xué)習(xí)中我發(fā)現(xiàn)了一個(gè)好玩的效果，話不多說(shuō)，先看效果圖:
看上圖，我們可以發(fā)現(xiàn)，中間的字是不是看的不是很清晰，這就是磨砂玻璃的效果，具體怎么實(shí)現(xiàn)，也很簡(jiǎn)單，就一句代碼就能實(shí)現(xiàn)。
filter :濾鏡，我們通常都會(huì)想到用濾鏡大的模糊度來(lái)實(shí)現(xiàn)，但是需要注意
??filter: blur(); 模糊自己
filter: blur(5px);? ?backdrop-filter: blur(); 不會(huì)模糊自己，是模糊被遮蓋的部分?
?
首先我們先來(lái)實(shí)現(xiàn)基本的樣式。
html
body內(nèi)容部分就是一個(gè)div里面在包含div,model就是用來(lái)實(shí)現(xiàn)磨砂玻璃效果的。
<div class="wrap"><h1>HELLO WORLD</h1><div class="model"></div></div>?css樣式
給body寬高都設(shè)為100%，鋪滿全屏，
background:linear-gradient(to right, yellow,red);線性漸變，從一個(gè)顏色向其他顏色過渡的效果，可以讓背景好看一點(diǎn)，默認(rèn)為從上往下漸變，我設(shè)置了兩個(gè)顏色，是從左往右漸變，所以是to right,如果想換個(gè)方向，就to 后面跟結(jié)束的那個(gè)方向就可以了，左上往右下，右上往左下都是可以的。
*{margin: 0;padding: 0;}body{width: 100%;height: 100%;}.wrap{position: relative;background:linear-gradient(to right, yellow,red);}h1{text-align: center;line-height: 100vh;}.model{width: 300px;height: 100px;/* border: 1px solid; */position: absolute;top: 50%;left: 50%;margin-left: -150px;margin-top: -50px;background-color: rgba(255,255,255,0.4);border-radius: 10px;}</style>效果顯示如下：
接下來(lái)就是實(shí)現(xiàn)玻璃磨砂效果了，只用在model樣式后面加上下面這句話就能實(shí)現(xiàn)效果了。
backdrop-filter: blur(4px);效果如下：
?看到這里其實(shí)玻璃磨砂效果還能有別的玩法，請(qǐng)看下圖：
整體代碼：?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}body{background-image: url(./img/01.jpeg);/* 把圖片大小設(shè)為全部鋪滿 */background-size: cover;height: 100vh;}.model{position: fixed;width: 100%;height: 100%;top: 0;right: 0;/* 過渡效果，持續(xù)時(shí)間2S */transition: all 2s;border-left: 5px solid #333;/* 灰度設(shè)置 被遮蓋的部分全部變?yōu)榛疑?/backdrop-filter: grayscale(1);}body:hover .model{width: 0;}</style> </head> <body><div class="model"></div> </body> </html>總結(jié)
- 上一篇： Unity Shader之磨砂玻璃与水雾
- 下一篇： CSS3打造磨砂玻璃的背景