我是靠谱客的博主 土豪刺猬,这篇文章主要介绍hbuilder---制作加载环和加载小火箭动画,现在分享给大家,希望可以做个参考。

新建html文件,在body中添加两个div标签(一个为加载环,一个嵌套添加图片),新建css文件,给html文件添加link链接;

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./css/homework.css"/> </head> <body> <!-- 1.加载环 --> <div id="loading"> </div> <!-- 2.加载火箭 --> <div id="photo"> <img src="./img/xiaofeiji.png" > </div> </body> </html>

在css文件中制作加载环:

先建立一个正方形边框,border-radius:50%;将四个角变为圆角,50%的效果是圆;

border-bottom:粗细  线型  颜色;(三个属性值顺序不定)

添加animation动画,详解见代码

如何改变小火箭的尺寸,如何垂直居中对齐:

先给photo设置一定大小的边框;垂直居中:margin:0 auto;

把图片(也就是img),先转换为块级元素:display:block;

再将其放入photo边框:width:100%;

给图片添加鼠标划动效果用hover:详解见代码。

复制代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
*{ padding: 0; margin: 0; } #loading{ width: 150px; height: 150px; border: 2px solid red; margin: 50px auto; border-radius: 50% ; border-bottom: 2px solid #00FFFF; /* 动画属性 */ /* animation: 动画帧的名字 动画的执行时间 动画执行的次数(infinite无限) 动画执行的速度曲线(linear匀速); */ animation: shiyan 1s infinite linear; } @keyframes shiyan{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } #photo{ width: 200px; height: 200px; /* border: 2px solid red; */ margin: 0 auto; } #photo img{ display: block; width: 100%; transition: all 1s; } /* #photo img:hover{ 注:鼠标划动效果加给谁,过渡加给谁 注意:不能分开写,否则上面的效果会被覆盖 transform: translateY(-235px) scale(0.6,0.6) rotate(180deg); } */ #photo img:hover{ transform: translateY(-235px) scale(0.6,0.6) rotate(180deg); }

最后

以上就是土豪刺猬最近收集整理的关于hbuilder---制作加载环和加载小火箭动画的全部内容,更多相关hbuilder---制作加载环和加载小火箭动画内容请搜索靠谱客的其他文章。

本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
点赞(76)

评论列表共有 0 条评论

立即
投稿
返回
顶部