HTML+CSS练习——皮卡丘（更新中）-CSDN博客

本文链接：https://blog.csdn.net/m0_67813526/article/details/123477182

本文记录了作者尝试根据图片使用HTML和CSS创建皮卡丘的过程，目前完成了大部分，只剩下尾巴闪电部分。文章提供了HTML和CSS代码示例，并展示了当前实现的效果。

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

前两天学了网页制作大白（地址：纯 CSS 打造网页版「大白」_Web - 蓝桥云课）今天试试自己按照一张图片用HTML与CSS制作出来。

原图：

目前进度：还差尾巴闪电部分

代码如下：

HTML：

 <div id="back">
        <!-- 耳朵部分 -->
        <div id="ear1">
            <div id="ear-yello"></div>
            <div id="ear-shadow"></div>
        </div>
        <div id="cover-l"></div>
        <div id="cover-r"></div>
        <div id="ear2">
            <div id="ear-yello"></div>
            <div id="ear-shadow"></div>
        </div>
        <!-- 头部 -->
        <div id="head">
            <div id="eye1">
                <div id="eyebai"></div>
            </div>
            <div id="eye2">
                <div id="eyebai"></div>
            </div>
            <div id="nose"></div>
            <!-- 两颊腮红 -->
            <div id="face1"></div>
            <div id="face2"></div>
            <!-- 嘴巴部分 -->
            <div id="mouth">
                <!-- 上唇 -->
                <div id="m-up1"></div>
                <div id="m-up2"></div>
                <!-- 口腔 -->
                <div id="lip">
                    <div id="lip-s"></div>
                </div>
                <!-- 下唇 -->
                <div id="m-bottom"></div>
            </div>
            <div id="cover1"></div>
        </div>    
        <div id="body">
            <div id="b-shadow"></div>
        </div>   
        <div id="cover7"></div>
        <div id="arm"> 
            <div id="arm1">
                <div id="a1-shadow"></div>
            </div>
            <div id="finger1-l">
                <div id="f-in"></div>
            </div>
            <div id="finger2-l">
                <div id="f-in"></div>
            </div>
            <div id="finger3-l">
                <div id="f-in"></div>
            </div>
            <div id="finger4-l">
                <div id="f-in"></div>
            </div>
            <div id="finger5-l">
                <div id="f-in"></div>
            </div>
            <div id="cover2"></div>
            <div id="cover3"></div>
            <div id="cover4"></div>
            <div id="shadow1"></div>
            <div id="arm2">
            <div id="shadow2"></div>

            </div>
            <div id="finger1-r">
                <div id="f-in"></div>
            </div>
            <div id="finger2-r">
                <div id="f-in"></div>
            </div>
            <div id="finger3-r">