pug+scss实现卡通小人动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：pug+scss实现卡通小人动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum=1.0,minimum=1.0,user-scalable=0" />
    <title>BFW NEW PAGE</title>
    
      
<style type = 'text/scss'>
$unit: 1.25vmin;
$red-01: #ef1852;
$red-02: #ad1852;
$yellow-01: #ffd6ae;
$yellow-02: #f68c8e;
$yellow-03: #ef9ca5;
$yellow-04: #ee6b8a;
$white-01: #ffffff;
$blue-01: #6b9cb5;
$purple-01: #38044e;
$bg: #fd6daa;

$type: cubic-bezier(.17,.67,.62,.94);
$type-02: cubic-bezier(.17,.67,.62,.94);
$time: 3000ms;
$time-02: 100ms;
$time-03: 4000ms;

@mixin cube($width, $height, $depth) {
    &-front{ @include cube-front($width, $height, $depth); }
    &-back{ @include cube-back($width, $height, $depth); }
    &-right{ @include cube-right($width, $height, $depth); }
    &-left{ @include cube-left($width, $height, $depth); }
    &-top{ @include cube-top($width, $height, $depth);}
    &-bottom{ @include cube-bottom($width, $height, $depth); }
}
//----------------------
@mixin cube-front($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: bottom left;
    transform: rotateX(-90deg) translateZ( -($height - ($depth * 2) ) );
}
@mixin cube-back($width, $height, $depth) {
    width: $width;
    height: $height;
    transform-origin: top left;
    transform: rotateX(-90deg) rotateY(180deg) translateX(-$width) translateY(-$height) ;
}
@mixin cube-right($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(90deg) rotateZ(-90deg) translateZ($width) translateX(-$depth * 2) translateY(-$height);
}
@mixin cube-left($width, $height, $depth) {
    width: $depth * 2;
    height: $height;
    transform-origin: top left;
    transform: rotateY(-90deg) rotateZ(90deg) translateY(-$height);
}
@mixin cube-top($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: translateZ($height) ;
}
@mixin cube-bottom($width, $height, $depth) {
    width: $width;
    height: $depth * 2;
    transform-origin: top left;
    transform: rotateY(180deg) translateX(-$width);
}
/***********************/
/***********************/
*, *::after, *::before {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
    transform-style: preserve-3d;

	user-select: none;
    -webkit-tap-highlight-color: transparent;
    appearance: none;
}
/***********************/
/***********************/
body{
  
    height: 100vh;
    width: 100%;

    overflow: hidden;
    background-color: $bg;
}

.main{
    position: absolute;
    width: 70 * $unit;
    height: 70 * $unit;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;

    transform: perspective(100 * $unit);

    &::before {
        content: '';
        position: absolute;
        bottom: 11 * $unit;
        left: 28 * $unit;
        width: 15 * $unit;
        height: 1.5 * $unit;
        background-color: $purple-01;
        border-radius: 50%;
    }
}

