溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇“HTML怎么實現復雜動畫和變形”文章的知識點大部分人都不太理解，所以小編給大家總結了以下內容，內容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“HTML怎么實現復雜動畫和變形”文章吧。
（1）涉及到的屬性：
animation-name：動畫名稱；
animation-duration：單次動畫總時長；
animation-timing-function：時間函數；
animation-delay：播放前延時的時長；
animation-iteration-count：播放次數（具體的數字），當設置infinite時是循環播放；
animation-direction：播放順序，其中normal是正常播放，alternate是輪流反向播放，播放次數必須在2次以上。
（2）書寫方式
@keyframes 名字（自己取一個名字）{ ——>定義一個動畫
}
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>復雜動畫練習</title>
9 </head>
10 <style>
11 .box {
12 width: 200px;
13 height: 200px;
14 background-color: blueviolet;
15 border: solid black;
16 position: relative;
17 top: 0;
18 /* 動畫名稱 */
19 animation-name: demo;
20 /* 動畫時長 */
21 animation-duration: 5s;
22 /* 動畫運行速度 */
23 animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
24 /* 播放前延遲的時長 */
25 animation-delay: 3s;
26 /* 播放次數，這里寫的時循環播放，可以寫具體數字 */
27 animation-iteration-count: infinite;
28 /* 播放順序，這里寫的時輪流反向播放，可以寫normal正常播放 */
29 animation-direction: alternate;
30 }
31
32 @keyframes demo {
33 from {
34 top: 0;
35 border-radius: 0;
36 }
37 20% {
38 top: 100px;
39 left: 100px;
40 border-radius: 30px;
41 }
42 50% {
43 top: 200px;
44 left: 100px;
45 border-radius: 30px
46 }
47 to {
48 top: 400px;
49 left: 400px;
50 border-radius: 50%
51 }
52 }
53 </style>
54
55 <body>
56 <div class="box">
57 動畫練習
58 <!-- <img src="img/2010011712541759.jpg" alt=""> -->
59 </div>
60 </body>
61
62 </html>效果如下：
（1） 變形：通過變形可以改變盒子的視覺效果，變形不會改變盒子原本的位置和尺寸，因此不會對其他元素造成影響。
（2） 變形的類型
Translate（移動）
Scale（縮放，1以下是縮小，1以上是擴大）
Skew（傾斜，單位deg）
Rotate（旋轉，默認是沿著Z軸旋轉，單位deg）
（3） 定義原點
Transform-origin：設置盒子的中心點。
（4） 其他屬性
背面可見性：backface-visibility
visible：默認值，背面可見
hidden：背面不可見
1 <!DOCTYPE html>
2 <html lang="en">
3
4 <head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <meta http-equiv="X-UA-Compatible" content="ie=edge">
8 <title>盒子變形</title>
9 </head>
10 <style>
11 .box {
12 width: 260px;
13 height: 260px;
14 position: relative;
15 }
16
17 .zheng,
18 .fan {
19 width: 260px;
20 height: 260px;
21 font-size: 26px;
22 border: solid black;
23 color: white;
24 text-align: center;
25 line-height: 260px;
26 position: absolute;
27 top: 0;
28 left: 0;
29 transition: all 1s;
30 backface-visibility: hidden;
31 }
32
33 .zheng {
34 background-color: blueviolet;
35 z-index: 2;
36 }
37
38 .fan {
39 background-color: green;
40 transform: rotateY(-180deg) rotateZ(-180deg);
41 }
42
43 .box:hover .zheng {
44 transform: rotateY(180deg) rotateZ(180deg);
45 }
46
47 .box:hover .fan {
48 transform: rotateY(0deg) rotateZ(0deg);
49 }
50 </style>
51
52 <body>
53 <div class="box">
54 <div class="zheng">正面</div>
55 <div class="fan">反面</div>
56 </div>
57 </body>
58
59 </html>以上就是關于“HTML怎么實現復雜動畫和變形”這篇文章的內容，相信大家都有了一定的了解，希望小編分享的內容對大家有幫助，若想了解更多相關的知識內容，請關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
