您的位置：首页 > Web前端 > HTML5

HTML5定位实例

2017-01-19 13:37 169 查看

幽灵按钮—知识点：定位

<!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当鼠标悬浮到。。。上面时，触
cf8c
发什么效果*/
/*当鼠标悬浮到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条线会滑进组成边框）

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： html5

相关文章推荐

新的分享

章节导航