HTML5定位实例

本文介绍了一个使用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条线会滑进组成边框)
这里写图片描述
这里写图片描述
这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值