纯CSS——皮卡丘

最新推荐文章于 2023-05-11 16:21:02 发布

Jiang酱~

最新推荐文章于 2023-05-11 16:21:02 发布

阅读量899

点赞数 1

分类专栏：作业

本文链接：https://blog.csdn.net/weixin_40758850/article/details/88934443

版权

本文分享了一篇使用纯CSS实现皮卡丘形象的代码，虽然在皮卡丘眨眼时眼白消失效果上存在一点小问题，作者期待读者提供改进方案。

摘要由CSDN通过智能技术生成

直接上代码啦~

不过自己目前写的还有一点点BUG，眨眼的时候皮卡丘的眼白消失的有些慢，如果你们有更好的解决办法也可以教教我，分享分享~

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>PiKa~</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
    <div class="head">
        <div class="cover-top"></div>
        <div class="cover">
            <!--腮红-->
            <div class="blush-left"></div>
            <div class="blush-right"></div>
        </div>
        <div class="cover-line"></div>
        <div class="eye left-eye">
            <div class="left-white"></div>
        </div>
        <div class="eye right-eye">
            <div class="right-white"></div>
        </div>
        <div class="nose"></div>

        <div class="mouse">
            <div class="mouth-left"></div>
            <div class="mouth-right"></div>
            <div class="tongue"></div>
        </div>


        <div class="ear">
            <div class="ear-shading-left"></div>
        </div>
        <div class="ear ear-right">
            <div class="ear-shading-right"></div>
        </div>
    </div>

    <div class="body">
        <div class="shadow"></div>
        <div class="arm"></div>
        <div class="arm arm-right"></div>
    </div>
    <div class="foot">
        <div class="figures"></div>
    </div>

    <div class="tail">
        <div class="tail1"></div>
        <div class="tail2"></div>
        <div class="tail3"></div>
        <div class="tail4"></div>
        <div class="tail5"></div>
    </div>

    <div class="foot foot-right">
        <div class="figures figures-right"></div&g