果圖如下:
代碼展示如下:
<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)
給圖像應用色相旋轉。“angle”設定圖像會被調整的色環角度值。值為0deg,則圖像無變化。
若值未設置,默認值是0deg。該值雖然沒有最大值,超過360deg的值相當于又繞一圈。
-webkit-box-reflect
是webkit內核瀏覽器的一個私有屬性,用來對block(塊級)元素或者行內塊元素(img,input)制作一個鏡像的效果
?? above:指定倒影在對象的上邊
??below:指定倒影在對象的下邊
?? left:指定倒影在對象的左邊
?? right:指定倒影在對象的右邊
?? offset:倒影與對象之間的間隔,可以為負值。
、相關知識點
介紹
文檔
MDN關于倒影屬性介紹:https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect
官方說明:
非標準:該特性是非標準的,不在標準軌道上。不要在面向Web的生產站點上使用它:它并不適用于每個用戶。實現之間也可能存在很大的不兼容性,將來行為可能會發生變化
瀏覽器兼容性:
總結
雖然這是個非標準屬性,但是大多數瀏覽器都支持,火狐除外,追求效果的還是可以使用的。
支持三個位置的屬性值:
-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(); //小時
let m = new Date().getMinutes(); //分鐘
let s = new Date().getSeconds(); //秒
time.innerHTML = `${h}:${m}:${s}`
setTimeout(refreshTime, 1000)
}
refreshTime()
</script>
</body>
</html>
以上就是今天要講的內容,本文介紹CSS倒影屬性,更多詳細內容,自己多寫寫代碼,多練練,可以參考https://developer.mozilla.org/en-US/docs/Web/CSS/-webkit-box-reflect。
如果覺得有用歡迎點贊,關注
有問題私信我!!
看一下這樣的效果。這里展示了四張圖片,每一個圖片都有一個倒影。當鼠標旋轉每個圖片的時候倒影會消失,并且把圖片放大顯示。接下來跟著我一起完成這樣的效果制作。
·這里展示了一個空白的HTML模板,來設置一下它的背景顏色。
·bargain設置為邊距為零,內邊距也為零,背景顏色為黑色。
·再添加一個INMAX標簽,添加上圖片。這個圖片當前是沒有任何效果的,就直接的展示出來了。
·給圖片添加一個樣式,設置一個寬度為一百五十像素。這個時候發現這個圖片是靠左上角的,設置一個next布局body。
·再設置一下它的高度為一百,根據這個四口來設置高度,寬度也是。現在就可以把它在窗口的頁面上進行劇終了。
·再來設置一下它的圖片樣式。
·order top left,左上角的圓角設置成十像素,右上角也設置成十像素的圓角。
·這個時候遇到一個關鍵的問題,怎么樣去把設置成一個倒影,增加一個倒影?它有這么一個屬性,這里有設置一下它的倒影,往下的倒影讓倒影離開主要圖片的五個像素的間距,間距也就是這里的縫隙。
·再設置一下顏色,這個顏色來設置一個漸變的,這個時候是空白的,這樣子就產生了這樣的倒影。但是倒影還是太高了一點,可以給透明加一個,如果不夠可以繼續加,這樣子就差不多了,設置成八十暗一點,這樣子就有了一個倒影。
·再設置一下鼠標懸停,懸停是沒有效果的,可以給英美的標簽添加一個鼠標懸停的效果。
·然后是它的放大,放大為一點五倍,這個時候放大縮小是很生硬的,可以在這里加上零點五秒的過渡時間,但倒影還沒有消失,希望它的倒影消失一下。
·可以繼續設置一下屬性,它有一個on set,也就是恢復到默認設置。這個時候再來看一下,再給它添加外發光的效果,這樣就出現了這個效果。
·給元素多復制幾個,這個時候再來看一下,但它是挨在一起的,可以給元素設置一個外邊距,上下為零,左右為十像素,可以設置成五像素。
·這個時候再來看,這個時候會發現后邊的一張圖片會遮住前面的那張圖片,但這不是想要的,可以在over的時候把英美解的元素的層級往上走一下,這樣子設置到最高,就展現到最前面,外發光效果還是太小小了點,這樣子看起來就好看一些。
·如果圖片放大了,最好是把左下角也設置成圓角,也可以這里設置一下。再來看一下,這樣子是不是放大的時候全為圓角了。
今天的展示就到這里,謝謝大家。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。