整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
看一下這樣的效果。這里展示了四張圖片，每一個圖片都有一個倒影。當(dāng)鼠標(biāo)旋轉(zhuǎn)每個圖片的時候倒影會消失，并且把圖片放大顯示。接下來跟著我一起完成這樣的效果制作。
·這里展示了一個空白的HTML模板，來設(shè)置一下它的背景顏色。
·bargain設(shè)置為邊距為零，內(nèi)邊距也為零，背景顏色為黑色。
·再添加一個INMAX標(biāo)簽，添加上圖片。這個圖片當(dāng)前是沒有任何效果的，就直接的展示出來了。
·給圖片添加一個樣式，設(shè)置一個寬度為一百五十像素。這個時候發(fā)現(xiàn)這個圖片是靠左上角的，設(shè)置一個next布局body。
·再設(shè)置一下它的高度為一百，根據(jù)這個四口來設(shè)置高度，寬度也是。現(xiàn)在就可以把它在窗口的頁面上進行劇終了。
·再來設(shè)置一下它的圖片樣式。
·order top left，左上角的圓角設(shè)置成十像素，右上角也設(shè)置成十像素的圓角。
·這個時候遇到一個關(guān)鍵的問題，怎么樣去把設(shè)置成一個倒影，增加一個倒影？它有這么一個屬性，這里有設(shè)置一下它的倒影，往下的倒影讓倒影離開主要圖片的五個像素的間距，間距也就是這里的縫隙。
·再設(shè)置一下顏色，這個顏色來設(shè)置一個漸變的，這個時候是空白的，這樣子就產(chǎn)生了這樣的倒影。但是倒影還是太高了一點，可以給透明加一個，如果不夠可以繼續(xù)加，這樣子就差不多了，設(shè)置成八十暗一點，這樣子就有了一個倒影。
·再設(shè)置一下鼠標(biāo)懸停，懸停是沒有效果的，可以給英美的標(biāo)簽添加一個鼠標(biāo)懸停的效果。
·然后是它的放大，放大為一點五倍，這個時候放大縮小是很生硬的，可以在這里加上零點五秒的過渡時間，但倒影還沒有消失，希望它的倒影消失一下。
·可以繼續(xù)設(shè)置一下屬性，它有一個on set，也就是恢復(fù)到默認(rèn)設(shè)置。這個時候再來看一下，再給它添加外發(fā)光的效果，這樣就出現(xiàn)了這個效果。
·給元素多復(fù)制幾個，這個時候再來看一下，但它是挨在一起的，可以給元素設(shè)置一個外邊距，上下為零，左右為十像素，可以設(shè)置成五像素。
·這個時候再來看，這個時候會發(fā)現(xiàn)后邊的一張圖片會遮住前面的那張圖片，但這不是想要的，可以在over的時候把英美解的元素的層級往上走一下，這樣子設(shè)置到最高，就展現(xiàn)到最前面，外發(fā)光效果還是太小小了點，這樣子看起來就好看一些。
·如果圖片放大了，最好是把左下角也設(shè)置成圓角，也可以這里設(shè)置一下。再來看一下，這樣子是不是放大的時候全為圓角了。
今天的展示就到這里，謝謝大家。
擊右上方紅色按鈕關(guān)注“web秀”，讓你真正秀起來
離2019年春節(jié)越來越近了，該努力的都的努力一把了。是學(xué)生的，好好努力一把，希望您學(xué)業(yè)有成；是老板的，好好 努力一把，祝您公司早日上市；是單身的，好好努力一把，早日找個好老婆。下面言歸正傳：
會PS的應(yīng)該都知道如何制作倒影： 1、crtl+j復(fù)制圖層 2、選中新圖層，垂直180旋轉(zhuǎn)，然后拉到一個圖層底部對應(yīng) 3、對復(fù)制圖層設(shè)置漸變色
今天我們就用CSS3制作圖片倒影，原理和PS一樣，下面我們一步一步來。
<div class="img1 alt=""></div>
<div class="img2 alt=""></div>
...
*{
padding: 0;
margin: 0;
}
div{
display: block;
width: 500px;
height: 281px;
background: url('./600-31080.png');
}
CSS3實現(xiàn)美美噠的圖片倒影效果
添加樣式，transform 旋轉(zhuǎn)
.img2{
transform: scaleY(-1);
}
CSS3實現(xiàn)美美噠的圖片倒影效果
設(shè)置漸變，不能直接在img2上面添加樣式了，必須用另外一個層來蓋在上面，所以我們就用偽元素來處理這個效果
.img2:before{
content: '';
display: block;
width: 100%;
height: 100%;
transform: scaleY(-1);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.2, rgb(255,255,255)),
color-stop(1, rgba(255,255,255,0.3))
);
}
CSS3實現(xiàn)美美噠的圖片倒影效果
倒影和原圖增加立體感，我們可以使倒影圖傾斜一個角度，css3中，提供transform: skew(30deg)), 30deg是角度。由于傾斜，所以需要向右位移一下margin-left。
.img2{
transform: scaleY(-1) skew(-30deg);
margin-left: 81px;
}
CSS3實現(xiàn)美美噠的圖片倒影效果
是不是發(fā)現(xiàn)，實現(xiàn)上面和PC一致，不過一個是用代碼實現(xiàn)的，一個只需要點擊操作就OK，原理一樣。 主要通過transform的scale、skew屬性，和背景gradient漸變實現(xiàn)圖片倒影漸變效果。
有興趣的可以研究《通過transform scale制作一個正方體效果》哦，行動后才知道自己的能力，不要懼怕，而邁不開第一步，相信自己可以。
CSS3最容易混淆屬性transition transform animation translate
Jquery和CSS3輕松實現(xiàn)放大鏡效果
奇技淫巧——CSS 實現(xiàn)波浪效果
喜歡小編的點擊關(guān)注，了解更多知識！
源碼地址請點擊下方“了解更多”
果圖如下：
代碼展示如下：
<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è)定圖像會被調(diào)整的色環(huán)角度值。值為0deg，則圖像無變化。
若值未設(shè)置，默認(rèn)值是0deg。該值雖然沒有最大值，超過360deg的值相當(dāng)于又繞一圈。
-webkit-box-reflect
是webkit內(nèi)核瀏覽器的一個私有屬性，用來對block(塊級)元素或者行內(nèi)塊元素（img,input）制作一個鏡像的效果
?? above：指定倒影在對象的上邊
??below：指定倒影在對象的下邊
?? left：指定倒影在對象的左邊
?? right：指定倒影在對象的右邊
?? offset：倒影與對象之間的間隔，可以為負(fù)值。
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
