溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
（1）涉及到的屬性：
animation-name：動畫名稱；
animation-duration：單次動畫總時長；
animation-timing-function：時間函數；
animation-delay：播放前延時的時長；
animation-iteration-count：播放次數（具體的數字），當設置infinite時是循環播放；
animation-direction：播放順序，其中normal是正常播放，alternate是輪流反向播放，播放次數必須在2次以上。
（2）書寫方式
@keyframes 名字（自己取一個名字）{ ——>定義一個動畫}
<!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>復雜動畫練習</title>
</head>
<style>
.box {
width: 200px;
height: 200px;
background-color: blueviolet;
border: solid black;
position: relative;
top: 0;
/* 動畫名稱 */
animation-name: demo;
/* 動畫時長 */
animation-duration: 5s;
/* 動畫運行速度 */
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
/* 播放前延遲的時長 */
animation-delay: 3s;
/* 播放次數，這里寫的時循環播放，可以寫具體數字 */
animation-iteration-count: infinite;
/* 播放順序，這里寫的時輪流反向播放，可以寫normal正常播放 */
animation-direction: alternate;
}
@keyframes demo {
from {
top: 0;
border-radius: 0;
}
20% {
top: 100px;
left: 100px;
border-radius: 30px;
}
50% {
top: 200px;
left: 100px;
border-radius: 30px
}
to {
top: 400px;
left: 400px;
border-radius: 50%
}
}
</style>
<body>
<div class="box">
動畫練習
<!-- <img src="img/2010011712541759.jpg" alt=""> -->
</div>
</body>
</html>
web前端開發學習Q-q-u-n： 731771211，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法（詳細的前端項目實戰教學視頻）效果如下：
（1） 變形：通過變形可以改變盒子的視覺效果，變形不會改變盒子原本的位置和尺寸，因此不會對其他元素造成影響。
（2） 變形的類型
Translate（移動）
Scale（縮放，1以下是縮小，1以上是擴大）
Skew（傾斜，單位deg）
Rotate（旋轉，默認是沿著Z軸旋轉，單位deg）
（3） 定義原點
Transform-origin：設置盒子的中心點。
（4） 其他屬性
背面可見性：backface-visibility
visible：默認值，背面可見
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>盒子變形</title>
</head>
<style>
.box {
width: 260px;
height: 260px;
position: relative;
}
.zheng,
.fan {
width: 260px;
height: 260px;
font-size: 26px;
border: solid black;
color: white;
text-align: center;
line-height: 260px;
position: absolute;
top: 0;
left: 0;
transition: all 1s;
backface-visibility: hidden;
}
.zheng {
background-color: blueviolet;
z-index: 2;
}
.fan {
background-color: green;
transform: rotateY(-180deg) rotateZ(-180deg);
}
.box:hover .zheng {
transform: rotateY(180deg) rotateZ(180deg);
}
.box:hover .fan {
transform: rotateY(0deg) rotateZ(0deg);
}
</style>
<body>
<div class="box">
<div class="zheng">正面</div>
<div class="fan">反面</div>
</div>
</body>
</html>
學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習方法
（從零基礎開始到前端項目實戰教程，學習工具，職業規劃）變形效果如下：
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
