web.jpg
過(guò)渡(transition)
-
transition:要過(guò)渡的屬性 時(shí)間 運(yùn)動(dòng)的形式 何時(shí)開(kāi)始 -
transition-property設(shè)置屬性 -
transition-duration持續(xù)時(shí)間 默認(rèn)是0 -
transition-timing-function速度曲線 -
transition-delay效果什么時(shí)候 開(kāi)始
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
transition: width 0.5s linear 1s ;
}
div:hover{
width: 600px;
height: 700px;;
}
</style>
transition.gif
transform 變形
2D形變
-transform可以 實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、傾斜、縮放
-
移動(dòng)平移 translate(x, y)
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
transition: all 0.5s;
}
div:hover{
transform: translateX(50%);
/* 50% 走 自己寬度的一半 */
}
</style>
110.gif
- 注意：如果
translateX是%那就是以自己盒子寬度為基準(zhǔn)，比如：50%就是便宜自己寬度的一半的距離 （%經(jīng)常和定位集合使用，比如居中問(wèn)題）
position: absolute;
left: 50%;
top: 0;
/* margin-left: -100px; */
transform: translateX(-50%);
-
縮放scale
- scale(X,Y)使元素水平方向和垂直方向同時(shí)縮放（也就是X軸和Y軸同時(shí)縮放）
- scaleX(x)元素僅水平方向縮放（X軸縮放）
- scaleY(y)元素僅垂直方向縮放（Y軸縮放）
- scale()的取值默認(rèn)的值為1，當(dāng)值設(shè)置為0.01到0.99之間的任何值，作用使一個(gè)元素縮??；而任何大于或等于1.01的值，作用是讓元素放大
div{
width: 300px;
height: 300px;
background-color: pink;
}
div img {
transition: all 0.2s;
}
div img:hover{
transform: scale(2);
}
</style>
110.gif
-
旋轉(zhuǎn) rotate(deg)
- 對(duì)元素進(jìn)行旋轉(zhuǎn)，正值為順時(shí)針，負(fù)值為逆時(shí)針；
- 注意單位是 deg 度數(shù)
<style>
div{
width: 200px;
height: 200px;
background-color: pink;
margin: 100PX auto;
transition: all 0.5s;
}
div:hover{
transform: rotate(45deg);
}
</style>
110.gif
-
transform-origin設(shè)置變換的原點(diǎn) 默認(rèn)是中心點(diǎn)- 可以是
left top right bottom方位名詞 - 可以是精確的
px
- 可以是
3D旋轉(zhuǎn)效果
-
旋轉(zhuǎn):通過(guò) rotate() 方法，元素可以實(shí)現(xiàn)旋轉(zhuǎn)效果，允許負(fù)值，元素將逆時(shí)針旋轉(zhuǎn)
- rotateX 旋轉(zhuǎn)
<style>
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:hover{
transform: rotateX(360deg);
}
</style>
rotateX.gif
- rotateY 旋轉(zhuǎn)
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:hover{
transform: rotateY(360deg);
}
rotateY.gif
- rotateZ 旋轉(zhuǎn)
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:hover{
transform: rotateZ(360deg);
}
rotateZ.gif
-
transform: translate3d(x,y,z)是translateX() translateY() translateZ()的綜合屬性
body{
perspective: 500px;
}
div{
width: 200px;
height: 200px;
margin: 100PX auto;
transition: all 1s;
background-color: #036663;
}
div:nth-child(4):hover{
transform: translate3d(100px,100px, 50px);
}
110.gif
綜合例子
<!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>
section {
width: 450px;
height: 300px;
background: url("./images/1.jpg") no-repeat;
margin: 100px auto;
border: 1px solid #000000;
position: relative;
/* 視距 */
perspective: 1000px;
/* 過(guò)渡 */
transition: all 0.5s linear;
}
.door_left,
.door_right{
width: 50%;
height: 100%;
background-color: pink;
position: absolute;
top: 0;
transition: all 0.5s linear;
}
.door_left {
left: 0;
border-right: 1px solid #000000;
/* 設(shè)置旋轉(zhuǎn)的點(diǎn) */
transform-origin: 0px center;
}
.door_right{
right: 0;
border-left: 1px solid #000000;
transform-origin:100% center;
}
.door_left::before,
.door_right::before {
content: "";
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #ffffff;
position: absolute;
top: 50%;
}
.door_left::before {
right: 5px;
/* 居中對(duì)齊 */
transform: translateY(-50%);
}
.door_right::before {
left: 5px;
transform: translateY(-50%);
}
section:hover .door_left {
transform: rotateY(-120deg);
}
section:hover .door_right{
transform: rotateY(120deg);
}
</style>
</head>
<body>
<section>
<div class="door_left"></div>
<div class="door_right"></div>
</section>
</body>
</html>
110.gif
動(dòng)畫(huà) animation
-
animation:動(dòng)畫(huà)名稱 動(dòng)畫(huà)時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開(kāi)始 播放次數(shù) 是否反方向; -
animation-name動(dòng)畫(huà)名稱 -
animation -duration完成動(dòng)畫(huà)的時(shí)間 -
animation-timing-function動(dòng)畫(huà)速度曲線 -
animation-delay動(dòng)畫(huà)延遲的時(shí)間 -
animation-iteration-count動(dòng)畫(huà)的播放次數(shù)animation-iteration-count:infinite是無(wú)線循環(huán) -
animation-direction動(dòng)畫(huà)下個(gè)周期是否逆向播放normal正常 | reverse反向運(yùn)行 | alternate先正向在反向
-
animation-play-state動(dòng)畫(huà)是否正在執(zhí)行或者暫停 -
animation-fill-mode動(dòng)畫(huà)結(jié)束 要保持的狀態(tài)
<style>
div{
width: 200px;
height: 200px;
background-color: blueviolet;
animation: chang 2s linear 0s 2 reverse;
}
/* 定義動(dòng)畫(huà) */
@keyframes chang{
from{
transform: translateX(0);
}
to {
transform: translateX(100px);
}
}
</style>
animation.gif
