Erlo

HTML-复杂动画和变形

时间:2019-10-07 11:03   阅读:19次   来源:博客园
页面报错
点赞

1、复杂动画

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         #zs# 动画名称 #fzs#
19         animation-name: demo;
20         #zs# 动画时长 #fzs#
21         animation-duration: 5s;
22         #zs# 动画运行速度 #fzs#
23         animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
24         #zs# 播放前延迟的时长 #fzs#
25         animation-delay: 3s;
26         #zs# 播放次数,这里写的时循环播放,可以写具体数字 #fzs#
27         animation-iteration-count: infinite;
28         #zs# 播放顺序,这里写的时轮流反向播放,可以写normal正常播放 #fzs#
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>

效果如下:

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>

变形效果如下:

评论留言

还没有评论留言,赶紧来抢楼吧~~

Erlo大厅()

* 这里是“吐槽厅”,所有人可看,只保留当天信息。

  • Erlo.vip2019-10-24 02:01:22Hello、欢迎使用吐槽厅,这里是个吐槽的地方。
  • 返回顶部