css实现在家里跑步机跑步动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css实现在家里跑步机跑步动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">




    <style>
        :root {
          --skin-tone : #f1c27d;
          --anim-speed : .75s;
          --wall: #ccc4b8;
          --couch: #D48640;
          --couch-border: #AD6D34;
          --couch-legs: #986035;
          --rug-base: #e8d8bc;
          --rug-light-grey: #a89e87;
          --rug-dark-grey: #5E5246;
          --rug-orange: #D97A24;
          --rug-border: #A39D93;
          --artwork-white: #F5EEE0;
          --artwork-canvas-frame: #B3ADA2;
          --artwork-frame: #453E37;
          --artwork-blue: #11A5DB;
          --artwork-yellow: #EAD53D;
          --pot: #47422E;
          --dirt: #6E5330;
          --leaf: #768C14;
          --leaf-dark: #5C6E0F;
          --artwork-1-gradient-1: rgba(72, 98, 245, 0.5);
          --artwork-1-gradient-2: rgba(235, 146, 95, 0.5);
          --artwork-2-dark-blue: #6A6170;
          --artwork-2-light-blue: #95CDE5;
          --artwork-3-light: #DDD9D6;
          --artwork-3-blue: #11A5D8;
          --artwork-3-yellow: #E3D258;
          --artwork-4-sky: #9EC7DD;
          --artwork-4-rock: #389DD7;
          --artwork-4-yellow: #DFEF90;
          --artwork-4-green: #6FCE9F;
          --artwork-4-pink: #B79398;
          --lamp-pole: #A39D9D;
          --lamp-light: #E2E0CF;
        }
        
        html {
          font-size: 10px;
        }
        
        body {
          align-items: center;
          background-color: var(--wall);
          display: flex;
          font-family: "Lilita One";
          justify-content: center;
          margin: 0;
        }
        
        .container {
          align-items: center;
          background-color: var(--wall);
          display: flex;
          flex-direction: column;
          height: 100vh;
          justify-content: center;
          position: relative;
          width: 100vw;
        }
        
        a {
          color: var(--rug-orange);
          cursor: pointer;
          font-size: 1.3rem;
          text-decoration: none;
          transform: translateY(20rem);
        }
        a:hover {
          text-decoration: underline;
        }
        
        .living-room {
          background-image: linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), linear-gradient(90deg, var(--couch-legs), var(--couch-legs)), linear-gradient(90deg, var(--couch-border) 7%, var(--couch) 7% 93%, var(--couch-border) 93%), radial-gradient(circle at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(circle at 50% 100%, var(--couch-border) 50%, transparent 50%), linear-gradient(90deg, var(--couch-border) 7%, var(--couch) 7% 93%, var(--couch-border) 93%), radial-gradient(circle at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(circle at 50% 100%, var(--couch-border) 50%, transparent 50%), linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), radial-gradient(ellipse at 100% 90%, var(--leaf), 50%, transparent 50%), radial-gradient(ellipse at 100% 0%, var(--leaf), 50%, transparent 50%), radial-gradient(circle at 0% 50%, var(--leaf) 50%, transparent 50%), radial-gradient(ellipse at 0% 100%, transparent, 48%, var(--leaf) 48% 52%, transparent 52%), linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), radial-gradient(ellipse at 100% 90%, var(--leaf), 50%, transparent 50%), radial-gradient(ellipse at 100% 0%, var(--leaf), 50%, transparent 50%), radial-gradient(circle at 0% 50%, var(--leaf) 50%, transparent 50%), radial-gradient(ellipse at 0% 100%, transparent, 48%, var(--leaf) 48% 52%, transparent 52%), linear-gradient(90deg, var(--leaf-dark), var(--leaf-dark)), radial-gradient(ellipse at 0% 90%, var(--leaf), 50%, transparent 50%), radial-gradient(ellipse at 0% 0%, var(--leaf), 50%, transparent 50%), radial-gradient(circle at 100% 50%, var(--leaf) 50%, transparent 50%), radial-gradient(ellipse at 100% 100%, transparent, 48%, var(--leaf) 48% 52%, transparent 52%), radial-gradient(ellipse at 50% 100%, var(--dirt) 50%, transparent 50%), radial-gradient(circle at 50% 0%, var(--pot) 50%, transparent 50%), linear-gradient(90deg, var(--pot), var(--pot)), radial-gradient(ellipse at 50% 100%, var(--pot) 50%, transparent 50%), radial-gradient(circle at 50% 0%, var(--lamp-pole) 50%, transparent 50%), radial-gradient(circle at 50% 0%, var(--lamp-light) 50%, transparent 50%), linear-gradient(90deg, var(--lamp-pole), var(--lamp-pole)), radial-gradient(ellipse at 50% 50%, var(--lamp-pole) 50%, transparent 50%), linear-gradient(0deg, var(--artwork-1-gradient-1), var(--artwork-1-gradient-2)), linear-gradient(90deg, var(--artwork-canvas-frame) 5%, transparent 5% 95%, var(--artwork-canvas-frame) 95%), linear-gradient(180deg, var(--artwork-canvas-frame) 5%, var(--artwork-white) 5% 95%, var(--artwork-canvas-frame) 95%), radial-gradient(circle at 50% 50%, var(--artwork-2-dark-blue) 50%, transparent 50%), radial-gradient(circle at 50% 50%, var(--artwork-white) 50%, transparent 50%), linear-gradient(0deg, var(--artwork-2-dark-blue) 37%, var(--artwork-2-light-blue) 37%), linear-gradient(90deg, var(--artwork-white), var(--artwork-white)), linear-gradient(90deg, var(--artwork-frame), var(--artwork-frame)), radial-gradient(circle at 50% 50%, var(--artwork-3-blue) 50%, transparent 50%), radial-gradient(circle at 50% 50%, var(--artwork-3-yellow) 50%, transparent 50%), linear-gradient(0deg, var(--artwork-3-blue) 35%, var(--artwork-3-light) 35%), linear-gradient(90deg, var(--artwork-white), var(--artwork-white)), linear-gradient(90deg, var(--artwork-frame), var(--artwork-frame)), linear-gradient(225deg, transparent 25%, var(--artwork-yellow) 25% 90%, transparent 90%), linear-gradient(135deg, transparent 25%, var(--artwork-yellow) 25% 90%, transparent 90%), linear-gradient(90deg, var(--artwork-white) 20%, var(--artwork-4-pink) 20% 50%, var(--artwork-4-green) 50%), linear-gradient(90deg, var(--artwork-4-rock) 65%, var(--artwork-white) 65% 85%, var(--artwork-4-rock) 85%), radial-gradient(circle at 50% 50%, var(--artwork-4-sky) 90%, transparent 90%), linear-gradient(90deg, var(--artwork-canvas-frame) 3%, transparent 3% 97%, var(--artwork-canvas-frame) 97%), linear-gradient(180deg, var(--artwork-canvas-frame) 3%, var(--artwork-white) 3% 97%, var(--artwork-canvas-frame) 97%), radial-gradient(ellipse at 100%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border), var(--couch-border)), radial-gradient(ellipse at 0%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border) 1.5%, var(--couch) 1.5% 98.5%, var(--couch-border) 98.5%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), radial-gradient(ellipse at 100% 35%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border), var(--couch-border)), radial-gradient(ellipse at 0% 35%, transparent 45%, var(--couch-border) 45% 55%, transparent 55%), linear-gradient(90deg, var(--couch-border) 2%, var(--couch) 2% 98%, var(--couch-border) 98%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch) 50%, transparent 50%), radial-gradient(ellipse at 50% 100%, var(--couch-border) 50%, transparent 50%), linear-gradient(170deg, transparent 50%, var(--couch-border) 50% 53%, var(--couch) 53%), linear-gradient(190deg, transparent 50%, var(--couch-border) 50% 53%, var(--couch) 53%), linear-gradient(120deg, var(--wall) 14%, var(--rug-border) 14% 15.5%, transparent 15.5%), linear-gradient(60deg, transparent 84.5%, var(--rug-border) 84.5% 86%, var(--wall) 86%), linear-gradient(90deg, var(--rug-border), var(--rug-border)), linear-gradient(90deg, var(--rug-border), var(--rug-border)), linear-gradient(30deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(330deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(30deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(330deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(30deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(330deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(30deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 14%, transparent 14% 22%, var(--rug-dark-grey) 22% 28%, var(--rug-light-grey) 28% 34%, transparent 34%), linear-gradient(150deg, var(--rug-orange) 0% 15%, var(--rug-light-grey) 15% 19%, transparent 19% 25%, var(--rug-dark-grey) 25% 30%, var(--rug-light-grey) 30% 34%, transparent 34%), linear-gradient(330deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), linear-gradient(30deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), linear-gradient(220deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 27%, var(--rug-light-grey) 27% 33%, transparent 33%), linear-gradient(140deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 27%, var(--rug-light-grey) 27% 33%, transparent 33%), linear-gradient(330deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), linear-gradient(30deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 16%, transparent 16% 23%, var(--rug-dark-grey) 23% 31%, var(--rug-light-grey) 31% 38%, transparent 38%), linear-gradient(220deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 26.5%, var(--rug-light-grey) 26.5% 33%, transparent 33%), linear-gradient(140deg, var(--rug-orange) 0% 7.5%, var(--rug-light-grey) 7.5% 13.5%, transparent 13.5% 20%, var(--rug-dark-grey) 20% 26.5%, var(--rug-light-grey) 26.5% 33%, transparent 33%), linear-gradient(330deg, var(--rug-orange) 0% 8%, var(--rug-light-grey) 8% 14%, transparent 14% 22%, var(--rug-dark-grey) 22% 28%, var(--rug-light-grey) 28% 34%, transparent 34%), linear-gradient(210deg, var(--rug-orange) 0% 15%, var(--rug-light-grey) 15% 19%, transparent 19% 25%, var(--rug-dark-grey) 25% 30%, var(--rug-light-grey) 30% 34%, transparent 34%), linear-gradient(150deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(210deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(150deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(210deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(150deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(210deg, transparent 65%, var(--rug-dark-grey) 65% 75%, transparent 75% 80%, var(--rug-light-grey) 80% 89%, transparent 89%), linear-gradient(120deg, transparent 15%, var(--rug-base) 15% 70%, transparent 70%), linear-gradient(60deg, transparent 30%, var(--rug-base) 30% 85%, transparent 85%);
          background-repeat: no-repeat;
          background-position: 50% 72%, 30% 75%, 70% 75%, 23.7% 64.5%, 24.2% 48.5%, 23.7% 47.5%, 76.3% 64.5%, 76% 48.5%, 76.3% 47.5%, 4% 30.2%, -1% 27%, -1% 32%, 12.3% 29%, 14% 31%, 2% 15%, -4% 10.3%, -4% 16.4%, 11.3% 11.9%, 15% -4%, 31% 37.6%, 32.7% 35.4%, 32.7% 39.5%, 26.3% 37%, 20% 41%, 18.3% 58%, 16% 71.3%, 18.2% 65%, 17.1% 57.8%, 80.1% 26%, 81.7% 22%, 79% 50%, 83% 72%, 41.1% 7.5%, 41% 7%, 41% 7%, 62.4% 3.5%, 61% 5%, 61.5% 3.1%, 61.7% 2%, 62% 1.3%, 38% 22%, 43.5% 23%, 37.7% 23%, 37.1% 22%, 36.7% 21.5%, 61.3% 20.5%, 59.5% 20.5%, 60.5% 22.4%, 61.5% 27.5%, 61.7% 23.5%, 62% 22.5%, 62% 22.5%, 39% 68.5%, 50% 63.5%, 61% 68.5%, 50% 67%, 50% 58.5%, 50% 57.5%, 41.5% 61%, 50% 61%, 58.5% 61%, 50% 51%, 35.7% 43%, 35.7% 42.3%, 45% 43%, 45% 42.3%, 54.3% 43%, 54.3% 42.3%, 63.9% 43%, 63.9% 42.3%, 28% 45%, 72% 45%, 10.........完整代码请登录后点击上方下载按钮下载查看