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 lang="en">
<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>
更多項目實戰視頻,免費分享,加入我的前端學習qun:784783012 點擊:加入
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 lang="en">
<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 class="door">
<div class="door-l"></div>
<div class="door-r"></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 lang="en">
<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 class="door">
<div class="door-l"></div>
<div class="door-r"></div>
</div>
</body>
</html>
更多項目實戰視頻,免費分享,加入我的前端學習qun:784783012 點擊:加入