HTML实训之幽灵按钮

最新推荐文章于 2021-06-24 17:21:57 发布

原创最新推荐文章于 2021-06-24 17:21:57 发布 · 364 阅读

1 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

32 篇文章

订阅专栏

博客提及了HTML文件和CSS文件，这两者是前端开发的重要组成部分，HTML用于构建网页结构，CSS用于设计网页样式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在这里插入图片描述
HTML文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 从外部引入样式文件 -->
		<link rel="stylesheet" href="index.css">
	</head>
	<body>
		<div class="container">
			<div class="item">
				<img src="img/mission.png">
				<div class="btn">
					MISSION
					<img src="img/allow.png" >
					<!-- 之后出现的四个边界线 -->
					<div class="line top"></div>
					<div class="line right"></div>
					<div class="line bottom"></div>
					<div class="line left"></div>
				</div>
			</div>
			<div class="item">
				<img src="img/play.png">
				<div class="btn">
					PLAY
					<img src="img/allow.png" >
					<div class="line top"></div>
					<div class="line right"></div>
					<div class="line bottom"></div>
					<div class="line left"></div>
				</div>
			</div>
			<div class="item">
				<img src="img/touch.png">
				<div class="btn">
					TOUCH
					<img src="img/allow.png" >
					<div class="line top"></div>
					<div class="line right"></div>
					<div class="line bottom"></div>
					<div class="line left"></div>
				</div>
			</div>
		</div>
	</body>
</html>

CSS文件

/*将默认的边界去除*/
* {
	padding: 0;
	margin: 0;
}
/*消除ul标签默认的格式，即将每个li前面的小圆点消除*/
ul {
	list-style: none;
}
/*消除超链接格式的下划线，并将字体改为black色*/
a {
	text-decoration: none;
	color: black;
}

html {
	background: #000000;
}

.container {
	width: 900px;
	height: 300px;
	margin: 250px auto;/*居中*/
}

.container .item {
	width: 300px;
	height: 300px;
	float: left;
	text-align: center;
}

.container .item>img {
	height: 160px;
	transition: all 0.5s;
}
.container .item>img:hover {
	transform: rotate(360deg) scale(1.2);/*旋转360°，并变大1.2倍*/
}

.container .item .btn {
	margin: 30px auto; height: 50px; width: 220px;
	text-align: left; text-indent: 30px; font-size: 16px; font-family: "microsoft yahei";
	font-weight: bolder; line-height: 50px; color: green;
	position: relative; /*position设置为relative，表示内部的元素以当前元素为参考系进行坐标定位*/
}
.container .item .btn img {
	width: 25px; height: 20px; float: right; margin-right: 50px; margin-top: 15px;
	transition: all 0.5s;
}
/* 当鼠标划入.btn元素时，.btn元素的img子元素产生作用*/
.container .item .btn:hover>img {
	margin-right: 20px;
}
/* 当鼠标划入.btn元素时，.btn元素的.top子元素产生作用*/
.container .item .btn:hover>.top{
	width: 220px; left: 0;
}
.container .item .btn:hover>.right{
	height: 50px; top: 0;
}
.container .item .btn:hover>.bottom{
	width: 220px; left: 0;
}
.container .item .btn:hover>.left{
	height: 50px; top: 0;
}
.line {
	background: white;
	position: absolute; /*使用坐标定位的元素，必须将position设置为absolute*/
	transition: all 0.5s;
}
.top {
	width: 0; height: 1px;  left: -220px; /*坐标*/ top: 0; /*坐标*/
}
.right {
	width: 1px; height: 0;  left: 220px; top: -50px;
}
.bottom {
	width: 0; height: 1px;  left: 440px; top: 50px;
}
.left {
	width: 1px; height: 0;  left: 0; top: 100px;
}