CSS哆啦A梦实现与优化技巧-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_40836518/article/details/104662481

本文详细介绍了如何使用纯CSS重构哆啦A梦的代码，从基础形状构建到动画效果实现，探讨了CSS选择器的巧妙应用、盒模型调整以及过渡和动画的性能优化策略，旨在提升CSS技能和页面视觉体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>哆啦A梦</title>
	<style type="text/css">
		#wrapper{
    
			width: 400px;
			margin: 10px auto 0 auto;
		}
		#head{
    
			position: relative;
			width: 300px;
			height: 300px;
			margin: 0 auto;
			background-color: rgb(2,156,226);
			border: 1px solid silver;
			border-radius: 150px;
		}
		#face{
    
			position: absolute;
			top: 50px;
			left: 25px;
			width: 250px;
			height: 250px;
			background-color: white;
			border: 1px solid silver;
			border-radius: 125px;
		}
		#necktie{
    
			position: absolute;
			left: 50%;
			margin-left: -111px;
			bottom: 30px;
			height: 20px;
			width: 220px;
			border-radius: 10px;
			background-color: rgb(213,4,35);
			border: 1px solid silver;
		}
		#body{
    
			position: relative;
			width: 210px;
			height: 120px;
			margin: -32px auto 0 auto;
			border: 1px solid silver;
			background-color: rgb(2,156,226);
		}
		#foot-left, #foot-right{
    
			width: 120px;
			height: 20px;
			margin-top: -1px;
			border-radius: 10px;
			border: 1px solid silver;
			background-color: white;
		}
		#foot-left{
    	
			margin-left: 70px;
			float: left;
		}
		#foot-right{
    
			margin-right: 70px;
			float: right;
		}
		#curve{
    
			position: absolute;
			bottom: -1px;
			width: 30px;
			height: 15px;
			left: 50%;
			margin-left: -15px;
			border: 1px solid silver;
			border-radius: 15px 15px 0 0;
			border-bottom-width: 0;
			background-color: white;
		}
		#belly{
    
			position: absolute;
			top: -1px;
			left: 50%;
			margin-left: -95px;
			width: 190px;
			height: 95px;
			border: 1px solid silver;
			border-radius: 0 0 95px 95px;
			background-color: white;
		}
		#pocket{
    
			position: absolute;
			top: 18px;
			left: 50%;
			margin-left: -70px;
			width: 140px;
			height: 70px;
			border: 1px solid silver;
			border-radius: 0 0 70px 70px;
			background-color: white;
		}
		#arm-left,#arm-right{
    
			position: relative;
			margin-top: -2px;
			width: 0;
			height: 0;
			border-width:40px;
			border-style: solid;
		}
		#arm-left{
    
			float: left