整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          使用CSS3制作倒影-box-reflect

          果圖如下:

          代碼展示如下:

          <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;

          • 屬性值1:倒影的位置:
          -webkit-box-reflect: above; /* 上 */
          -webkit-box-reflect: below; /* 下 */
          -webkit-box-reflect: left; /* 左 */
          -webkit-box-reflect: right; /* 右 */
          • 屬性值2:倒影的距離:
          -webkit-box-reflect: below 10px;  /* 下,距離10像素 */
          • 屬性值3:倒影的遮罩層:
          -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的時候把英美解的元素的層級往上走一下,這樣子設置到最高,就展現到最前面,外發光效果還是太小小了點,這樣子看起來就好看一些。

          ·如果圖片放大了,最好是把左下角也設置成圓角,也可以這里設置一下。再來看一下,這樣子是不是放大的時候全為圓角了。

          今天的展示就到這里,謝謝大家。


          主站蜘蛛池模板: 亚洲综合无码一区二区痴汉 | 亚洲一区二区三区在线观看网站| 精品视频一区二区三区在线观看| 日韩a无吗一区二区三区| 夜夜添无码一区二区三区| 国产肥熟女视频一区二区三区| 人妻体内射精一区二区三区| 一区二区免费在线观看| 国产视频一区二区| 色老头在线一区二区三区| 亚洲一区精品伊人久久伊人 | 中文字幕一区精品| 免费一本色道久久一区| 日本免费电影一区二区| 日本一区二区三区免费高清在线| 蜜臀AV在线播放一区二区三区| 国产精品电影一区二区三区| 午夜精品一区二区三区免费视频| 精品一区二区三区中文| 狠狠色综合一区二区| 日韩精品无码一区二区视频| 91在线看片一区国产| 日韩精品无码人妻一区二区三区| 久久精品无码一区二区WWW| 在线观看国产区亚洲一区成人| 日本一区二区三区不卡在线视频| 国产一区二区三区久久| 国产精品福利区一区二区三区四区| 精品少妇人妻AV一区二区| 曰韩精品无码一区二区三区| 国产av一区最新精品| 无码精品尤物一区二区三区| 日韩精品无码一区二区三区免费| 国产一区二区三区久久| 伊人久久大香线蕉av一区| chinese国产一区二区| 精品女同一区二区| 怡红院AV一区二区三区| 美女视频一区二区| 乱中年女人伦av一区二区| 精品一区二区三区3d动漫|