HTML5 CSS3叼着烟头的超人

抽香烟的动画

css3, smoke

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 2300
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

body {
    width: 100vw;
    height: 100vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    background: -webkit-radial-gradient(center, circle, #e5e5da, #a6a680 30vmin, rgba(0, 0, 0, 0) 30vmin), -webkit-radial-gradient(center, circle, #a6a680, #171710);
    background: radial-gradient(circle at center, #e5e5da, #a6a680 30vmin, rgba(0, 0, 0, 0) 30vmin), radial-gradient(circle at center, #a6a680, #171710);
}
body .head {
    width: 30vmin;
    height: 21.5vmin;
    position: relative;
    background: #fed03c;
    border-radius: 1500vmin 1500vmin 1500vmin 1500vmin / 1000vmin 1000vmin 600vmin 600vmin;
    margin-top: -8vmin;
}
body .head .cigar {
    position: absolute;
    width: 7vmin;
    height: 1.5vmin;
    background: #826343;
    -webkit-transform: skewY(-20deg) skewX(40deg);
    transform: skewY(-20deg) skewX(40deg);
    top: 29.5vmin;
    left: 5vmin;
    z-index: 3;
    border-radius: 0 100% 100% 0;
}
body .head .cigar:before,
body .head .cigar:after {
    content: '';
    position: absolute;
    background: #fc9938;
    width: 1.5vmin;
    height: 1.5vmin;
    -webkit-transform: skewX(-40deg) skewY(20deg);
    transform: skewX(-40deg) skewY(20deg);
    border-radius: 100%;
    left: -0.75vmin;
    top: 0vmin;
    box-shadow: 0vmin -2vmin 0vmin #f2eae8, 1vmin -4vmin 0vmin rgba(242, 234, 232, 0.8), -1vmin -6vmin 0vmin -0.25vmin rgba(242, 234, 232, 0.6), 0.75vmin -8vmin 0 1vmin rgba(242, 234, 232, 0.4);
    -webkit-animation: smoking 3s linear infinite forwards;
    animation: smoking 3s linear infinite forwards;
}
@-webkit-keyframes smoking {
    0% {
        box-shadow: 0vmin 0vmin 0vmin -1vmin rgba(242, 234, 232, 0), 1vmin 0vmin 0vmin -1vmin #f2eae8, -1vmin 0vmin 0vmin -1vmin #f2eae8, 0.75vmin 0vmin 0 -1vmin #f2eae8, 0vmin -2vmin 0vmin -1vmin #f2eae8, 1vmin -2vmin 0vmin rgba(242, 234, 232, 0.8), -1vmin -2vmin 0vmin -0.25vmin rgba(242, 234, 232, 0.6), 0.75vmin -2vmin 0 1vmin rgba(242, 234, 232, 0.4);
        background: #fc9938;
    }
    50% {
        box-shadow: 0vmin -2vmin 0vmin #f2eae8, 1vmin -4vmin 0vmin rgba(242, 234, 232, 0.8), -1vmin -6vmin 0vmin -0.25vmin rgba(242, 234, 232, 0.6), 0.75vmin -8vmin 0 1vmin rgba(242, 234, 232, 0.4), 0vmin -4vmin 0vmin rgba(242, 234, 232, 0), 1vmin -6vmin 0vmin rgba(242, 234, 232, 0), -1vmin -8vmin 0vmin -0.25vmin rgba(242, 234, 232, 0), 0.75vmin -12vmin 0 1vmin rgba(242, 234, 232, 0);
        background: #cb6603;
    }
    100% {
        box-shadow: 0vmin -4vmin 0vmin rgba(242, 234, 232, 0), 1vmin -6vmin 0vmin rgba(242, 234, 232, 0), -1vmin -8vmin 0vmin -0.25vmin rgba(242, 234, 232, 0), 0.75vmin -12vmin 0 1vmin rgba(242, 234, 232, 0), 0vmin -4vmin 0vmin rgba(242, 234, 232, 0), 1vmin -6vmin 0vmin rgba(242, 234, 232, 0), -1vmin -8vmin 0vmin -0.25vmin rgba(242, 234, 232, 0), 0.75vmin -12vmin 0 1vmin rgba(242, 234, 232, 0);
        background: #fc9938;
    }
}
@keyframes smoking {
    0% {
        box-shadow: 0vmin 0vmin 0vmin -1vmin rgba(242, 234, 232, 0), 1vmin 0vmin 0vmin -1vmin #f2eae8, -1vmin 0vmin 0vmin -1vmin #f2eae8, 0.75vmin 0vmin 0 -1vmin #f2eae8, 0vmin -2vmin 0vmin -1vmin #f2eae8, 1vmin -2vmin 0vmin rgba(242, 234, 232, 0.8), -1vmin -2vmin 0vmin -0.25vmin rgba(242, 234, 232, 0.6), 0.75vmin -2vmin 0 1vmin rgba(242, 234, 232, 0.4);
        background: #fc9938;
    }
    50% {
        box-shadow: 0vmin -2vmin 0vmin #f2eae8, 1vmin -4vmin 0vmin rgba(242, 234, 232, 0.8), -1vmin -6vmin 0vmin -0.25vmin rgba(242, 234, 232, 0.6), 0.75vmin -8vmin 0 1vmin rgba(242, 234, 232, 0.4), 0vmin -4vmin 0vmin rgba(242, 234, 232, 0), 1vmin -6vmin 0vmin rgba(242, 234, 232, 0), -1vmin -8vmin 0vmin -0.25vmin rgba(242, 234, 232, 0), 0.75vmin -12vmin 0 1vmin rgba(242, 234, 232, 0);
        background: #cb6603;
    }
    100% {
        box-shadow: 0vmin -4vmin 0vmin rgba(242, 234, 232, 0), 1vmin -6vmin 0vmin rgba(242, 234, 232, 0), -1vmin -8vmin 0vmin -0.25vmin rgba(242, 234, 232, 0), 0.75vmin -12vmin 0 1vmin rgba(242, 234, 232, 0), 0vmin -4vmin 0vmin rgba(242, 234, 232, 0), 1vmin -6vmin 0vmin rgba(242, 234, 232, 0), -1vmin -8vmin 0vmin -0.25vmin rgba(242, 234, 232, 0), 0.75vmin -12vmin 0 1vmin rgba(242, 234, 232, 0);
        background: #fc9938;
    }
}
body .head .cigar:after {
    -webkit-animation-delay: -1.5s;
    animation-delay: -1.5s;
}
body .head .teeth {
    content: '';
    position: absolute;
    width: 10vmin;
    height: 3.5vmin;
    background: -webkit-linear-gradient(top, transparent 0%, transparent 1.75vmin, gray 1.75vmin, gray 2vmin, transparent 2vmin), #fff;
    background: linear-gradient(to bottom, transparent 0%, transparent 1.75vmin, gray 1.75vmin, gray 2vmin, transparent 2vmin), #fff;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: 3;
    bottom: -9vmin;
}
body .head .teeth:before,
body .head .teeth:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 20%;
    background: #ecc9a5;
    top: 0;
    left: -10%;
    -webkit-transform: skewX(10deg);
    transform: skewX(10deg);
}
body .head .teeth:after {
    left: auto;
    right: -10%;
    -webkit-transform: skewX(-10deg);
    transform: skewX(-10deg);
}
body .head .mouth {
    position: absolute;
    width: 30vmin;
    height: 21vmin;
    background: #085394;
    bottom: -12.75vmin;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    z-index: -2;
    border-radius: 0 0 100% 100% / 0 0 250% 250%;
}
body .head:before,
body .head:after {
    content: '';
    position: absolute;
    border-top: 4vmin solid #fed03c;
    border-left: 1vmin solid transparent;
    border-right: 1vmin solid transparent;
    height: 0;
    width: 3vmin;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    top: 21vmin;
}
body .head:after {
    border-top: 15vmin solid #ecc9a5;
    border-left: 4vmin solid transparent;
    border-right: 4vmin solid transparent;
    border-radius: 0 0 100% 100%;
    width: 16vmin;
    z-index: -1;
    top: 20vmin;
}
body .head .eye {
    position: absolute;
    right: 13vmin;
    top: 5vmin;
}
body .head .eye:nth-of-type(2) {
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
    right: auto;
    left: 13vmin;
}
body .head .eye:after {
    content: '';
    position: absolute;
    width: 4vmin;
    height: 3vmin;
    top: 11.5vmin;
    left: 2.5vmin;
    background: #fff;
    border-radius: 150vmin 0 150vmin 0;
    -webkit-transform: rotate(20deg);
    transform: rotate(20deg);
}
body .head .eye:before {
    content: '';
    position: absolute;
    width: 22.5vmin;
    height: 15vmin;
    background: #085394;
    border-radius: 100vmin 0 100vmin 0 / 200vmin 0 200vmin 0;
    -webkit-transform: skew(-20deg) rotate(-25deg);
    transform: skew(-20deg) rotate(-25deg);
}

HTML

抽香烟的动画

css3, smoke

编辑器支持Emmet

快捷键

抽香烟的动画

css3, smoke

HTML5/CSS3叼着烟斗抽烟的雪人

HTML5 CSS3沿着对角线遮掩拉开浮层的图片悬停动效

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：