css实现qq企鹅的做法大全

QQ企鹅是QQ的标志性形象之一，其简洁、可爱的形象深受用户喜爱。下面介绍一些使用CSS实现QQ企鹅的做法，让您的网页也变得可爱起来。

1. 使用CSS绘制

    .penguin {
        position: relative;
        width: 75px;
        height: 75px;
        border-radius: 50%;
        background: #e7e7e7;
    }
    
    .penguin:before {
        content: "";
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
        width: 50px;
        height: 50px;
        border-radius: 50%;
        background: #fff;
    }
    
    .penguin:after {
        content: "";
        position: absolute;
        top: 20px;
        left: 31px;
        width: 15px;
        height: 15px;
        background: #000;
        border-radius: 50%;
        transform: rotate(-45deg);
    }

这里使用CSS绘制圆形和其他图形实现QQ企鹅的形状。其中，before伪类是代表企鹅的白色肚子，after伪类则代表鼻子。

2. 使用CSS绘制和图片结合

    .penguin {
        position: relative;
        width: 75px;
        height: 75px;
        background-image: url(penguin-body.png);
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .penguin:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        z-index: 10;
        width: 100%;
        height: 100%;
        background-image: url(penguin-face.png);
        background-position: center;
        background-repeat: no-repeat;
    }
    
    .penguin:after {
        content: "";
        position: absolute;
        top: 40px;
        left: 35px;
        width: 10px;
        height: 10px;
        background: #000;
        border-radius: 50%;
    }

在上面的代码中，我们使用了两张图片来实现QQ企鹅的形状，background样式为背景图片，把企鹅的身体作为背景显示出来，然后通过伪类的方式把企鹅的头部显示在上面。

3. 使用SVG实现

使用SVG(scalable Vector Graphics)也可以实现QQ企鹅的形状。SVG是一种矢量图形标准，既可以通过代码来绘制图形，也可以使用外部图像作为填充。这里我们通过绘制两个圆形和一个黑色小圆点来实现QQ企鹅的形状。

综上，可以用CSS绘制、CSS绘制和图片结合、以及SVG来实现QQ企鹅的做法。每种方法都有其优点和缺点，可以根据实际需求选择最合适的方法来实现。希望这篇文章可以帮助到正在寻找如何实现企鹅形状的网页设计师们。