CSS例項：翻轉圖片、滾動圖片欄、開啟大門

智雲程式設計發表於2019-01-04
CSS

CSS 翻轉圖片主要用到的技術除了3D翻轉和定位 ，還用到了一個屬性 backface-visibility：visable|hidden;該屬性主要是用來設定元素背面是否可見。

效果圖如下：

CSS例項：翻轉圖片、滾動圖片欄、開啟大門

具體的步驟如下：

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>

更多專案實戰視訊，免費分享，加入我的前端學習q\u\n\：731771211

CSS 滾動的圖片欄

網站上可以經常看到有一些圖片進行持續不斷的滾動，這個效果可以通過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旋轉和定位技術。

效果如下：

CSS例項：翻轉圖片、滾動圖片欄、開啟大門

具體步驟如下：

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>

這裡推薦一下我的前端學習交流群：731771211，裡面都是學習前端的，如果你想製作酷炫的網頁，想學習程式設計。從最基礎的HTML+CSS+JS【炫酷特效，遊戲，外掛封裝，設計模式】到移動端HTML5的專案實戰的學習資料都有整理，送給每一位前端小夥伴，有想學習web前端的，或是轉行，或是大學生，還有工作中想提升自己能力的，正在學習的小夥伴歡迎加入。 點選： 加入


來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/69901074/viewspace-2305585/，如需轉載，請註明出處，否則將追究法律責任。

相關文章