纯CSS绘制冰墩墩

ECMSPLUS | 2022-04-14 |

摘要：<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xh...

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0
    }

    body {
        font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
        background: #d4ebf1;
        color: #000;
    }

    .m_body {
        width: 362px;
        height: 410px;
        border: #393939 8px solid;
        margin: 50px auto;
        border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
        position: absolute;
        left: 109px;
        top: -30px;
        background: #fff;
    }

    .ear1, .ear2 {
        background: #393939;
        width: 81px;
        height: 115px;
        border-radius: 50%;
        position: absolute;
        z-index: -1;
    }

    .ear1 {
        left: 150px;
        top: 26px;
        transform: rotate(-10deg);
    }

    .ear2 {
        left: 362px;
        top: 28px;
        transform: rotate(10deg);
    }

    .eye1, .eye2 {
        background: #393939;
        width: 83px;
        height: 115px;
        border-radius: 50%;
        position: absolute;
    }

    .eye1 {
        left: 185px;
        top: 122px;
        transform: rotate(45deg);
    }

    .eye2 {
        left: 329px;
        top: 122px;
        transform: rotate(-45deg);
    }

    .eye1:before, .eye2:before {
        content: "";
        width: 40px;
        height: 40px;
        border: #fff 5px solid;
        border-radius: 100%;
        position: absolute;
    }

    .eye1:before {
        right: 10px;
        top: 22px;
    }

    .eye2:before {
        left: 10px;
        top: 22px;
    }

    .eye1:after, .eye2:after {
        content: "";
        width: 10px;
        height: 10px;
        background: #9b9b9b;
        border-radius: 100%;
        position: absolute;
    }

    .eye1:after {
        right: 27px;
        top: 31px;
    }

    .eye2:after {
        left: 41px;
        top: 44px;
    }

    .face {
        position: absolute;
        border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
    }

    .c_blue {
        border: #6bcdf3 5px solid;
        width: 280px;
        height: 224px;
        left: 150px;
        top: 78px;
    }

    .c_red {
        border: #af2350 5px solid;
        width: 287px;
        height: 233px;
        left: 146px;
        top: 73px;
    }

    .c_purple {
        border: #5d75b3 5px solid;
        width: 295px;
        height: 240px;
        left: 142px;
        top: 70px;
    }

    .c_yellow {
        border: #ffc346 5px solid;
        width: 305px;
        height: 248px;
        left: 137px;
        top: 65px;
    }

    .c_green {
        border: #7fcb58 5px solid;
        width: 313px;
        height: 256px;
        left: 133px;
        top: 61px;
    }

    .arm1, .arm2 {
        background: #333;
        position: absolute;
        z-index: -1;
    }

    .arm1 {
        width: 75px;
        height: 118px;
        left: 64px;
        top: 244px;
        transform: rotate(45deg);
        border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
    }

    .arm2 {
        width: 75px;
        height: 148px;
        left: 463px;
        top: 162px;
        transform: rotate(37deg);
        border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
    }

    .arm2:before {
        content: "";
        width: 16px;
        height: 24px;
        background: #bc242c;
        position: absolute;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        transform: rotate(45deg);
        left: 32px;
        top: 20px;
    }

    .arm2:after {
        content: "";
        width: 16px;
        height: 24px;
        background: #bc242c;
        position: absolute;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        transform: rotate(-45deg);
        left: 26px;
        top: 20px;
    }

    .arm_c {
        content: "";
        width: 16px;
        height: 24px;
        position: absolute;
        left: 426px;
        top: 20px;
    }

    .nose {
        background-color: #333333;
    }

    .nose:before, .nose:after {
        content: '';
        position: absolute;
        background-color: inherit;
    }

    .nose, .nose:before, .nose:after {
        width: 28px;
        height: 18px;
        border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
    }

    .nose {
        position: absolute;
        left: 284px;
        top: 187px;
    }

    .mouse {
        position: absolute;
        left: 265px;
        top: 205px;
        width: 68px;
        height: 25px;
        border-radius: 48%;
        border: #393939 7px solid;
        border-top: none;
        border-left: 0;
        border-right: 0;
    }

    .leg1, .leg2 {
        background: #333;
        position: absolute;
        width: 83px;
        height: 80px;
        border-radius: 0 0 30px 30px;
        z-index: -1;
    }

    .leg1 {
        left: 187px;
        top: 423px;
    }

    .leg2 {
        left: 328px;
        top: 423px;
    }

    .leg1:after, .leg2:after {
        content: "";
        width: 43px;
        height: 30px;
        position: absolute;
        background: #363636;
        border-radius: 30px;
    }

    .leg1:after {
        bottom: 0;
        right: -3px;
    }

    .leg2:after {
        bottom: 0;
        left: -3px;
    }

</style>
    <script src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(".ear1, .ear2").on('click', function () {
            $(".ear1, .ear2").css('transform','none');
            setTimeout(function () {
                $(".ear1").css('transform','rotate(-10deg)');
                $(".ear2").css('transform','rotate(10deg)');
            },100)
        })
    </script>

