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

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

在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);
}