CSS 绘制圣诞老人

释放双眼,带上耳机,听听看~!

今天的这段代码来源于 Ant DesignCSS 绘制圣诞老人 不知道还有没有人记得去年闹得轰轰烈烈的圣诞彩蛋事件:

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

完整代码

<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}}人
人已赞赏
CSS

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

2021-8-14 1:13:10

404页面

粉色简单的404错误页面源代码

2021-8-14 1:33:00

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索
  • 9 用户总数(个)
  • 1279 文章总数(篇)
  • 19312 浏览总数(Pv)
  • 0 今日发布(篇)
  • 708 稳定运行(天)
立即加入

加入QWBK - ,快速免费获取轻微资源!