css布局实现一个猎犬猎奔跑效果代码-html代码-BFW代码库

代码语言：html
代码描述：css布局实现一个猎犬猎奔跑效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
:root {
        --brown1: #f0e5df;
        --brown2: #d8c6ba;
        --brown3: #c5ab9e;
        --brown4: #944328;
}

*:before,
*:after {
        position: absolute;
        content: "";
}

body {
        margin: 0;
        padding: 0;
        background: linear-gradient(180deg, #178ce8, #bfe2ff 50%, transparent 50%),
                linear-gradient(
                        to top,
                        #0a190b 0%,
                        #255226 18%,
                        #8bc34a 49%,
                        #1e6f20b3 50%,
                        transparent 50%
                );
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100vw;
        height: 100vh;
        perspective: 100vmin;
}

body *,
*:before,
*:after {
        box-sizing: border-box;
        position: absolute;
        margin: 0;
        padding: 0;
        box-sizing: inherit;
}

.dog {
        width: 80vmin;
        height: 60vmin; /*
    background: url(./pointer2.jpg) no-repeat center center;
    background-size: cover;
        transform: scale(1.75);*/
}

.dog div,
.dog span,
.dog *:before,
.dog *:after {
        background: var(--brown1);
}

.dog.shadow {
        filter: brightness(0) drop-shadow(0px 0px 2px black)
                drop-shadow(0px 0px 2px black);
        transform: rotateX(65deg) rotateZ(-1deg)
                translate3d(-9.5vmin, 4.75vmin, -10vmin) scale3d(0.82, 0.85, 1) skewX(25deg);
        transform-style: preserve-3d;
        z-index: -2;
        opacity: 0.15;
}

.dog .body {
        width: 25vmin;
        height: 19.5vmin;
        left: 14vmin;
        top: 15.5vmin;
        border-radius: 0 1vmin 10vmin 12vmin;
        transform: rotate(6deg);
        background: radial-gradient(
                        ellipse at 2.53% 3%,
                        var(--brown4) 0.15vmin,
                        transparent 0.2vmin
                ),
                radial-gradient(ellipse at 2% 2%, var(--brown4) 0.2vmin, transparent 0.25vmin),
                radial-gradient(
                        circle at 21% 37%,
                        var(--brown4) 0.2vmin,
                        transparent 0.25vmin
                ),
                radial-gradient(
                        circle at 21% 38%,
                        var(--brown4) 0.25vmin,
                        transparent 0.3vmin
                ),
                radial-gradient(
                        ellipse at 16% 57%,
                        var(--brown4) 0.25vmin,
                        transparent 0.35vmin
                ),
                radial-gradient(
                        circle at 13% 33%,
                        var(--brown4) 0.2vmin,
                        transparent 0.275vmin
                ),
                radial-gradient(
                        ellipse at 51% 95%,
                        var(--brown4) 0.2vmin,
                        transparent 0.25vmin
                ),
                radial-gradient(
                        ellipse at 36% 69%,
                        var(--brown4) 0.25vmin,
                        transparent 0.3vmin
                ),
                radial-gradient(
                        ellipse at 42% 85%,
                        var(--brown4) 0.15vmin,
                        transparent 0.2vmin
                ),
                radial-gradient(
                        ellipse at 38% 25%,
                        var(--brown4) 0.2vmin,
                        transparent 0.25vmin
                ),
                radial-gradient(
                        ellipse at 42% 49%,
                        var(--brown4) 0.3vmin,
                        transparent 0.35vmin
                ),
                var(--brown1) !important;
}

.dog .body:before {
        width: 10vmin;
        height: 4vmin;
        transform: rotate(16deg) translate(3vmin, -2vmin);
}

.dog .body:after {
        background: radial-gradient(
                        ellipse at 44% 36%,
                        var(--brown4) 0.3vmin,
                        transparent 0.5vmin
                ),
                radial-gradient(
                        ellipse at 43% 40%,
                        var(--brown4) 0.5vmin,
                        transparent 0.65vmin
                ),
                var(--brown1) !important;
        width: 14vmin;
        height: 4vmin;
        transform: rotate(-34deg) translate(7vmin, 18.75vmin);
        border-bottom-left-radius: 3vmin;
}

.dog .body span {
        background: radial-gradient(
                        circle at 31.45% 15.5%,
                        var(--brown4) 0.175vmin,
                        transparent 0.225vmin
                ),
                radial-gradient(
                        ellipse at 51% 14%,
                        var(--brown4) 0.2vmin,
                        transparent 0.3vmin
                ),
                radial-gradient(circle at 32% 14%, var(--brown4) 0.2vmin, transparent 0.3vmin),
                radial-gradient(
                        ellipse at 40% 36%,
                        var(--brown4) 0.25vmin,
                        transparent 0.35vmin
                ),
                radial-gradient(circle at 64% 33%, var(--brown4) 14%, transparent 14.5%),
                radial-gradient(circle at 65% 26%, var(--brown4) 14%, transparent 14.5%),
                radial-gradient(circle at 66% 23%, var(--brown4) 14%, transparent 14.5%),
                radial-gradient(circle at 68% 23%, var(--brown4) 14%, transparent 14.5%),
                radial-gradient(circle at 73% 19%, var(--brown4) 12%, transparent 12.5%),
                radial-gradient(circle at 82% 18%, var(--brown4) 10%, transparent 10.5%),
                var(--brown1) !important;
        width: 27vmin;
        height: 11.5vmin;
        left: 17.25vmin;
        transform: rotate(-5deg);
        top: -1vmin;
        border-top-right-radius: 12vmin;
}

.dog .body span:before {
        width: 5vmin;
        height: 2vmin;
        left: 11vmin;
        top: 9.95vmin;
        transform: rotate(-19deg);
}

.dog .body .spots {
        width: 12vmin;
        height: 19.5vmin;
        left: 9.75vmin;
        top: -0.5vmin;
        border-radius: 15vmin 8vmin 10vmin 12vmin;
        transform: rotate(15deg);
        z-index: 1;
        background: radial-gradient(
                        ellipse at 55% 62%,
                        var(--brown4) 36%,
                        transparent 37%
                ),
                radial-gradient(ellipse at 48% 59%, var(--brown4) 36%, transparent 37%),
                radial-gradient(ellipse at 47% 39%, var(--brown4) 36%, transparent 37%),
                radial-gradient(circle at 48% 31%, var(--brown4) 29%, transparent 30%),
                radial-gradient(ellipse at 57% 53%, var(--brown4) 36%, transparent 37%),
                radial-gradient(circle at 58% 20%, var(--brown4) 20%, transparent 21%),
                radial-gradient(circle at 69% 15%, var(--brown4) 14%, transparent 15%) !important;
}

.dog .body .spots:before {
        width: 4vmin;
        height: 7vmin;
        top: 10.5vmin;
        border: 0.25vmin solid transparent;
        border-radius: 46%;
        transform: rotate(-36deg);
        left: -2.5vmin;
        background: transparent !important;
        filter: blur(0.25px);
        border-left: 0.4vmin solid var(--brown2);
}

.dog .body .spots:after {
        width: 1vmin;
        height: 2.5vmin;
        top: 3vmin;
        border: 0.25vmin solid var(--brown2);
        border-top-color: transparent;
        border-right-color: transparent;
        border-radius: 23%;
        border-bottom-color: transparent;
        transform: rotate(122deg);
        left: 20.75vmin;
        background: transparent !important;
        filter: blur(0.25px);
        border-left-width: 0.35vmin;
}

.dog .neck {
        background: radial-gradient(
                circle at -5% -7%,
                var(--brown4) 20.5%,
                var(--brown1) 21.5%
        ) !important;
        width: 6vmin;
        height: 13vmin;
        left: 13vmin;
        top: 12vmin;
        transform: rotate(-26deg);
}

.dog .neck::before {
        background: radial-gradient(
                        ellipse at 63% 55%,
                        var(--brown4) 0.15vmin,
                        transparent 0.2vmin
                ),
                radial-gradient(circle at 27% 29%, var(--brown4) 20%, transparent 20.5%),
                radial-gradient(circle at 8% 29.5%, var(--brown4) 20%, transparent 20.5%),
                radial-gradient(circle at 19% 30%, var(--brown4) 20%, transparent 20.5%),
                radial-gradient(circle at 43% 28%, var(--brown4) 20%, transparent 20.5%),
                radial-gradient(circle at 25% 28%, var(--brown4) 20%, transparent 20.5%),
                radial-gradient(circle at 60% 25%, var(--brown4) 20%, transparent 20.5%),
                radial-gradient(circle at 64% 22%, var(--brown4) 22%, transparent 22.5%),
                linear-gradient(137deg, var(--brown4) 6vmin, var(--brown1) 5.1vmin) !important;
        width: 9vmin;
        height: 18vmin;
        transform: rotate(-15deg) translate(2.7vmin, -7vmin);
        border-radius: 5vmin;
}

.dog .neck::after {
        width: 1vmin;
        height: 5vmin;
        transform: rotate(13deg) translate(0.95vmin, 6vmin);
        border-radius: 5vmin;
}

.dog .head {
        background: radial-gradient(
                        circle at 12% 107%,
                        var(--brown4) 60%,
                        transparent 20.5%
                ),
                radial-gradient(circle at 65% -50%, var(--brown4) 60%, transparent 20.5%) !important;
        width: 10.5vmin;
        height: 8vmin;
        top: 3.85vmin;
        left: 5.5vmin;
        border-radius: 5vmin 4vmin 0 0;
}

.dog .head:before {
        background: radial-gradient(
                circle a.........完整代码请登录后点击上方下载按钮下载查看