CSS 绘制圣诞老人

01520
当前文章收录状态：
未收录

今天的这段代码来源于 Ant Design。 不知道还有没有人记得去年闹得轰轰烈烈的圣诞彩蛋事件：

图片[1]-CSS 绘制圣诞老人-明恒博客

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

图片[2]-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>
<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>
<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>

© 版权声明
版权声明
1 本站网络名称： 明恒博客
2 本站永久网址： www.zym88.cn
3 本站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报。
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。
THE END
程序开发其他语言
# css# 圣诞老人
我的博客即将同步至腾讯云+社区，邀请大家一同入驻：https://cloud.tencent.com/developer/support-plan?invite_code=270198dipw4ko
点赞0赞赏 分享
Behind every beautiful life, there has been some kind of pain.
破茧成蝶的美好生活都有伤痛
你的明明呐丶的头像-明恒博客SVIP会员
相关推荐
评论 抢沙发

请登录后发表评论

    暂无评论内容

用户封面
你的明明呐丶的头像-明恒博客SVIP会员
日历
May
Tuesday
13
Calendar Header 1 Calendar Header 2 Calendar Header 3
  • 一
  • 二
  • 三
  • 四
  • 五
  • 六
  • 日
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
猜你喜欢
13 秒插入 30 万条数据，这才是批量插入正确的姿势！-明恒博客

113 秒插入 30 万条数据，这才是批量插入正确的姿势！

你的明明呐丶的头像-明恒博客SVIP会员1年前
72
Ansible基础-明恒博客

2Ansible基础

Yields的头像-明恒博客3年前
77
不用一行代码查看方法耗时，这款 IDEA 插件有点酷！-明恒博客

3不用一行代码查看方法耗时，这款 IDEA 插件有点酷！

你的明明呐丶的头像-明恒博客SVIP会员9个月前
66
我又发现了几个牛逼的良心工具-明恒博客

4我又发现了几个牛逼的良心工具

你的明明呐丶的头像-明恒博客SVIP会员9个月前
66
解决element-ui中el-avatar组件切换图片不更新的问题-明恒博客

5解决element-ui中el-avatar组件切换图片不更新的问题

你的明明呐丶的头像-明恒博客SVIP会员3年前
44
使用 Java + WebSocket 实现简单实时双人协同 pk 答题-明恒博客

6使用 Java + WebSocket 实现简单实时双人协同 pk 答题

你的明明呐丶的头像-明恒博客SVIP会员9个月前
41