摄像头方向键，上下左右方向键，十字方向键（html/css）

Z_X_Lei

已于 2022-04-18 22:00:40 修改

阅读量1.3k

点赞数 1

分类专栏： WEB 文章标签：前端 css3 css

于 2022-02-21 16:18:18 首次发布

本文链接：https://blog.csdn.net/zsms1314/article/details/123049772

版权

WEB 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

效果图

在这里插入图片描述

源码

<!DOCTYPE html>
<html>
<head>
	<style type="text/css">
		.camera_direction{
			 /*background-color: sandybrown;*/
			  text-align: center;
			  position: absolute;
			  /*top: 0%;*/
			  width: 300px;
			  height: 300px;
		}
		.direction_div{
			  position:relative;
			  width: 30px;
			  height: 30px;
		}
		/*left*/
		.left_direction {
			  top: 5%;
			  left: 20%; 
		}
		/*bottom*/
		.bottom_direction{
			  top:5%;
			  left: 40%;
		}
		/*right*/
		.right_direction{
			  top: -15%;
			  left: 60%;
		}
		/*top*/
		.top_direction{
			  top: 2%;
			  left: 40%; 
		}

		i {
			  border: solid black;
			  border-width: 0 3px 3px 0;
			  display: inline-block;
			  padding: 3px;
		}

		.right {
			  transform: rotate(-45deg);
			  -webkit-transform: rotate(-45deg);
		}

		.left {
			  transform: rotate(135deg);
			  -webkit-transform: rotate(135deg);
		}

		.up {
			  transform: rotate(-135deg);
			  -webkit-transform: rotate(-135deg);
		}

		.down {
			  transform: rotate(45deg);
			  -webkit-transform: rotate(45deg);
		}
	</style>
</head>
</body>
	<div class="camera_direction">
		<div class="direction_div top_direction">
			  <button data-inline="true" id="upbtn"><i class="up"></i></button>
		</div>
		<div class="direction_div left_direction">
			  <button data-inline="true" id="leftbtn"><i class="left"></i></button>
		</div>
		<div class="direction_div bottom_direction">
			  <button data-inline="true" id="bottombtn"><i class="down"></i></button>
		</div>
		<div class="direction_div right_direction">
			  <button data-inline="true" id="rightbtn"><i class="right"></i></button>
		</div>
	</div>
</body>

</html>