放大镜-(CSS)

最新推荐文章于 2024-07-12 21:49:18 发布

weixin_34212762

最新推荐文章于 2024-07-12 21:49:18 发布

阅读量662

点赞数

原文链接：https://juejin.im/post/5bebd6b56fb9a049a62c2098

版权

记录自己css的学习历程


<!DOCTYPE html>
<html>
<head>
	<title>放大镜?</title>
	<style type="text/css">
		
		* {
			margin: 0;
			padding: 0;
		}

		.magnifying-glass {
			width: 400px;
			height: 400px;
			background-color: #eee;
			margin: auto;
			position: absolute;
			left: 0;
			right: 0;
			top: 0;
			bottom: 0;
			font-size: 10px;
			box-shadow: 1em 1em 3em rgba(255, 234, 213, 0.8);
		}

		.magnifying-glass::before {
			content: '';
			display: inline-block;
			width: 5em;
			height: 5em;
			border-radius: 50%;
			border: 1px solid #a5aeb7;
			position: absolute;
			margin: auto;
			left: 45%;
			top: 45%;
			transform: translate(-50%, -50%);
		}
	
		.magnifying-glass::after {
			content: '';
			display: inline-block;
			width: 1em;
			height: 3em;
			background-color: #000;
			border-radius: 40% 40% 0 0;
			transform: rotate(-40deg);
			position: absolute;
			left: calc(45% + 2.4em);
			top: calc(45% + 1.8em);
		}
	</style>
</head>
<body>
	<div class="magnifying-glass"></div>	
</body>
</html>
复制代码

效果图:

转载于:https://juejin.im/post/5bebd6b56fb9a049a62c2098