hbuilder---制作加载环和加载小火箭动画

57 阅读 0 评论 38 点赞

我是靠谱客的博主土豪刺猬，最近开发中收集的这篇文章主要介绍hbuilder---制作加载环和加载小火箭动画，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

新建html文件，在body中添加两个div标签（一个为加载环，一个嵌套添加图片），新建css文件，给html文件添加link链接；

<!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:详解见代码。

*{
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);
}