一墩难求,花了一两个小时自己画了一个,HTML结构很简单,CSS上主要就是将各个位置定位,肚子上的logo就只有发挥啦

以下是HTML代码

<div class="container">
<div class="m_body"></div>
<div class="ear_l"></div>
<div class="ear_r"></div>
<div class="arm_l"></div>
<div class="arm_r"></div>
<div class="face f_green"></div>
<div class="face f_yelow"></div>
<div class="face f_blue"></div>
<div class="face f_purple"></div>
<div class="face f_shy_blue"></div>
<div class="eye_l"></div>
<div class="eye_r"></div>
<div class="nose"></div>
<div class="mouth"></div>
<div class="logo">
<img src="./img/logo_d.png" alt="">
</div>
<div class="leg_l"></div>
<div class="leg_r"></div>
</div>

以下是CSS样式

    body {background: rgb(177, 251, 251);}
.container {margin: auto;width: 500px;height: 500px;position: relative;text-align: center;}
.m_body {width: 300px;height: 350px;border: #333 8px solid;margin: 50px auto;
border-radius: 90% 90% 60% 65% / 85% 85% 98% 90%;background: #fff;position: absolute;z-index: 2;}
.ear_l,.ear_r {background: #393939;width: 80px;height: 100px;border-radius: 50%;
position: absolute;z-index: 1;}
.ear_l {left: 30px;top: 50px; }
.ear_r {left: 210px;top: 50px;}
.arm_l,.arm_r {background: #333;position: absolute;z-index: 1;}
.arm_l {width: 70px;height: 120px;left: -50px;top: 240px;transform: rotate(45deg);border-radius: 35% 60% 90% 90%/ 55% 85% 90% 60%;}
.arm_r {width: 70px;height: 150px;left: 300px;top: 162px;transform: rotate(37deg);
border-radius: 56% 62% 98% 6%/ 40% 46% 80% 58%;}
.arm_r:before,.arm_r:after {content: "";width: 18px;height: 26px;background: #bc242c;
position: absolute;border-top-left-radius: 50%;border-top-right-radius: 50%;}
.arm_r:before {transform: rotate(45deg);left: 26px;top: 20px;}
.arm_r:after {transform: rotate(-45deg);left: 19px;top: 20px;}
.face {position: absolute;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 50%;position: absolute;z-index: 3;}
.f_green {border: #96c882 5px solid;width: 230px;height: 180px;left: 38px;top: 90px;}
.f_yelow {border: #EAC65B 5px solid;width: 220px;height: 172px;left: 43px;top: 94px;}
.f_blue {border: #0489be 5px solid;width: 210px;height: 164px;left: 48px;top: 98px;}
.f_purple {border: #AF2350 4px solid;width: 203px;height: 157px;left: 52px;
top: 103px;}
.f_shy_blue {border: #6BCDF3 4px solid;width: 195px;height: 149px;left: 56px;top: 107px;}
.eye_l,.eye_r {background: #333;width: 60px;height: 80px;border-radius: 50%;position: absolute;z-index: 4;}
.eye_l:before,.eye_r:before {position: absolute;content: '';
width: 24px;height: 24px; border-radius: 50%;border: 4px solid #fff;z-index: 5;
}
.eye_l:after,.eye_r:after {position: absolute;content: '';
width: 8px;height: 8px;background: #9B9B9B;border-radius: 50%;z-index: 6;
}
.eye_l:after {right: 25px;top: 25px;}
.eye_r:after {left: 26px; top: 26px;}
.eye_l:before {left: 20px;top: 12px; }
.eye_r:before {left: 10px;top: 12px; }
.eye_l { left: 80px; top: 130px; transform: rotate(45deg); }
.eye_r {left: 175px;top: 130px;transform: rotate(-45deg);}
.nose {background: #333;position: absolute;left: 145px;top: 180px;z-index: 6;}
.nose, .nose:before,.nose:after {width: 25px;height: 16px;
border-radius: 45px 42px 60px 61px/ 30px 30px 50px 46px; }
.mouth { width: 60px;height: 50px;border-radius: 48% 48% 44% 49%/ 53% 54% 45% 50%;
background: #333;left: 128px;top: 200px;position: absolute;z-index: 7;}
.mouth::before {content: '';width: 50px;height: 16px;left: 5px;top: -1px;
position: absolute;background: #fff;z-index: 8;border-radius: 50%; }
.mouth:after { content: '';width: 45px;height: 24px;
border-radius: 30% 30% 60% 60%/ 50% 54% 80% 90%; background: #B3272A;
position: absolute;z-index: 9;top: 23px;left: 8px;}
.logo {position: absolute; z-index: 10;top: 290px;left: 110px;}
.logo img {width: 100px; }
.leg_l,.leg_r {background: #333;position: absolute;width: 70px;
height: 90px;border-radius: 0 0 30px 30px;z-index: 1;}
.leg_l {left: 60px;top: 390px;}
.leg_r {left: 190px;top: 390px;}
.leg_l:after,
.leg_r:after { content: "";width: 43px; height: 30px;
position: absolute;background: #363636;border-radius: 30px;
}
.leg_l:after {bottom: 0;right: -3px;}
.leg_r:after {bottom: 0;left: -3px;}

效果展示

css实现一个冰墩墩的更多相关文章

  1. 使用Three.js和React把冰墩墩部署在网页上!实现人手一墩!

    前言 最近冰墩墩一墩难求,大家开始通过各种方式打造自己的冰墩墩,各种冰墩墩开始出现,粘土冰墩墩,橘子冰墩墩,3D打印冰墩墩.这次通过前端的方式展示一个3D冰墩墩,现在开始吧. 声明:本文涉及奥运元素3 ...

  2. 【编程教室】Python绘制冬奥吉祥物“冰墩墩”

    大家好,欢迎来到 Crossin的编程教室 ! 这两天,随着北京冬奥会的开幕,吉祥物"冰墩墩"可是火出了圈,多少人排长队都买不到.据说甚至有人把价格炒到了几千元. 就连昨天的&qu ...

  3. 纯 CSS 创建一个三角形

    [要求]:用纯CSS创建一个三角形的原理是什么? ♪ 答: 把上.左.右三条边隐藏掉(颜色设为 transparent) [实现]: #demo { width: 0; height: 0; bord ...

  4. 用css实现一个空心圆,并始终放置在浏览器窗口左下角

    用css实现一个空心圆,并始终放置在浏览器窗口左下角         div{                 position:fixed;                 bottom:0;   ...

  5. 用css制作一个三角形箭头

    剑走偏锋——用css制作一个三角形箭头   通常,我们做上图那个三角形,一般都是做张图,而且需要两张,因为一般都是下拉菜单的效果,需要有个hover的样式,箭头是反的.那是不是有更好的办法呢,毕竟要用 ...

  6. 【CSS】如何用css做一个爱心

    摘要:HTML的标签都比较简单,入门非常的迅速,但是CSS是一个需要我们深度挖掘的东西,里面的很多样式属性掌握几个常用的便可以实现很好看的效果,下面我便教大家如何用CSS做一个爱心. 前期预备知识: ...

  7. 使用css画一个箭头

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  8. 如何用css实现一个三角形?

    昨天被人问到说如何用css实现一个三角形?em....  当时被问到了,汗颜,今天找了一些帖子看了一下,也算是记录一下吧 代码如下: 实现效果:

  9. 纯CSS实现一个微信logo,需要几个标签?

    博客已迁移至http://lwzhang.github.io. 纯CSS实现一个微信logo并不难,难的是怎样用最少的html标签实现.我一直在想怎样用一个标签就能实现,最后还是没想出来,就只好用两个 ...

  10. 3.纯 CSS 创作一个容器厚条纹边框特效

    原文地址:3.纯 CSS 创作一个容器厚条纹边框特效 没有啥好点子呀,不爽 HTML代码: <div class="box"> <div class=" ...

随机推荐

  1. Java时间加减操作

    Java时间加减操作 /** * 时间计算 * * @param str 时间字符串 * @param format 时间格式 * @param type Calendar内置常量 * @param ...

  2. 看不懂打我系列------图文并茂基于CentOS Linux release 7.8.2003 Core安装并Docker化你的Node.js应用

    @图文并茂基于CentOS Linux release 7.8.2003 Core安装并Docker化你的Node.js应用 简体中文 | English 说明 本文介绍如何在CentOS Linux ...

  3. java入门与进阶P-6.1+P-6.2

    字符类型 字符型char在Java语言中占用 2 个字节,char类型的字面量必须使用半角的单引号括起来,取值范围为[ 0 - 65535 ],char 和 short 都占用 2 个字节,但是 ch ...

  4. Unity打包资源,进行后台加载

    Unity打包资源,进行后台加载 需要项目优化的pa you,这边走:Unity项目优化--Web版 一.前言 因为在下载Three.js,所以趁着这个时间写一下资源打包加载吧 小黑在刚开始学习Uni ...

  5. 读Java8函数式编程笔记06_Lambda表达式编写并发程序

    1. 阻塞式I/O 1.1. 一种通用且易于理解的方式,因为和程序用户的交互通常符合这样一种顺序执行的方式 1.2. 将系统扩展至支持大量用户时,需要和服务器建立大量TCP连接,因此扩展性不是很好 2 ...

  6. 定时调度插件------FluentScheduler

    定时调度插件------FluentScheduler 源码地址 官网文档地址 使用说明 dll引用 文章使用的版本为5.5.1版本 使用GuGet搜索FluentScheduler即可找到 如果框架 ...

  7. 【随笔记】Android 命令行联网、更新DNS、同步网络时间

    一.命令行联网 # 启用网卡 busybox ifconfig wlan0 up # 启用服务 wpa_supplicant -iwlan0 -Dnl80211 -c/system/etc/wifi/ ...

  8. chatGPT vscode 体验

    体验秘钥 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 多人用可能有点卡,重在体验. 自己(中国)想注册账号如下 步骤一:找到入口 搜索Ope ...

  9. Python实用代码片段(1)-rot13加密

    Python之禅:THIS.PY 你安装了python之后,能在Lib目录下找到一个this.py的文件,就是此处的内容. s = """Gur Mra bs Clgub ...

  10. docker02-centos上安装

    1.前提说明Docker 运行在 CentOS 7 上,要求系统为64位.系统内核版本为 3.10 以上.Docker 运行在 CentOS-6.5 或更高的版本的 CentOS 上,要求系统为64位 ...