01发射的图片

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>发射</title>
	</head>
	<style>
		*{margin: 0;padding: 0;}
		.bg{
			width: 500px;
			height: 500px;
			background: lightgrey;
			margin: 0 auto;
			position: relative;
			overflow: hidden;
		}
		.light{
			width: 800px;
			height: 10px;
			background: yellow;
			position: absolute;
			left: -145px;
			top: 240px;
		}
	</style>
	<body>
		<div class="bg">
			<div class="light" style="transform: rotate(5deg);"></div>
			<div class="light" style="transform: rotate(27.5deg);"></div>
			<div class="light" style="transform: rotate(50deg);"></div>
			<div class="light" style="transform: rotate(72.5deg);"></div>
			<div class="light" style="transform: rotate(95deg);"></div>
			<div class="light" style="transform: rotate(112.5deg);"></div>
			<div class="light" style="transform: rotate(135deg);"></div>
			<div class="light" style="transform: rotate(157.5deg);"></div>
		</div>
	</body>
</html>

  

上一篇:每天20道前端面试题(二)


下一篇:tabs切换tab页中的echart图变形,宽高仅100px问题