css教程

CSS3不倒翁动态效果代码

我的站长站 2023-09-04 人阅读

HTML代码

<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>

CSS3代码

.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);
    }
}
相关推荐
  • CSS3教程
  • CSS3动画
  • CSS3实现苹果灵动岛效果

    主要利用了CSS3-animation + JS实现效果,只是提供思路,具体细节可以参考<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>灵动岛</title>...

    css教程 63 1年前
  • CSS3背景图片固定滑动效果

    CSS3背景图片固定住,滚动条滚动浮动在固定位置,这种效果网上看到很多。有一种视觉差的酷炫效果,一般大气的企业网站会非常常见,这种CSS效果运用的好会让网站非常大气上档次。今天我的站长站分享给大家,其实非常简单。background-attachment: fixed;CSS3的...

    css教程 96 4年前
  • CSS3做一个手机端左右滑动菜单

    手机端因为布局很窄,如果刚好菜单很多的情况下,我们就可以把菜单左侧左右滑动的效果,来节省空间,大致效果如下图具体效果可以参考今日头条,菜单可以左右滑动。有些花里胡哨的代码会用上JS,其实这种只需要CSS就能搞定,下面看代码。HTML代码<div><a href="htt...

    css教程 128 4年前
  • React.js新拟态CSS3动画生成网站源码
    React.js新拟态CSS3动画生成网站源码

    源码介绍一款国外搬运的CSS3动画生成网站源码,基于React.js框架开发,中文叫新拟态,英文原名叫Neumorphism/Soft UI。是一款助于设计人员和开发人员对其进行试验并可能对其进行调整的源码。源码截图...

    html模板 51 1年前
  • @keyframes实现CSS动画帧效果

    本教程教大家如何使用@keyframes,制作一个类似幻灯片的CSS动画效果。首先我们准备一张连贯的动作图片,这里以这张熊跑路为例。新建一个DIV容器,放这里一帧图片<div></div>DIV的盒子属性div { position: absolute; width: 200px; ...

    css教程 71 2年前
  • 五彩loading动画效果html页面模板
    五彩loading动画效果html页面模板

    一款五彩的loading动画效果html页面模板,loading文字从右到左一顺弧形滚动,非常漂亮。<meta http-equiv="refresh" content="3;url=http://www.wdzzz.com">content为跳转延迟时间,url为跳转后的地址...

    html模板 154 4年前
最新更新