溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹CSS如何翻轉圖片、滾動圖片欄、打開大門效果，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
CSS 翻轉圖片主要用到的技術除了3D翻轉和定位 ，還用到了一個屬性 backface-visibility：visable|hidden;該屬性主要是用來設定元素背面是否可見。
效果圖如下：
具體的步驟如下：
1、寫出頁面主體，
<div> <img src="Images/b.jpg" alt=""> <img src="Images/c.jpg" alt=""> </div>
2、通過定位使兩張圖片疊加在一起
div img { width: 250px; height: 170px; position: absolute; top: 0; left: 0; transition: all 1s; }3、設置第一張圖片背面不可見
div img:first-child { z-index: 1; backface-visibility: hidden; }4、添加旋轉180度
div:hover img { transform: rotateY(180deg); }完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> /* backface-visibility */ div { width: 250px; height: 170px; margin: 100px auto; position: relative; } div img { width: 250px; height: 170px; position: absolute; top: 0; left: 0; transition: all 1s; } div img:first-child { z-index: 1; backface-visibility: hidden; } div:hover img { transform: rotateY(180deg); } </style> </head> <body> <div> <img src="Images/b.jpg" alt=""> <img src="Images/c.jpg" alt=""> </div> </body> </html>CSS 滾動的圖片欄
網站上可以經常看到有一些圖片進行持續不斷的滾動，這個效果可以通過css的動畫效果來實現。
主要原理是通過動畫向左移動。
首先給出兩組一樣的圖片（同一行上），讓整體圖片向左移動一組圖片的長度，
這樣在動畫結束時會迅速還原到原來位置，而此時正好與第二組圖片交替，看起來就像是一組圖片在不斷循環向左滾動。
具體步驟如下：
1、設置主體代碼各處兩組一樣的圖片
<nav> <ul> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> </ul> </nav>
2、設置nav的大小，寬度為一組圖片相加的寬度，高度為圖片的高度。
nav { width: 750px; height: 170px; border: 1px solid red; margin: 100px auto; }3、設置ul大小，寬度為nav的兩倍，高度與nav相同，并指定動畫相關屬性
ul { width: 200%; height: 100%; animation: picmove 5s linear infinite forwards; }4、定義動畫，主要是向左移動一組圖片的長度
@keyframes picmove { from { transform: translate(0); } to { transform: translate(-750px); } }5、增加鼠標懸停，動畫暫停的效果
ul:hover { animation-play-state: paused; }6、最后給nav 增加 overflow：hidden 使得超出的部分隱藏，這樣整體一組滾動的圖片欄就做好了
完整代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> * { margin: 0; padding: 0; } ul { list-style: none; } nav { width: 750px; height: 170px; border: 1px solid red; margin: 100px auto; overflow: hidden; } ul { width: 200%; height: 100%; animation: picmove 5s linear infinite forwards; } @keyframes picmove { from { transform: translate(0); } to { transform: translate(-750px); } } img { width: 250px; height: 170px; float: left; } ul:hover { animation-play-state: paused; } </style> </head> <body> <nav> <ul> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> <li><img src="Images/1 (2).jpg" alt=""></li> <li><img src="Images/2 (2).jpg" alt=""></li> <li><img src="Images/3 (2).jpg" alt=""></li> </ul> </nav> </body> </html>CSS 打開大門
主要運用到了3D旋轉和定位技術。
效果如下：
具體步驟如下：
1、首先在頁面主體加三個很簡單的div標簽：
<div> <div></div> <div></div> </div>
2、給外層盒子（.door） 加上基本的屬性、背景、視距以及相對定位（子盒子要用到絕對定位，所以父盒子最好 加上相對定位）。
.door { width: 450px; height: 450px; border: 1px solid #000000; margin: 100px auto; background: url(Images/men.png) no-repeat; background-size: 100% 100%; position: relative; perspective: 1000px; }3、給左右的門設置相關屬性，這里給出左盒子的 相關屬性。右盒子只需將定位改為右邊距離為0，以及將旋轉軸改為右側即可。
.door-l { width: 50%; height: 100%; background-color: brown; position: absolute; top: 0; transition: all 0.5s; left: 0; border-right: 1px solid #000000; transform-origin: left; }4、添加門上的 小圓環，在這里是使用偽元素 before 進行添加的。
（1）、設置大小與邊框
（2）、設置border-radius 為50% 讓其變成圓形。
（3）、設置定位 垂直居中并靠里面有一定距離。
.door-l::before { content: ""; border: 1px solid #000000; width: 20px; height: 20px; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); right: 5px; }5、最后設置旋轉度數，我這里是設置了120度（注意度數的正負代表旋轉方向）
.door:hover .door-l { transform: rotateY(-120deg); }完整代碼如下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .door { width: 450px; height: 450px; border: 1px solid #000000; margin: 100px auto; background: url(Images/men.png) no-repeat; background-size: 100% 100%; position: relative; perspective: 1000px; } .door-l, .door-r { width: 50%; height: 100%; background-color: brown; position: absolute; top: 0; transition: all 0.5s; } .door-l { left: 0; border-right: 1px solid #000000; transform-origin: left; } .door-r { right: 0; border-left: 1px solid #000000; transform-origin: right; } .door-l::before, .door-r::before { content: ""; border: 1px solid #000000; width: 20px; height: 20px; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%); } .door-l::before { right: 5px; } .door-r::before { left: 5px; } .door:hover .door-l { transform: rotateY(-120deg); } .door:hover .door-r { transform: rotateY(120deg); } </style> </head> <body> <div> <div></div> <div></div> </div> </body> </html>以上是“CSS如何翻轉圖片、滾動圖片欄、打開大門效果”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
