CSS 绘制圣诞老人

当所有人都在吃瓜看戏时,我发现 Ant Design 官网上的这个圣诞老人还挺可爱的……于是就给保存了下来……又是一年圣诞节,终于能派上用场了!

完整代码

<style>
 
.santa-body {
 
 font-size: 80px; /* 试试改变这里的字体大小,有惊喜! */
 
 color: #f91047;
 
 display: -webkit-box;
 
 display: -webkit-flex;
 
 display: -ms-flexbox;
 
 display: flex;
 
-webkit-box-pack: center;
 
-webkit-justify-content: center;
 
-ms-flex-pack: center;
 
 justify-content: center;
 
-webkit-box-align: center;
 
-webkit-align-items: center;
 
-ms-flex-align: center;
 
 align-items: center;
 
 width: 1em;
 
 height: 1em;
 
 background-color: currentColor;
 
-webkit-box-shadow: inset 0 -0.25em rgba(0,0,0,0.1);
 
 box-shadow: inset 0 -0.25em rgba(0,0,0,0.1);
 
 border-radius: 50%;
 
-webkit-transform-origin: center bottom;
 
-ms-transform-origin: center bottom;
 
 transform-origin: center bottom;
 
-webkit-animation: balance alternate infinite 2s ease-in-out;
 
 animation: balance alternate infinite 2s ease-in-out;
 
}
 
 
 
.santa-head {
 
 font-size: .4em;
 
 width: 1em;
 
 height: 1.9em;
 
 background-color: white;
 
 border-radius: .5em;
 
-webkit-transform: translateY(-1em);
 
-ms-transform: translateY(-1em);
 
 transform: translateY(-1em);
 
 position: relative;
 
}
 
 
 
.santa-head::before {
 
 content: '';
 
 width: 1em;
 
 height: .375em;
 
 display: block;
 
 background-color: #ff9876;
 
 position: absolute;
 
 left: 0;
 
 top: .65em;
 
}
 
 
 
.santa-ear {
 
 background-color: #fc8363;
 
 width: .1em;
 
 height: .3em;
 
 position: absolute;
 
 top: .75em;
 
}
 
 
 
.santa-ear:nth-of-type(1) {
 
 border-radius: .05em 0 0 .05em;
 
 left: -0.1em;
 
}
 
 
 
.santa-ear:nth-of-type(2) {
 
 border-radius: 0 .05em .05em 0;
 
 right: -0.1em;
 
}
 
 
 
.santa-hat {
 
 content: '';
 
 width: 1em;
 
 height: .15em;
 
 position: absolute;
 
-webkit-transform: scale(1.1);
 
-ms-transform: scale(1.1);
 
 transform: scale(1.1);
 
 top: .5em;
 
 left: 0;
 
 background-color: white;
 
}
 
 
 
.santa-hat::before {
 
 content: '';
 
 display: block;
 
 width: 1em;
 
 height: .5em;
 
 background: #f91047;
 
 border-radius: .5em .5em 0 0;
 
 z-index: 2;
 
 position: absolute;
 
 top: -0.5em;
 
}
 
 
 
.santa-hat::after {
 
 content: '';
 
 width: .25em;
 
 height: .25em;
 
 display: block;
 
 background-color: white;
 
 border-radius: 50%;
 
 position: absolute;
 
 z-index: 0;
 
 top: -0.72em;
 
 right: 0;
 
-webkit-box-shadow: -0.2em .2em 0 .12em rgba(0,0,0,0.2),-0.2em .2em 0 .12em #f91047;
 
 box-shadow: -0.2em .2em 0 .12em rgba(0,0,0,0.2),-0.2em .2em 0 .12em #f91047;
 
}
 
 
 
.santa-eye {
 
 width: .12em;
 
 height: .12em;
 
 background-color: black;
 
 border-radius: 50%;
 
 position: absolute;
 
 top: .76em;
 
 left: .2em;
 
}
 
 
 
.santa-eye+.santa-eye {
 
 left: auto;
 
 right: .2em;
 
}
 
 
 
.santa-nose {
 
 width: .12em;
 
 height: .22em;
 
 background-color: #f24c4c;
 
 border-radius: 0 0 .12em .12em;
 
 position: absolute;
 
 top: .84em;
 
 left: 50%;
 
-webkit-transform: translateX(-50%);
 
-ms-transform: translateX(-50%);
 
 transform: translateX(-50%);
 
}
 
 
 
.santa-mouth {
 
 width: .18em;
 
 height: .1em;
 
 border-bottom-right-radius: 5vw;
 
 border-bottom-left-radius: 5vw;
 
 margin-top: .3em;
 
 background-color: black;
 
 position: absolute;
 
 left: 50%;
 
 top: 50%;
 
-webkit-transform: translate(-50%, -50%);
 
-ms-transform: translate(-50%, -50%);
 
 transform: translate(-50%, -50%);
 
-webkit-animation: hohoho 4s linear forwards infinite;
 
 animation: hohoho 4s linear forwards infinite;
 
}
 
 
 
@-webkit-keyframes hohoho {
 
0%,10%,20%,40%,100% {
 
 width: .18em;
 
 height: .1em;
 
 border-bottom-right-radius: 1vw;
 
 border-bottom-left-radius: 1vw;
 
}
 
 
 
5%,15%,25%,35% {
 
 width: .15em;
 
 height: .2em;
 
 border-radius: 50%;
 
}
 
}
 
 
 
@keyframes hohoho {
 
0%,10%,20%,40%,100% {
 
 width: .18em;
 
 height: .1em;
 
 border-bottom-right-radius: 1vw;
 
 border-bottom-left-radius: 1vw;
 
}
 
 
 
5%,15%,25%,35% {
 
 width: .15em;
 
 height: .2em;
 
 border-radius: 50%;
 
}
 
}
 
 
 
@-webkit-keyframes balance {
 
from {
 
-webkit-transform: rotate(-4deg);
 
 transform: rotate(-4deg);
 
}
 
 
 
 to {
 
-webkit-transform: rotate(4deg);
 
 transform: rotate(4deg);
 
}
 
}
 
 
 
@keyframes balance {
 
from {
 
-webkit-transform: rotate(-4deg);
 
 transform: rotate(-4deg);
 
}
 
 
 
 to {
 
-webkit-transform: rotate(4deg);
 
 transform: rotate(4deg);
 
}
 
}
 
</style>
 
 
 
<div class="santa">
 
<div class="santa-body">
 
<div class="santa-head">
 
<div class="santa-ear"></div>
 
<div class="santa-ear"></div>
 
<div class="santa-hat"></div>
 
<div class="santa-eye"></div>
 
<div class="santa-eye"></div>
 
<div class="santa-nose"></div>
 
<div class="santa-mouth"></div>
 
</div>
 
</div>
 
</div>

部分文章/资源来源于网络,文章标题下部均已标注来源,如有侵权,请点击此处联系客服进行删除,本站将会在第一时间内进行处理! 

如果您要搬运本站文章,请在文章底部标注

声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。

如果文章帮助到您,还请您点击一下广告支持本站一下! 如果本帖存在的内容对您和您的利益产生损害,请立即通知我,将在最短时间内对其做出处理.本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负.

给TA饼干
共{{data.count}}人
人已饼干
技术源码

解压__音乐网站源码

2022-12-3 22:35:00

技术源码

制作的一部精彩的动画艺术作品纯CSS

2022-12-6 13:40:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索