温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

HTML怎么实现复杂动画和变形

发布时间:2022-03-05 15:53:51 来源:亿速云 阅读:137 作者:iii 栏目:web开发

这篇“HTML怎么实现复杂动画和变形”文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇“HTML怎么实现复杂动画和变形”文章吧。

1、复杂动画

(1)涉及到的属性:

animation-name:动画名称;

animation-duration:单次动画总时长;

animation-timing-function:时间函数;

animation-delay:播放前延时的时长;

animation-iteration-count:播放次数(具体的数字),当设置infinite时是循环播放;

animation-direction:播放顺序,其中normal是正常播放,alternate是轮流反向播放,播放次数必须在2次以上。

(2)书写方式

@keyframes 名字(自己取一个名字){   ——>定义一个动画

}

 HTML怎么实现复杂动画和变形

 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>

效果如下:

HTML怎么实现复杂动画和变形

2、盒子变形

(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怎么实现复杂动画和变形”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注亿速云行业资讯频道。

向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI