使用纯HTML+CSS绘制一个阔爱的UMR~土间埋~

最新推荐文章于 2024-04-30 16:17:31 发布
置顶 最新推荐文章于 2024-04-30 16:17:31 发布
阅读量503 收藏
点赞数 3
分类专栏： 前端 文章标签： HTML+CSS 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36646755/article/details/89845671
版权

小弟第一次发博客~

只需要H5+CSS就阔以绘制出一枚小埋哦~O.o

http://www.wanjiahui.com
umr

 

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="description" content="干物妹小埋" />
    <meta charset="utf-8">
    <title>UMR小埋</title>
    <link href="UMR.css" rel="stylesheet">
</head>

<body>
<div class='umr'>
    <div class="coat upper">
        <div class="coat ear left"></div>
        <div class="coat ear right"></div>
        <div class="kuma">
            <div class="kumaEye left"></div>
            <div class="kumaEye right"></div>
            <div class="kumaMustach left"></div>
            <div class="kumaMustach right"></div>
        </div>
    </div>
    <div class="coat lower">
    </div>
    <div class="arm left"></div>
    <div class="arm right"></div>
    <div class="face">
        <div class="eyeBrow left"></div>
        <div class="eyeBrow right"></div>
        <div class="eye left">
            <div class="eye-inner"></div>
        </div>
        <div class="eye right">
            <div class="eye-inner"></div>
        </div>
        <div class="hotpe left"></div>
        <div class="hotpe right"></div>
        <div class="mouth"></div>
    </div>
    <div class="hair">
        <div class="hair front"></div>
        <div class="hair fill"></div>
        <div class="hair back"></div>
    </div>
    <div class="body">
        <div class="Tshirt">
        </div>
        <div class="hand left"></div>
        <div class="hand right"></div>
        <div class="leg left"></div>
        <div class="leg right"></div>
    </div>
</div>
</body>
</html>

CSS:

html {
    margin-top: -40px;
    background-color: #ddd;
    background-repeat: no-repeat;
}
.umr {
    position: relative;
    border: 1px solid;
    width: 180px;
    height: 220px;
    margin-top: 41px;
    margin-left: 18px;
}
.coat {
    z-index: -1;
    background-color: #f08a5a;
    position: absolute;
}
.coat.upper {
    width: 88%;
    height: 50%;
    left: 4%;
    top: 2%;
    border: 1px solid #000;
    border-bottom-color: transparent;
    border-radius: 50% 50% 64% 56% / 80% 80% 10% 10%;
}
.kuma {
    position: absolute;
    top: 3px;
    left: 68px;
    width: 14px;
    height: 15px;
    box-sizing: border-box;
    border: 1px solid transparent;
}
.kumaEye {
    position: relative;
    width: 1px;
    height: 0;
    border: .5px solid;
}
.kumaEye.left {
    top: 34%;
    left: 15%;
    transform: rotate(-30deg);
    box-shadow: .5px -3px 1px .2px rgba(0, 0, 0, .5);
}
.kumaEye.right {
    top: 20%;
    left: 65%;
    transform: rotate(30deg);
    box-shadow: -1px -2px 1px .2px rgba(0, 0, 0, .5);
}
.kumaMustach {
    position: absolute;
    width: 2px;
    height: 4px;
    background-color: #f3cca5;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}
.kumaMustach.left {
    bottom: 2px;
    left: 3px;
    transform: rotate(20deg);
    border-left: 1px solid;
    border-right: 1px solid;
}
.kumaMustach.right {
    bottom: 2px;
    right: 2px;
    transform: rotate(-20deg);
    border-left: 1px solid;
    border-right: 1px solid;
}
.coat.lower {
    bottom: 2%;
    left: 1%;
    width: 98%;
    height: 70%;
    border: 1px solid;
    border-top-color: transparent;
    border-radius: 8% 40% 36% 30% / 31% 55% 32% 24%;
}
.coat.lower::before {
    content: '';
    position: absolute;
    right: 13px;
    top: 20px;
    width: 10px;
    height: 20px;
    background-color: inherit;
}
.coat.ear {
    z-index: -11;
    position: absolute;
    width: 17px;
    height: 10px;
    border: 1px solid;
    border-bottom-color: transparent;
    border-radius: 50% 50% 50% 50%;
    background-color: #f58857;
}
.coat.ear::before {
    position: absolute;
    content: '';
    width: 35%;
    height: 30%;
    left: 20%;
    top: 25%;
    border-radius: 50% 50% 50% 50%;
    border: 1px solid;
    background-color: #ffd8af;
}
.coat.ear.left {
    transform: rotate(-40deg);
    left: 9px;
    top: 13px;
}
.coat.ear.right {
    transform: rotate(40deg);
    right: 15px;
    top: 5px;
}
.arm {
    z-index: 1;
    position: absolute;
    border: 1px solid;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    background: #f08a5a;
}
.arm.left {
    top: 100px;
    left: 28px;
    width: 60px;
    height: 20px;
    transform: rotate(20deg);
    border-left-color: transparent;
}
.arm.right {
    width: 65px;
    height: 28px;
    top: 93px;
    left: 78px;
    transform: rotate(-25deg);
    border-radius: 50% 50% 50% 50% / 40% 40% 50% 50%;
}
.face {
    z-index: 1;
    position: absolute;
    width: 100px;
    height: 87px;
    border: 1px solid;
    border-top-color: transparent;
    background-color: #fde5d6;
    left: 33px;
    top: 25px;
    border-radius: 60% 60% 60% 60% / 60% 60% 30% 40%;
}
.hair.front {
    position: absolute;
    z-index: 11;
    width: 130px;
    height: 98px;
    margin-left: 20px;
    margin-top: 25px;
    background-color: #fcd0a7;
    border-radius: 50% 50% 50% 50% / 60% 55% 0% 0%;
    clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 95% 96%, 95% 80%, 85% 100%, 87% 41%, 71% 8%, 71% 26%, 62% 0%, 58% 2%, 58% 34%, 53% 20%, 48% 43%, 44% 32%, 40% 2%, 31% 30%, 31% 0%, 14% 42%, 13% 28%, 14% 42%, 12% 50%, 11% 40%, 10% 100%, 4% 84%, 3% 92%, 0% 75%);
}
.hair.fill {
    z-index: -1;
    position: absolute;
    width: 96px;
    height: 100px;
    top: 50px;
    left: 40px;
    background-color: #fcd0a7;
}
.hair.back {
    z-index: -1;
    position: absolute;
    top: 125px;
    width: 137px;
    height: 90px;
    background-color: #fcd0a7;
    margin-left: 13px;
    margin-top: -10px;
    clip-path: polygon(13% 0%, 90% 10%, 98% 45%, 100% 75%, 94% 63%, 95% 72%, 85% 96%, 84% 78%, 79% 91%, 72% 80%, 66% 98%, 62% 86%, 59% 100%, 43% 83%, 44% 100%, 30% 70%, 25% 90%, 18% 83%, 14% 60%, 14% 87%, 10% 75%, 7% 42%, 2% 69%, 0% 50%);
}
.eye {
    z-index: 2;
    position: absolute;
    width: 15px;
    height: 14px;
    border: 3px solid black;
    border-radius: 50%;
    background-color: #743313;
    top: 31px;
}
.eye::before {
    position: absolute;
    content: '';
    width: 4px;
    height: 4px;
    background-color: #f9eee7;
    border-radius: 50%;
}
.eye::after {
    position: absolute;
    content: '';
    width: 3px;
    height: 3px;
    background-color: #c89b85;
    border-radius: 50%;
    left: 4px;
    top: 4px;
}
.eye-inner {
    position: absolute;
    border: 1px solid transparent;
    width: 80%;
    height: 80%;
    border-radius: 45%;
    border-bottom-color: #b07451;
}
.eye.left {
    left: 14px;
}
.eye.right {
    right: 12px;
    margin-top: -1px;
}
.eyeBrow {
    z-index: 2;
    position: absolute;
    width: 25px;
    height: 4px;
    background-color: #000;
    top: 25px;
}
.eyeBrow.left {
    left: 10px;
    transform: rotate(3deg);
}
.eyeBrow.right {
    right: 10px;
    transform: rotate(-3deg);
}
.mouth {
    position: absolute;
    width: 43px;
    height: 27px;
    border: 1px solid;
    bottom: 6px;
    left: 33px;
    background-color: #c67575;
    border-radius: 35% 14% 50% 50% / 59% 45% 55% 40%;
    border-top-color: transparent;
}
.mouth::before {
    position: absolute;
    content: '';
    height: 3px;
    width: 93%;
    left: 1px;
    transform: rotate(-5deg);
    border: 1px solid transparent;
    border-bottom-color: #000;
    background-color: #f7e6d6;
    box-shadow: 0 -1px 0 1px #fce6d2;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%
}
.mouth::after {
    position: absolute;
    content: '';
    width: 94%;
    height: 75%;
    bottom: 0;
    border: 1px solid #c37b7e;
    background-color: #f5a5a8;
    border-radius: 35% 35% 50% 50% / 53% 45% 55% 40%;
}
.hotpe {
    z-index: 1;
    position: absolute;
    width: 3px;
    height: 3px;
    bottom: 30px;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
    box-shadow: 0 0 10px 8px #f5a5a8;
    transform: scaley(.7);
    background-color: #f5a5a8;
}
.hotpe.left {
    left: 15px;
}
.hotpe.right {
    right: 13px;
}
.Tshirt {
    position: absolute;
    bottom: 15%;
    left: 18%;
    border-bottom: 64px solid #f3f3f3;
    border-left: 19px solid transparent;
    border-right: 19px solid transparent;
    width: 72px;
}
.Tshirt::before {
    position: absolute;
    content: '';
    top: -14px;
    left: -40px;
    width: 55px;
    height: 10px;
    transform: rotate(31deg);
    background-color: #f3f3f3;
}
.Tshirt::after {
    position: absolute;
    content: '';
    top: 5px;
    right: -36px;
    width: 38px;
    height: 10px;
    transform: rotate(15deg);
    background-color: #f3f3f3;
}
.hand {
    z-index: -1;
    background: #fde5d6;
    width: 8px;
    height: 8px;
    position: absolute;
    transform: rotate(20eg);
}
.hand::before {
    z-index: -1;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    height: 8px;
    width: 8px;
    background: #fde5d6;
    transform: rotate(45deg);
}
.hand.left {
    top: 94px;
    left: 9px;
}
.hand.right {
    top: 134px;
    right: 14px;
}
.leg {
    z-index: -1;
    position: absolute;
    bottom: 6px;
    border-bottom: 28px solid #f2e1d2;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    height: 0;
    width: 4px;
}
.leg.left {
    left: 48px;
    transform: rotate(190deg);
}
.leg.right {
    right: 58px;
    transform: rotate(-190deg);
}
.leg.left::before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    top: 19px;
    left: -3px;
    background-color: #df8fa1;
}
.leg.right::before {
    position: absolute;
    content: '';
    width: 10px;
    height: 10px;
    top: 17px;
    left: -3px;
    background-color: #df8fa1;
}
.leg.left::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 3px;
    bottom: 0px;
    background-color: #f2e3d5;
    transform: rotate(-25deg);
}
.leg.right::after {
    position: absolute;
    content: '';
    width: 8px;
    height: 3px;
    bottom: 0px;
    left: -4px;
    background-color: #f2e3d5;
    transform: rotate(25deg);
}
公孙胜
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
为什么选择C/C++内存检测工具AddressSanitizer？如何使用AddressSanitizer？
dvlinker的技术专栏
09-13 2万+
为什么选择C/C++内存检测工具AddressSanitizer？如何使用AddressSanitizer？
Unity+UMR SDK
03-29
Rokid UMR SDK（Rokid Unity MR SDK） 是 Rokid 为Unity开发者提供的XR开发工具包，提供基于Rokid XR 平台的空间渲染、空间定位、空间交互能力。 UMR SDK 目前提供以下能力，包括：空间定位&跟踪、虚实交互、Camera...
使用umr读取AMDGPU VRAM
raykwok1150的博客
05-22 308
从上面可以看出，从虚拟地址0x7ffff7fbf000中，前面四级页表的mask分别是，0x7F8、0x7FC、0x37E，0x1BF，最后12bit是页表内offset。
利用iconfont.css生成html代码，显示iconfont里面的所有的图标
热门推荐
sinat_23076629的博客
09-04 3万+
开发时，一个同事问我，遇到历史项目中的iconfont，不知道里面有哪些图标。 于是我便利用nodejs，来根据css生成html显示里面的所有图标。首先用webstorm格式化css代码 ，然后再在css同级别目录创建js文件，命名examples.js，在目录下用命令行工具node examples.js,就会生成examples.html代码，用浏览器打开就能看到所有的图标啦。 css文...
编译链接实战（25）gcc ASAN、MSAN检测内存越界、泄露、使用未初始化内存等内存相关错误
二进制君
03-02 189
fsanitize=address是一个编译器选项，用于启用AddressSanitizer（地址清理器），这是一种快速的内存错误检测工具。它可以检测出程序中的两种常见错误：越界访问（out-of-bounds accesses）和使用后释放（use-after-free）错误。当你在编译程序时使用这个选项，编译器会插入额外的代码来检查每次内存访问是否合法，以便发现潜在的内存错误。
WebPage:只是简单地制作一个新网页
04-09
网页（UMR_IV）仅制作一个新网页就包括： html CSS javascript
面向新型城域网的UMR技术方案研究与应用.docx
06-01
面向新型城域网的UMR技术方案研究与应用.docx
umr-guidelines
03-06
UMR准则 参见
umr1283:UMR 1283-RStudio项目模板
04-06
UMR 1283-RStudio项目模板 您可以使用以下umr1283从安装umr1283 ： remotes :: install_github( " umr1283/umr1283 " )
判断前端入参是否空否则提示前端写法
qq_39306234的博客
04-28 229
前端先声明一个变量，用于alert判断。在templeat中定义一个提示语句。然后在点击事件时判断一下是否展示。
vue实现录音并转文字功能，包括PC端web，手机端web
byebukesi的博客
04-26 515
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
2024 XYCTF Web 方向 wp 全解
qq_39947980的博客
04-27 981
XYCTF 2024 Web 方向全解
两个前端标签
ma_no_lo的博客
04-24 173
两个前端标签
前端Vue2项目搭建过程
xuemen11的博客
04-25 1213
vue2,vuex,vant组件库
docker部署前端项目（二）遇到的问题
weixin_45379180的博客
04-25 396
原因： 安装docker的时候使用的是 yum -y install docker 命令，这个命令安装的是老版本。报错四：conflicts with file from package docker-common。因为使用 sudo yum install docker （下载到的是旧版）missing signature key 缺少秘钥。yum remove docker 删除docker。1、docker版本号 只有1.13.1。解决：可能是docker 未启用。
vue组件render函数中作用域插槽使用方式
nicecode
04-24 308
父组件使用render函数写的,子组件的书写方式随意,想在父组件中使用子组件时写一个作用域插槽.
uni框架下的前端小知识
最新发布
weixin_53908842的博客
04-30 116
1、direction：移动方向，可选值为all、vertical、horizontal分别表示所有方向、垂直、水平方向。3、out-of-bunds：移动超出界限是的处理策略，可选值为fail, bounce,分别表示失败、回弹。9、 scale-value:缩放的值，当scale为true时有效。7、friction:摩擦系数，取值范围【0，100】6、damping:阻尼系数，取值范围【0，100】8、scale：缩放比例，取值范围【0.5，10】4、x:水平方向的移动距离，单位制px。
VSCode配置Springboot开发环境
谢公屐的博客
04-25 467
VSCode配置Springboot开发环境
写一段JAVA代码判断两个日期的跨度是否超过一年
04-20
* @param date1 第一个日期 * @param date2 第二个日期 * @return true表示跨度超过一年，false表示不超过一年 */ public static boolean isExceedOneYear(LocalDate date1, LocalDate date2) { int year1 = ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值