HTML5定位实例

最新推荐文章于 2025-05-12 10:53:06 发布

晴风雪舞

最新推荐文章于 2025-05-12 10:53:06 发布

阅读量798

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML 文章标签： html5

本文链接：https://blog.youkuaiyun.com/swiftwwj/article/details/54615271

HTML 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用HTML5实现的幽灵按钮效果，重点探讨了定位技术。当鼠标悬停在'play'按钮上时，箭头会向右移动，四条线滑入形成边框。

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

幽灵按钮—知识点：定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			html,body{
				margin: 0;
				padding: 0;
				/*width: 100%;
				height: 100%;*/
				background: black;
			}
			#box{
				width: 930px;
				height: 400px;
				margin: 0 auto;
				background: black;
			}
			#box div{
				width: 300px;
				height: 400px;
				float: left;
				/*background: gray;*/
			}
			#box_center,#box_right{
				margin-left: 15px;
			}
			#box div i{
				/*display：block 把行级元素转换为块级元素*/
				display: block;
				/*这里可以用百分比是因为父元素有固定的值*/
				width: 100%;
				height: 70%;
				/*过渡时间 1.5s*/
				transition: 1.5s;
			}
			.mission{
				background: url(img/mission.png) no-repeat center;
			}
			.play{
				background: url(img/play.png) no-repeat center;
			}
			.touch{
				background: url(img/touch.png) no-repeat center;
			}
			.btn{
				display: block;
				color: white;
				width: 100%;
				height: 70px;
				/*每个单词在按钮的y轴位置*/
				line-height: 70px;
				/*文本对齐 居中 有很多值，自己试
				text-align: center;*/
				/*dashed 虚线  soild 实线  dotted 点组成的线*/
				border: 2px black solid;
				padding-left: 75px;
				/* 让盒子的尺寸保持原来的边框的大小*/
				box-sizing: border-box;
				/*1-500 不加粗  6-9粗， 可以用bold来加粗*/
				font-weight: 600;
				/*180px 背景在x轴的偏移， center 在y轴的偏移*/
				background: url(img/allow.png) no-repeat 195px center;
				position: relative;
				transition: 0.6s;
			}
			i:hover{
				transform: rotate(360deg);
			}
			.btn:hover{
				/*箭头在按钮中x轴的位置，此处在y轴上自动居中*/
				background-position-x: 210px;
			}
			.line_top{
				display: block;
				height: 2px;
				width: 0px;
				background: white;
				position: absolute;
				top: -2px;
				left: -100px;
				transition: 1.5s
			}
			/* 。。。：hover当鼠标悬浮到。。。上面时，触发什么效果*/
			/*当鼠标悬浮到btn的时候，让line_top 怎么变化*/
			.btn:hover .line_top{
				width: 100%;
				left: 0px;
			}
			.line_right{
				display: block;
				width: 2px;
				height: 0px;
				position: absolute;
				background: white;
				right: -2px;
				top: -130px;
				transition: 1.5s;
			}
			.btn:hover .line_right{
				height: 100%;
				top: 0px;
			}
			.line_left{
				display: block;
				width: 2px;
				height: 0px;
				position: absolute;
				background: white;
				left: -2px;
				top: 200px;
				transition: 1.5s;
			}
			.btn:hover .line_left{
				height: 100%;
				top: 0px;
			}
			.line_buttom{
				display: block;
				height: 2px;
				width: 0px;
				background: white;
				position: absolute;
				top: 66px;
				right: -120px;
				transition: 1.5s
			}
			.btn:hover .line_buttom{
				width: 100%;
				right: 0px;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box_left">
				<!--此处span标签仅起分格作用,用其他的也行-->
				<!--之后改为了i 标签在这里只是一个节点的作用     容器是装东西的，网页中容器可以是节点，节点也可以是容器-->
				<i class="mission">
				</i>
				<a class="btn">
					<span class="line_top"></span>
					<span class="line_right"></span>
					<span class="line_buttom"></span>
					<span class="line_left"></span>
					MISSION</a>
			</div>
			<div id="box_center">
				<i class="play">	
				</i>
				<a class="btn">
					<span class="line_top"></span>
					<span class="line_right"></span>
					<span class="line_buttom"></span>
					<span class="line_left"></span>
					PLAY</a>
			</div>
			<div id="box_right">
				<i class="touch">
				</i>
				<a class="btn">
					<span class="line_top"></span>
					<span class="line_right"></span>
					<span class="line_buttom"></span>
					<span class="line_left"></span>
					TOUCH</a>
			</div>
		</div>
	</body>
</html>

效果如下所示：（当鼠标悬浮在play上面时，箭头会右移，4条线会滑进组成边框）
这里写图片描述