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;
        heigh.........完整代码请登录后点击上方下载按钮下载查看