.p01 {
    position: absolute;
    bottom: 13 * $unit;
    left: 10 * $unit;
    width: 15 * $unit;
    height: 22 * $unit;

    &::before {
        content: '';
        position: absolute;
        top: 102%;
        width: 100%;
        height: 1.5 * $unit;
        background-color: $purple-01;
        border-radius: 50%;
    }

    &__cuerpo {
        position: absolute;
        top: 3 * $unit;
        width: 14 * $unit;
        height: 14 * $unit;
        border-radius: 50%;
        background-color: $yellow-03;

        animation: p01-cuerpo01 $time infinite;
        border-left: .25 * $unit solid $white-01;

        &::before {
            content: '';
            position: absolute;
            left: -.25 * $unit;
            width: 14.5 * $unit;
            height: 14.5 * $unit;
            border-radius: 50%;
            background-image: radial-gradient(transparent 55%, $yellow-04 55% 65%, transparent 65%);
            background-size: 550% 550%;
            background-position: bottom center;
           // border-left: .25 * $unit solid $white-01;
            
            transform: rotateZ(10deg);
            animation: p01-cuerpo02 $time-02 infinite alternate;
        }

        &::after {
            content: '';
            position: absolute;
            top: 1.5 * $unit;
            left: 8 * $unit;
            width: 2 * $unit;
            height: 2 * $unit;
            background-color: rgba($white-01, .7);
            border-radius: 50%;
        }
    }
    &__shadow {
        position: absolute;
        width: 14 * $unit;
        height: 14 * $unit;
        border-radius: 50%;
        overflow: hidden;
        mix-blend-mode: lighten;
        mix-blend-mode: color-burn;
        
        &::before {
            content: '';
            position: absolute;
            bottom: 10 * $unit;
            left: -4 * $unit;
            width: 14 * $unit;
            height: 12 * $unit;
            background-color: rgba($yellow-01, .5);
            transform-origin: bottom left;
            transform: rotateZ(-3deg) skewY(20deg);

            animation: 
                p01-shadow01 $time $type infinite,
                p01-shadow02 $time-02 $type infinite alternate;
        }

        &::after {
            content: '';
            position: absolute;
            width: 8 * $unit;
            height: 2 * $unit;
            transform-origin: bottom left;
            transform: skewX(-40deg);
            background-color: rgb(24, 19, 80);

            animation: p01-shadow03 $time $type infinite;
        }
    }

    &__brazoD {
        position: absolute;
        top: 8 * $unit;
        left: 2.5 * $unit;
        width: .3 * $unit;
        height: 5 * $unit;
        transform-origin: top left;
        transform: rotateZ(23deg);
        background-color: $purple-01;

        animation: p01-brazoD01 $time $type infinite;

        &::before {
            content: '';
            position: absolute;
            bottom: 0 * $unit;
            left: 0;
            width: 6 * $unit;
            height: .4 * $unit;
            background-color: $purple-01;
            transform-origin: top left;
            transform: rotateZ(-12deg);

            animation: p01-brazoDB01 $time $type infinite;
        }
    }

    &__piernaD {
        position: absolute;
        top: 12 * $unit;
        left: 5 * $unit;
        width: .3 * $unit;
        height: 3.5 * $unit;
        transform-origin: top left;
        transform: rotateZ(-15deg);
        background-color: $purple-01;

        animation: p01-piernaD01 $time $type infinite;
    }

    &__pantorrillaD {
        position: absolute;
        top: 95%;
        width: 100%;
        height: 3.5 * $unit;
        transform-origin: top left;
        transform: rotateZ(30deg);
        background-color: $purple-01;

        animation: p01-pantorrillaD01 $time $type infinite;

        &::after {
            content: '';
            position: absolute;
            width: 2.75 * $unit;
            height: 2.5 * $unit;
            top: 70%;
            left: -.5 * $unit;
            background-color: $purple-01;
            transform-origin: top left;
            transform: rotateZ(-15deg) skewX(-15deg);
            border-top: .35 * $unit solid $white-01;

        }
    }
    // ==========================
    &__brazoI {
        position: absolute;
        top: 10 * $unit;
        right: .25 * $unit;
        width: .3 * $unit;
        height: 4 * $unit;
        transform-origin: top right;
        transform: rotateZ(-32deg);
        background-color: $purple-01;

        animation: p01-brazoI01 $time $type infinite;

        &::before {
            content: '';
            position: absolute;
            width: 5 * $unit;
            height: .35 * $unit;
            bottom: 0 * $unit;
            right: 0;
            background-color: $purple-01;
            transform-origin: top right;
            transform: rotateZ(5deg);

            animation: p01-brazoIB01 $time $type infinite;
        }
    }
    

    &__piernaI {
        position: absolute;
        top: 12.8 * $unit;
        right: 5 * $unit;
        width: .3 * $unit;
        height: 3 * $unit;
        transform-origin: top right;
        transform: rotateZ(-40deg);
        background-color: $purple-01;

        animation: p01-piernaI01 $time $type infinite,;
    }

    &__pantorrillaI{
        position: absolute;
        top: 90%;
        right: 0;
        width: 100%;
        height: 3 * $unit;
        background-color: $purple-01;
        transform-origin: top left;
        transform: rotateZ(55deg);

        animation: p01-pantorrillaI01 $time $type infinite;

        &::after {
            content: '';
            position: absolute;
            top: 70%;
            left: -.2 * $unit;
            width: 3 * $unit;
            height: 2.55 * $unit;
            background-color: $purple-01;
            transform-origin: top left;
            transform: rotateZ(-15deg) skewX(-20deg);
            border-top: .35 * $unit solid $white-01;
        }
    }

    &__gorra {
        position: absolute;
        bottom: 97%;
        left: 5 * $unit;
        width: 4 * $unit;
        height: 3.5 * $unit;
        background-color: $red-01;
        border-top-left-radius: 2 * $unit;
        border-top-right-radius: 2 * $unit;
        border-right: .1 * $unit solid $white-01;

        animation: p01-gorra $time $type infinite;

        &::before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            width: 150%;
            height: .75 * $unit;
            background-color: $red-02;
            border-top-left-radius: 50%;
            border-top-right-radius: 50%;
        
        }
    }

    &__cara {
        position: absolute;
        width: 100%;
        height: 100%;
        animation: 
            p01-cara01 $time $type infinite,
            p01-cara02 $time-02 $type infinite
        ;
    }

    &__ojoD,
    &__ojoI {
        position: absolute;
        width: 4 * $unit;
        height: 4 * $unit;
        border-radius: 50%;
        border: .5 * $unit solid transparent;
        border-top: .5 * $unit solid $purple-01;
    }

    &__ojoD {
        top: 3.5 * $unit;
        left: 3.25 * $unit;
        transform: rotateZ(10deg);
    }
    &__ojoI {
        top: 4.5 * $unit;
        right: 1.25 * $unit;
        transform: rotateZ(10deg);
    }
    &__boca {
        position: absolute;
        top: 7 * $unit;
        left: 4 * $unit;
        width: 7 * $unit;
        height: 3 * $unit;
        border-radius: 3 * $unit;
        transform: scale(1) rotateZ(10deg);
        background-color: $purple-01;
        overflow: hidden;

        animation: p01-boca $time $type infinite;

        &::before {
            content: '';
            position: absolute;
            bottom: -75%;
            // left: calc(50% - (1.5 * $unit));
            left: 30%;
            width: 3 * $unit;
            height: 3 * $unit;
            border-radius: 50%;
            background-color: $red-02
        }
    }
}
// ===================================
// ===================================

@keyframes p01-cuerpo01 {
    0%, 20%, 80%, 100% { transform: rotateZ(0deg); }
    40%, 70% { transform: rotateZ(-30deg); }
}
@keyframes p01-cuerpo02 { 
    to { transform: translateY(1.5%) rotateZ(10deg); } 
}

@keyframes p01-cara01 {
    0%, 28%,  100% { transform: translateY(0); }
    30%, 60% { transform: translateY(-1 * $unit); }
}

@keyframes p01.........完整代码请登录后点击上方下载按钮下载查看