</head>

<body>
<div class="m_body"></div>
    <div class="ear1"></div>
    <div class="ear2"></div>
    <div class="eye1"></div>
    <div class="eye2"></div>
    <div class="face c_blue"></div>
    <div class="face c_red"></div>
    <div class="face c_purple"></div>
    <div class="face c_yellow"></div>
    <div class="face c_green"></div>
    <div class="nose"></div>
    <div class="mouse"></div>
    <div class="arm1"></div>
    <div class="arm2"></div>
    <div class="leg1"></div>
    <div class="leg2"></div>





</body>
</html>

如下示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
    * {
        margin: 0;
        padding: 0
    }

    body {
        font: 15px "Microsoft YaHei", Arial, Helvetica, sans-serif;
        background: #d4ebf1;
        color: #000;
    }

    .m_body {
        width: 362px;
        height: 410px;
        border: #393939 8px solid;
        margin: 50px auto;
        border-radius: 88% 88% 62% 68% / 82% 82% 95% 84%;
        position: absolute;
        left: 109px;
        top: -30px;
        background: #fff;
    }

    .ear1, .ear2 {
        background: #393939;
        width: 81px;
        height: 115px;
        border-radius: 50%;
        position: absolute;
        z-index: -1;
    }

    .ear1 {
        left: 150px;
        top: 26px;
        transform: rotate(-10deg);
    }

    .ear2 {
        left: 362px;
        top: 28px;
        transform: rotate(10deg);
    }

    .eye1, .eye2 {
        background: #393939;
        width: 83px;
        height: 115px;
        border-radius: 50%;
        position: absolute;
    }

    .eye1 {
        left: 185px;
        top: 122px;
        transform: rotate(45deg);
    }

    .eye2 {
        left: 329px;
        top: 122px;
        transform: rotate(-45deg);
    }

    .eye1:before, .eye2:before {
        content: "";
        width: 40px;
        height: 40px;
        border: #fff 5px solid;
        border-radius: 100%;
        position: absolute;
    }

    .eye1:before {
        right: 10px;
        top: 22px;
    }

    .eye2:before {
        left: 10px;
        top: 22px;
    }

    .eye1:after, .eye2:after {
        content: "";
        width: 10px;
        height: 10px;
        background: #9b9b9b;
        border-radius: 100%;
        position: absolute;
    }

    .eye1:after {
        right: 27px;
        top: 31px;
    }

    .eye2:after {
        left: 41px;
        top: 44px;
    }

    .face {
        position: absolute;
        border-radius: 48% 48% 44% 49%/ 53% 54% 45% 47%;
    }

    .c_blue {
        border: #6bcdf3 5px solid;
        width: 280px;
        height: 224px;
        left: 150px;
        top: 78px;
    }

    .c_red {
        border: #af2350 5px solid;
        width: 287px;
        height: 233px;
        left: 146px;
        top: 73px;
    }

    .c_purple {
        border: #5d75b3 5px solid;
        width: 295px;
        height: 240px;
        left: 142px;
        top: 70px;
    }

    .c_yellow {
        border: #ffc346 5px solid;
        width: 305px;
        height: 248px;
        left: 137px;
        top: 65px;
    }

    .c_green {
        border: #7fcb58 5px solid;
        width: 313px;
        height: 256px;
        left: 133px;
        top: 61px;
    }

    .arm1, .arm2 {
        background: #333;
        position: absolute;
        z-index: -1;
    }

    .arm1 {
        width: 75px;
        height: 118px;
        left: 64px;
        top: 244px;
        transform: rotate(45deg);
        border-radius: 24% 69% 68% 76%/ 53% 95% 40% 52%;
    }

    .arm2 {
        width: 75px;
        height: 148px;
        left: 463px;
        top: 162px;
        transform: rotate(37deg);
        border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;
    }

    .arm2:before {
        content: "";
        width: 16px;
        height: 24px;
        background: #bc242c;
        position: absolute;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        transform: rotate(45deg);
        left: 32px;
        top: 20px;
    }

    .arm2:after {
        content: "";
        width: 16px;
        height: 24px;
        background: #bc242c;
        position: absolute;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        transform: rotate(-45deg);
        left: 26px;
        top: 20px;
    }

    .arm_c {
        content: "";
        width: 16px;
        height: 24px;
        position: absolute;
        left: 426px;
        top: 20px;
    }

    .nose {
        background-color: #333333;
    }

    .nose:before, .nose:after {
        content: '';
        position: absolute;
        background-color: inherit;
    }

    .nose, .nose:before, .nose:after {
        width: 28px;
        height: 18px;
        border-radius: 42px 42px 60px 61px/ 30px 30px 50px 46px;
    }

    .nose {
        position: absolute;
        left: 284px;
        top: 187px;
    }

    .mouse {
        position: absolute;
        left: 265px;
        top: 205px;
        width: 68px;
        height: 25px;
        border-radius: 48%;
        border: #393939 7px solid;
        border-top: none;
        border-left: 0;
        border-right: 0;
    }

    .leg1, .leg2 {
        background: #333;
        position: absolute;
        width: 83px;
        height: 80px;
        border-radius: 0 0 30px 30px;
        z-index: -1;
    }

    .leg1 {
        left: 187px;
        top: 423px;
    }

    .leg2 {
        left: 328px;
        top: 423px;
    }

    .leg1:after, .leg2:after {
        content: "";
        width: 43px;
        height: 30px;
        position: absolute;
        background: #363636;
        border-radius: 30px;
    }

    .leg1:after {
        bottom: 0;
        right: -3px;
    }

    .leg2:after {
        bottom: 0;
        left: -3px;
    }

