整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
果圖如下：
代碼展示如下：
<style>
h1 {
font-size: 50px;
text-align: center;
color:slateblue;
filter: hue-rotate(240deg);
-webkit-box-reflect: below 1px linear-gradient(to bottom, transparent, rgba(0, 0, 0, 0.7));
}
img{
filter: hue-rotate(120deg);
-webkit-box-reflect: right 1px;
}
</style>
<h1>你看到了什么</h1>
<img src="https://img1.baidu.com/it/u=1964477391,3223175982&fm=26&fmt=auto" alt="" width="200px" >屬性說明：
filter: hue-rotate(angle)
給圖像應(yīng)用色相旋轉(zhuǎn)。“angle”設(shè)定圖像會(huì)被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。
若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。
-webkit-box-reflect
是webkit內(nèi)核瀏覽器的一個(gè)私有屬性，用來對(duì)block(塊級(jí))元素或者行內(nèi)塊元素（img,input）制作一個(gè)鏡像的效果
?? above：指定倒影在對(duì)象的上邊
??below：指定倒影在對(duì)象的下邊
?? left：指定倒影在對(duì)象的左邊
?? right：指定倒影在對(duì)象的右邊
?? offset：倒影與對(duì)象之間的間隔，可以為負(fù)值。
、相關(guān)知識(shí)點(diǎn)
介紹
文檔
MDN關(guān)于倒影屬性介紹：https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
官方說明：
非標(biāo)準(zhǔn):該特性是非標(biāo)準(zhǔn)的，不在標(biāo)準(zhǔn)軌道上。不要在面向Web的生產(chǎn)站點(diǎn)上使用它:它并不適用于每個(gè)用戶。實(shí)現(xiàn)之間也可能存在很大的不兼容性，將來行為可能會(huì)發(fā)生變化
瀏覽器兼容性：
總結(jié)
雖然這是個(gè)非標(biāo)準(zhǔn)屬性，但是大多數(shù)瀏覽器都支持，火狐除外，追求效果的還是可以使用的。
支持三個(gè)位置的屬性值：
-webkit-box-reflect：屬性值1 屬性值2 屬性值3；
-webkit-box-reflect: above; /* 上 */
-webkit-box-reflect: below; /* 下 */
-webkit-box-reflect: left; /* 左 */
-webkit-box-reflect: right; /* 右 */-webkit-box-reflect: below 10px; /* 下，距離10像素 */-webkit-box-reflect: below 0 linear-gradient(transparent, white);
/* 下，距離0像素，線性遮罩最后白色 */ 完整代碼：
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
body { margin: 0; }
#time {
width: 300px;
height: 80px;
line-height: 80px;
font-size: 48px;
text-align: center;
font-weight: bold; /* 下 */
color: #fff;
background-color: #2196f3;
-webkit-box-reflect: below 1px linear-gradient(transparent, #0004);
}
</style>
</head>
<body>
<div id="time"></div>
<script>
function refreshTime(){
let time = document.getElementById('time');
let h = new Date().getHours(); //小時(shí)
let m = new Date().getMinutes(); //分鐘
let s = new Date().getSeconds(); //秒
time.innerHTML = `${h}:${m}:${s}`
setTimeout(refreshTime, 1000)
}
refreshTime()
</script>
</body>
</html>以上就是今天要講的內(nèi)容，本文介紹CSS倒影屬性，更多詳細(xì)內(nèi)容，自己多寫寫代碼，多練練，可以參考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。
如果覺得有用歡迎點(diǎn)贊，關(guān)注
有問題私信我??！
看一下這樣的效果。這里展示了四張圖片，每一個(gè)圖片都有一個(gè)倒影。當(dāng)鼠標(biāo)旋轉(zhuǎn)每個(gè)圖片的時(shí)候倒影會(huì)消失，并且把圖片放大顯示。接下來跟著我一起完成這樣的效果制作。
·這里展示了一個(gè)空白的HTML模板，來設(shè)置一下它的背景顏色。
·bargain設(shè)置為邊距為零，內(nèi)邊距也為零，背景顏色為黑色。
·再添加一個(gè)INMAX標(biāo)簽，添加上圖片。這個(gè)圖片當(dāng)前是沒有任何效果的，就直接的展示出來了。
·給圖片添加一個(gè)樣式，設(shè)置一個(gè)寬度為一百五十像素。這個(gè)時(shí)候發(fā)現(xiàn)這個(gè)圖片是靠左上角的，設(shè)置一個(gè)next布局body。
·再設(shè)置一下它的高度為一百，根據(jù)這個(gè)四口來設(shè)置高度，寬度也是?，F(xiàn)在就可以把它在窗口的頁面上進(jìn)行劇終了。
·再來設(shè)置一下它的圖片樣式。
·order top left，左上角的圓角設(shè)置成十像素，右上角也設(shè)置成十像素的圓角。
·這個(gè)時(shí)候遇到一個(gè)關(guān)鍵的問題，怎么樣去把設(shè)置成一個(gè)倒影，增加一個(gè)倒影？它有這么一個(gè)屬性，這里有設(shè)置一下它的倒影，往下的倒影讓倒影離開主要圖片的五個(gè)像素的間距，間距也就是這里的縫隙。
·再設(shè)置一下顏色，這個(gè)顏色來設(shè)置一個(gè)漸變的，這個(gè)時(shí)候是空白的，這樣子就產(chǎn)生了這樣的倒影。但是倒影還是太高了一點(diǎn)，可以給透明加一個(gè)，如果不夠可以繼續(xù)加，這樣子就差不多了，設(shè)置成八十暗一點(diǎn)，這樣子就有了一個(gè)倒影。
·再設(shè)置一下鼠標(biāo)懸停，懸停是沒有效果的，可以給英美的標(biāo)簽添加一個(gè)鼠標(biāo)懸停的效果。
·然后是它的放大，放大為一點(diǎn)五倍，這個(gè)時(shí)候放大縮小是很生硬的，可以在這里加上零點(diǎn)五秒的過渡時(shí)間，但倒影還沒有消失，希望它的倒影消失一下。
·可以繼續(xù)設(shè)置一下屬性，它有一個(gè)on set，也就是恢復(fù)到默認(rèn)設(shè)置。這個(gè)時(shí)候再來看一下，再給它添加外發(fā)光的效果，這樣就出現(xiàn)了這個(gè)效果。
·給元素多復(fù)制幾個(gè)，這個(gè)時(shí)候再來看一下，但它是挨在一起的，可以給元素設(shè)置一個(gè)外邊距，上下為零，左右為十像素，可以設(shè)置成五像素。
·這個(gè)時(shí)候再來看，這個(gè)時(shí)候會(huì)發(fā)現(xiàn)后邊的一張圖片會(huì)遮住前面的那張圖片，但這不是想要的，可以在over的時(shí)候把英美解的元素的層級(jí)往上走一下，這樣子設(shè)置到最高，就展現(xiàn)到最前面，外發(fā)光效果還是太小小了點(diǎn)，這樣子看起來就好看一些。
·如果圖片放大了，最好是把左下角也設(shè)置成圓角，也可以這里設(shè)置一下。再來看一下，這樣子是不是放大的時(shí)候全為圓角了。
今天的展示就到這里，謝謝大家。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
