HTML5定位实例

最新推荐文章于 2021-06-07 19:29:56 发布

晴风雪舞

最新推荐文章于 2021-06-07 19:29:56 发布

阅读量751

点赞数

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

本文链接：https://blog.csdn.net/swiftwwj/article/details/54615271

版权

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

摘要由CSDN通过智能技术生成

幽灵按钮—知识点：定位

<!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: whit

最低0.47元/天解锁文章

晴风雪舞

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML5定位实例

幽灵按钮—知识点：定位<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> html,body{ margin: 0; pad
复制链接

扫一扫

专栏目录