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>
更多專案實戰視訊,免費分享,加入我的前端學習q\u\n\:731771211
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>
這裡推薦一下我的前端學習交流群:731771211,裡面都是學習前端的,如果你想製作酷炫的網頁,想學習程式設計。從最基礎的HTML+CSS+JS【炫酷特效,遊戲,外掛封裝,設計模式】到移動端HTML5的專案實戰的學習資料都有整理,送給每一位前端小夥伴,有想學習web前端的,或是轉行,或是大學生,還有工作中想提升自己能力的,正在學習的小夥伴歡迎加入。 點選: 加入
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69901074/viewspace-2305585/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- CSS 例項之滾動的圖片欄CSS
- CSS 例項之翻轉圖片CSS
- VUE例項:使用 CSS Filter 處理圖片VueCSSFilter
- CSS 例項之開啟大門CSS
- js圖片切換例項JS
- CSS3滑鼠懸浮圖片前後翻轉CSSS3
- CSS基礎篇–CSS3圖片翻轉動畫技術詳解CSSS3動畫
- 頁面圖片自動滾動
- jQuery圖片無縫滾動效果jQuery
- 開源圖片工具箱(Img Toolbox) 格式轉換 新增水印 圖片壓縮 圖片裁剪 圖片旋轉 圖片縮放
- python批量ppt轉圖片,pdf轉圖片,word轉圖片指令碼Python指令碼
- 滑鼠拖動圖片,禁止在新視窗中開啟圖片
- android短影片開發,圖片視差滾動Android
- CSS3圖片旋轉效果CSSS3
- 使用 JavaScript 壓縮和翻轉圖片JavaScript
- 【CSS】圖片動畫特效(相框)CSS動畫特效
- Flutter 圖片裁剪旋轉翻轉編輯器Flutter
- CSS背景圖片集中在同一個圖片CSS
- 滑鼠懸浮圖片實現翻轉效果
- [外掛擴充套件]幻燈片 | 滾動圖片 外掛套件
- 圖片格式轉換,JPG圖片轉換成PDF
- 左右帶有按鈕圖片水平滾動
- pdf轉圖片
- ppt轉圖片
- 圖片怎麼轉換成PDF,圖片轉PDF教程
- 5種PHP生成圖片驗證碼例項PHP
- 【例項】使用GD庫生成圖片驗證碼
- jQuery 圖片列表垂直間歇無縫滾動jQuery
- JavaScript圖片橫向無縫滾動詳解JavaScript
- js實現圖片上下滾動background-positionJS
- JQuery實現圖片輪播無縫滾動jQuery
- CSS · 兩種背景圖片CSS
- CSS圖片濾鏡灰度CSS
- 圖片輪播--純cssCSS
- CSS圓形圖片效果CSS
- CSS 來佈局圖片CSS
- 怎麼轉換圖片格式並壓縮圖片
- fastadmin 新增欄位記圖片欄位AST