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

最新推荐文章于 2024-07-19 15:50:46 发布

VIV-

最新推荐文章于 2024-07-19 15:50:46 发布

阅读量1.3k

点赞数

文章标签： css 动画 html5 前端

本文链接：https://blog.csdn.net/weixin_60361911/article/details/123322423

版权

新建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);
}

VIV-

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
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"/&gt...
复制链接

扫一扫