</style>
    <script  src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script>
        $(".ear1, .ear2").on('click', function () {
            $(".ear1, .ear2").css('transform','none');
            setTimeout(function () {
                $(".ear1").css('transform','rotate(-10deg)');
                $(".ear2").css('transform','rotate(10deg)');
            },100)
        })
    </script>

</head>

<body>
<div class="m_body"></div>
    <div class="ear1"></div>
    <div class="ear2"></div>
    <div class="eye1"></div>
    <div class="eye2"></div>
    <div class="face c_blue"></div>
    <div class="face c_red"></div>
    <div class="face c_purple"></div>
    <div class="face c_yellow"></div>
    <div class="face c_green"></div>
    <div class="nose"></div>
    <div class="mouse"></div>
    <div class="arm1"></div>
    <div class="arm2"></div>
    <div class="leg1"></div>
    <div class="leg2"></div>
    
    
    
    




</body>
</html>

本篇文章给大家谈谈纯CSS绘制冰墩墩以及其它CMS对应的知识，感谢你花时间阅读本站内容，希望对各位有所帮助，你也可以查看更多关于其它CMS的信息。

1、所有来源标注为 ECMSPLUS/zwcms.com的内容版权均为本站所有，若您需要引用、转载，只需要注明来源及原文链接即可，如涉及大面积转载，请来信告知，获取授权。

2、本站所提供的文章资讯、软件资源、素材源码等内容均为作者提供、网友推荐、互联网整理而来（部分报媒/平媒内容转载自网络合作媒体），仅供学习参考，如有侵犯您的版权，请联系我们，本站将在三个工作日内改正。

4、 ECMSPLUS/zwcms.com不保证资源的准确性、安全性和完整性，请您在阅读、下载及使用过程中自行确认，本站亦不承担上述资源对您或您的网站造成的任何形式的损失或伤害

5、未经 ECMSPLUS/zwcms.com允许，不得盗链、盗用本站资源；不得复制或仿造本网站，不得在非 ECMSPLUS/zwcms.com所属的服务器上建立镜像， ECMSPLUS/zwcms.com对其自行开发的或和他人共同开发的所有内容、技术手段和服务拥有全部知识产权，任何人不得侵害或破坏，也不得擅自使用。

6、互联网的本质是自由与分享，我们真诚的希望，每一份有价值的正能量能够在互联网中自由传播，能够为每一个网站提供动力。

标签：

精品源码

惊爆价¥1500.00
立即购买

二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发
惊爆价¥1500.00
立即购买

帝国cms7.5精仿企业信息综合门户《莞商网》(原创)
惊爆价¥1999.00
立即购买

厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码

看点推荐

精选文章

源码

模板

插件

资源

教程

全部源码分类

游戏动漫

电脑网络

影视音乐

休闲娱乐

文学小说

商务商城

生活健康

其他程序

独立部署产品

工业地产平台

周边系统

二维码溯源

全部模板分类

下载上传 模板

企业网站模板

商城网店模板

新闻门户模板

游戏动漫模板

图片壁纸模板

分类搜索模板

文学小说模板

生活健康模板

影视音乐模板

外贸商城模板

外贸企业网站模板

独立部署产品

工业地产平台

周边系统

二维码溯源

全部插件分类

ECShop

BaoCMS

帝国CMS

ShopNC

Wordpress

Destoon

Opencart

Magento

Dedecms

全部插件分类

网站模板

网站源码

设计素材

学习资源

站长工具

开源系统

前端框架

中文主题

页面布局

后台框架

pbootcms

云优cms

Ecshop

帝国CMS

DedeCMS

Wordpress

Opencart

Magento

其它CMS

迅睿CMS

纯CSS绘制冰墩墩

如下示例代码：

二维码种子溯源系统,一物一码防伪验证查询(单用户版) 支持定制开发

帝国cms7.5精仿企业信息综合门户《莞商网》(原创)

厂房网,厂房出租,厂房出售,仓库出租,园区招商商铺厂房网整站源码

站长交流群

推荐文章

最新文章

热门标签

关注我们

微信扫一扫，关注更多精彩

垂询热线：18680688182

客服QQ

下载上传模板