CSS——笑脸

最新推荐文章于 2023-12-20 21:52:44 发布

原创最新推荐文章于 2023-12-20 21:52:44 发布 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #笑脸

css 专栏收录该内容

45 篇文章

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		#d1 {
			width: 400px;
			height: 400px;
			border: 2px solid #000;
			border-radius: 50%; /* 圆 */
			background: #FFFF00;
		}
		#d2 {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #000;
			position: relative;
			top: 100px;
			left: 100px;
		}
		#d3 {
			width: 50px;
			height: 50px;
			border-radius: 50%;
			background: #000;
			position: relative;
			top: 50px;
			left: 250px;
		}
		#d4 {
		  	transform:rotate(48deg);
		   	width:200px;  
		   	height:200px;  
		   	border-radius:50%;  
		   	box-shadow: 30px 30px 0 0 #000;  
		   	position: absolute;
		   	top:120px; 
		   	left:110px;
		}
	</style>
</head>
<body>
	<!-- 笑脸图片 JS动态效果 切换几种表情 可以动态移动 -->
	<div id="d1">
		<div id="d2"></div>
		<div id="d3"></div>
	</div>
	<div id="d4">
		
	</div>
</body>
</html>

注：感觉不是很自然。