溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這期內(nèi)容當(dāng)中小編將會(huì)給大家?guī)碛嘘P(guān)使用CSS怎么實(shí)現(xiàn)變形、過渡與動(dòng)畫，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。
1、過渡 transition
過渡屬性用法： transition :ransition-property transition-duration transition-timing-function transition-delay
可以一起指定也可以分別單獨(dú)指定
transition-property: 是要過渡的屬性（如width，height），all是所有都改變。
transition-duration：花費(fèi)的時(shí)間，單位為s或ms
transition-timing-function：是指定動(dòng)畫類型（運(yùn)動(dòng)區(qū)曲線），運(yùn)動(dòng)曲線有以下幾種
ease=>逐漸慢下來（默認(rèn)值） linear=>勻速 ease-in=>加速 ease-out=>減速 ease-in-out=>先加速在減速
transition-delay 延遲時(shí)間，單位為s或ms
<!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>
div {
width: 100px;
height: 200px;
background-color: aqua;
transition: width 2s ease-in-out 0.5s;
}
div:hover {
width: 500px;
}
</style>
</head>
<body>
<div></div>
</body>
</html>結(jié)果如下，當(dāng)鼠標(biāo)上上去后變化不再是瞬間完成，而是過渡完成。
2、變形 transform
(1)、2D變形
（a）移動(dòng) translate(x,y)
移動(dòng)可以指定像素值也可以指定百分比， 注意：指定百分比是自身大小的百分比，因此可以用于設(shè)置盒子定位時(shí)的居中對齊（在設(shè)置left：50%后再移動(dòng)自身的-50%即可）。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
background-color: aqua;
transition: all 2s;
}
div:active {
transform: translate(200px, 200px);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
點(diǎn)擊之后盒子進(jìn)行了移動(dòng)。用于讓定位的盒子居中的代碼入下
<!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>
.fa {
width: 300px;
height: 300px;
background-color: aqua;
transition: all 0.5s;
position: relative;
}
.son {
background-color: red;
position: absolute;
left: 50%;
top: 50%;
width: 100px;
height: 100px;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>結(jié)果為
（b）縮放 scale（x，y）
x,y設(shè)置大于1 是放大，小于1 是縮小。
<!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>
div {
width: 100px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
}
div:hover {
transform: scale(0.5, 2);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
（c）旋轉(zhuǎn) rotate(x deg)
x指定度數(shù)值，正數(shù)是順時(shí)針旋轉(zhuǎn)，負(fù)數(shù)是逆時(shí)針旋轉(zhuǎn)。
旋轉(zhuǎn)可以使用 transform-origin 指定旋轉(zhuǎn)中心點(diǎn)，transform-origin 給left top right bottom 也可以指定具體的像素值。
<!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>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
div:hover {
transform: rotate(120deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（d）傾斜 skew（x deg ,y deg）
x,y分別指定傾斜在x，y方向上的角度，可以為負(fù)數(shù)。y值不寫默認(rèn)為0。
<!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>
div {
width: 100px;
height: 100px;
background-color: aqua;
border: 1px solid red;
transition: all 1s;
margin: 200px auto;
}
div:hover {
transform: skew(30deg, 20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（2）3D變形
（a）旋轉(zhuǎn)（rotateX,rotateY,rotateZ）
3D旋轉(zhuǎn)與2D類似，只不過一個(gè)是基于二位坐標(biāo)一個(gè)是基于三維坐標(biāo)。三個(gè)值可以同時(shí)指定也可以單獨(dú)指定。
<!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>
div {
width: 200px;
height: 100px;
background-color: aqua;
margin: 200px auto;
transition: all 2s;
transform-origin: bottom left;
}
div:hover {
transform: rotateX(120deg);
/* transform: rotateY(120deg); */
/* transform: rotateZ(120deg); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>
（b）移動(dòng)（translateX，translateY，translateZ）
3D移動(dòng)對于xy方向上的移動(dòng)與2d移動(dòng)一致。只有z方向上的移動(dòng)不一樣。Z方向上的移動(dòng)在現(xiàn)實(shí)生活中是距離變遠(yuǎn)，距離變近。因此在網(wǎng)頁中顯示結(jié)果是變近則變大，變遠(yuǎn)則變小。
要使Z放線上移動(dòng)生效首先要設(shè)置perspective（眼睛距離屏幕的距離）;
<!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>
body {
perspective: 1000px;
/* 數(shù)值越小說明眼睛離的越近 */
}
div {
width: 200px;
height: 200px;
background-color: aqua;
transition: all 0.5s;
margin: 200px auto;
}
div:hover {
transform: translate3d(0, 0, 200px);
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
3、動(dòng)畫 animation
（1）、 animation: animation- name || animation- duration|| animation- timing-function || animation- delay || animation- iteration-count|| animation- direction|| animation- fill-mode;
animation-name:動(dòng)畫名稱（自己使用@keyframes 定義的動(dòng)畫）
animation-duration：持續(xù)時(shí)間
animation-timing-function：運(yùn)動(dòng)曲線，與過渡的運(yùn)動(dòng)曲線類似。
animation-delay：延遲時(shí)間
animation-iteration-count：循環(huán)次數(shù) （infinite 是無限循環(huán)）
animation-direction：是否反向（動(dòng)畫是否是由結(jié)尾倒開是倒著放的）
animation-fill-mode：設(shè)置在動(dòng)畫播放之外的狀態(tài)（結(jié)束時(shí)的狀態(tài)）none | forwards（設(shè)為結(jié)束時(shí)的狀態(tài)）| backwards(設(shè)為開始時(shí)的狀態(tài))|both（設(shè)為開始或結(jié)束時(shí)的狀態(tài)）
animation-play-state：設(shè)置動(dòng)畫狀態(tài) running 開始|paused 暫停
（2）、@keyframes 自定義動(dòng)畫
格式如下
@keyframes 動(dòng)畫名稱 {
from{ 開始} 0%
to{ 結(jié)束 } 100%
}可以用 from...to 來指定動(dòng)畫過程，也可以用0%~100%指定動(dòng)畫過程。
<!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>
div {
width: 100px;
height: 100px;
background-color: aqua;
/* animation: 動(dòng)畫名稱 動(dòng)畫時(shí)間 運(yùn)動(dòng)曲線 何時(shí)開始 播放次數(shù) 是否反方向 */
animation: move 5s linear 3;
}
@keyframes move {
0% {
transform: translate3d(0, 0, 0);
}
25% {
transform: translate3d(400px, 0, 0);
}
50% {
transform: translate3d(400px, 300px, 0);
}
75% {
transform: translate3d(0, 300px, 0);
}
100% {
transform: translate3d(0, 0, 0);
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>上述就是小編為大家分享的使用CSS怎么實(shí)現(xiàn)變形、過渡與動(dòng)畫了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