神奇的CSS3

众所周知HTML，CSS 和 JavaScript是 Web 页面的“三驾马车”，分别负责网页的结构、样式和行为，共同组成了丰富多彩的 Web 世界。一个完整的网页，通常少不了其中任何一个。
提到网页绘图，我们往往会想到用 canvas、svg 或者 WebGL，甚至直接用各种图片格式。但是，你想过只用 HTML和 CSS能实现多复杂的视觉效果吗？最近在网上看到一位大佬的作品，更是惊掉了下巴：只用一个 div 元素，加上 CSS 代码，就实现了很多惊艳的图形和动画！
源网站
demo在线代码

一、

1599468501(1).jpg
css
#cybertruck {
      background-color: black;
      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(32%, #0c0e11), color-stop(32%, black));
      background-image: linear-gradient(to top, #0c0e11 32%, black 32%);
    }

    #cybertruck div {
      width: 650px;
      height: 210px;
      margin-left: -265px;
      margin-top: -105px;
      background-repeat: no-repeat;
      background-image: linear-gradient(161deg, transparent 11%, #1d232a 11.5%), linear-gradient(161deg, transparent 50%, #555 50%), linear-gradient(to right, #1d232a, #1d232a), radial-gradient(circle at center, #ff0 8%, #f00 30%, transparent 80%), linear-gradient(to right, transparent, rgba(255, 0, 0, 0.6) 30%, rgba(255, 0, 0, 0.6) 70%, transparent), linear-gradient(to bottom, transparent, rgba(255, 0, 0, 0.6) 30%, rgba(255, 0, 0, 0.6) 70%, transparent), radial-gradient(circle at center bottom, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 50%, transparent 50%), linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), linear-gradient(40deg, transparent 40%, rgba(255, 255, 255, 0.1) 41%, rgba(255, 255, 255, 0.1) 44%, transparent 45%), linear-gradient(-40deg, transparent 40%, rgba(255, 255, 255, 0.1) 41%, rgba(255, 255, 255, 0.1) 44%, transparent 45%), linear-gradient(320deg, transparent 40%, rgba(0, 0, 0, 0.7) 41%, rgba(0, 0, 0, 0.7) 44%, transparent 45%), linear-gradient(-320deg, transparent 40%, rgba(0, 0, 0, 0.7) 41%, rgba(0, 0, 0, 0.7) 44%, transparent 45%), radial-gradient(circle, #0f1215 50%, transparent 50%), radial-gradient(circle at center top, rgba(255, 255, 255, 0.1) 50%, transparent 50%), radial-gradient(circle at center top, rgba(0, 0, 0, 0.4) 50%, transparent 50%), radial-gradient(circle at center bottom, rgba(255, 255, 255, 0.1) 50%, transparent 50%), radial-gradient(circle, rgba(0, 0, 0, 0.3) 50%, transparent 50%), radial-gradient(circle, #1d232a 50%, transparent 50%), linear-gradient(70deg, transparent 10%, #4a596b 11%), linear-gradient(-60deg, transparent 10%, #4a596b 11%), linear-gradient(127deg, transparent 40%, rgba(0, 0, 0, 0.2) 50%, #333d49 51%, #333d49 62%, black 63%), linear-gradient(-125deg, transparent 35%, rgba(0, 0, 0, 0.2) 45%, #333d49 46%, #333d49 57%, black 58%), linear-gradient(to right, black, black), radial-gradient(circle at center bottom, transparent 45%, rgba(255, 255, 255, 0.1) 45%, rgba(255, 255, 255, 0.1) 50%, transparent 50%), linear-gradient(to right, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.1)), linear-gradient(40deg, transparent 40%, rgba(255, 255, 255, 0.1) 41%, rgba(255, 255, 255, 0.1) 44%, transparent 45%), linear-gradient(-40deg, transparent 40%, rgba(255, 255, 255, 0.1) 41%, rgba(255, 255, 255, 0.1) 44%, transparent 45%), linear-gradient(320deg, transparent 40%, rgba(0, 0, 0, 0.7) 41%, rgba(0, 0, 0, 0.7) 44%, transparent 45%), linear-gradient(-320deg, transparent 40%, rgba(0, 0, 0, 0.7) 41%, rgba(0, 0, 0, 0.7) 44%, transparent 45%), radial-gradient(circle, #0f1215 50%, transparent 50%), radial-gradient(circle at center top, rgba(255, 255, 255, 0.1) 50%, transparent 50%), radial-gradient(circle at center top, rgba(0, 0, 0, 0.4) 50%, transparent 50%), radial-gradient(circle at center bottom, rgba(255, 255, 255, 0.1) 50%, transparent 50%), radial-gradient(circle, rgba(0, 0, 0, 0.3) 50%, transparent 50%), radial-gradient(circle, #1d232a 50%, transparent 50%), linear-gradient(60deg, transparent 10%, #4a596b 11%), linear-gradient(-60deg, transparent 10%, #4a596b 11%), linear-gradient(127deg, transparent 32%, rgba(0, 0, 0, 0.2) 42%, #333d49 43%, #333d49 53%, black 54%), linear-gradient(-125deg, transparent 22%, rgba(0, 0, 0, 0.2) 32%, #1d232a 33%, #1d232a 43%, black 44%), linear-gradient(to right, black, black), linear-gradient(89deg, transparent 50%, black 51%, black 53%, transparent 54%), linear-gradient(170deg, transparent 50%, black 50%), linear-gradient(100deg, transparent 50%, black 51%, black 52%, transparent 53%), linear-gradient(90deg, transparent 50%, black 51%, black 52%, transparent 53%), linear-gradient(to right, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0)), linear-gradient(98deg, transparent 55%, black 56%), linear-gradient(176deg, transparent 32%, #1d232a 33%), linear-gradient(179deg, #1d232a 85%, black 86%), linear-gradient(179deg, transparent 40%, #1d232a 45%, #1d232a 50%, transparent 55%), linear-gradient(105deg, transparent 50%, #1d232a 51%, #1d232a 53%, transparent 54%), linear-gradient(100deg, transparent 50%, #1d232a 51%, #1d232a 53%, transparent 54%), linear-gradient(81deg, transparent 50%, #1d232a 51%, #1d232a 53%, transparent 54%), linear-gradient(81deg, transparent 38%, black 40%, black 49%, #ddd 51%), linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent), linear-gradient(to left, rgba(0, 0, 0, 0.3), transparent), linear-gradient(161deg, black 50%, #ddd 51%, #ddd 55%, transparent 56%), linear-gradient(-174deg, black 33%, #ddd 34%, #ddd 40%, transparent 41%), linear-gradient(to right, #ddd, #ddd), linear-gradient(176deg, transparent 34%, black 35%, black 45%, #ddd 46%, #ddd 60%, transparent 60%), linear-gradient(161deg, black 56%, transparent 57%), linear-gradient(-174deg, black 41%, transparent 42%), linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.05) 31%, rgba(255, 255, 255, 0.05) 40%, rgba(0, 0, 0, 0.6) 41%, rgba(0, 0, 0, 0.6) 45%, rgba(255, 255, 255, 0.1) 46%, rgba(255, 255, 255, 0.1) 55%, transparent 56%), linear-gradient(103deg, transparent 30%, rgba(255, 255, 255, 0.1) 31%, rgba(255, 255, 255, 0.1) 34%, rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.3) 38%, transparent 39%), linear-gradient(93deg, transparent 29%, rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0.2) 33%, rgba(255, 255, 255, 0.1) 34%, rgba(255, 255, 255, 0.1) 50%, transparent 51%), linear-gradient(to right, rgba(0, 0, 0, 0.3) 20%, rgba(255, 255, 255, 0.3) 21%), linear-gradient(to top, rgba(255, 255, 255, 0.9) 50%, rgba(255, 255, 255, 0) 65%), linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.7));
      background-size: 20px 45px, 5px 5px, 26px 10px, 12px 12px, 55px 1px, 1px 55px, 130px 65px, 10px 7px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 20px 20px, 24px 12px, 34px 16px, 34px 16px, 90px 90px, 130px 130px, 40px 6px, 40px 6px, 35px 38px, 40px 51px, 78px 60px, 130px 65px, 10px 7px, 16px 16px, 16px 16px, 16px 16px, 16px 16px, 20px 20px, 24px 12px, 34px 16px, 34px 16px, 90px 90px, 130px 130px, 40px 9px, 40px 9px, 60px 58px, 60px 55px, 75px 60px, 30px 80px, 150px 30px, 30px 80px, 30px 95px, 45px 45px, 20px 120px, 600px 87px, 500px 50px, 254px 20px, 30px 30px, 30px 30px, 30px 30px, 25px 22px, 200px 100px, 200px 100px, 230px 80px, 370px 80px, 220px 60px, 550px 50px, 230px 80px, 370px 80px, 30px 80px, 30px 80px, 30px 80px, 10px 80px, 7px 80px, 350px 60px;
      background-position: 5px 80px, 0 125px, 0 128px, right 25px top 35px, right top 40px, right 30px top 15px, 25px 90px, 85px 123px, 68px 130px, 96px 130px, 68px 160px, 96px 160px, 80px 145px, 78px 156px, 73px 156px, 73px 140px, 45px 110px, 25px 90px, 50px 89px, 90px 89px, 20px 89px, 124px 89px, 52px 89px, 435px 90px, 495px 123px, 478px 130px, 506px 130px, 478px 160px, 506px 160px, 490px 145px, 488px 156px, 483px 156px, 483px 140px, 455px 110px, 435px 90px, 460px 78px, 500px 78px, 416px 78px, 512px 78px, 465px 78px, 150px 70px, 500px 115px, 250px 65px, 380px 55px, 25px 80px, right 25px top 15px, 25px 39px, 115px 90px, 165px 145px, 148px 60px, 257px 52px, 380px 42px, 380px 23px, 25px 0, right 25px top 0, 25px 0, right 25px top 0, right 25px top 20px, 50px 29px, 25px 0, right 25px top 0, 170px 30px, 260px 10px, 277px 10px, 382px 10px, 375px 0, 50px 0;
    }

    #cybertruck div:before {
      width: 200px;
      height: 2px;
      left: -175px;
      top: 83px;
      background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 255, 255, 0.2)), color-stop(60%, rgba(0, 255, 255, 0.8)));
      background-image: linear-gradient(to right, rgba(0, 255, 255, 0.2), rgba(0, 255, 255, 0.8) 60%);
      border-top-left-radius: 300px 10px;
      border-bottom-left-radius: 300px 10px;
      -webkit-box-shadow: -20px 0 10px 2px rgba(0, 255, 255, 0.4), 30px 0 20px 10px rgba(0, 255, 255, 0.2);
      box-shadow: -20px 0 10px 2px rgba(0, 255, 255, 0.4), 30px 0 20px 10px rgba(0, 255, 255, 0.2);
    }

    #cybertruck div:after {
      width: 20px;
      height: 7px;
      left: 5px;
      top: 80px;
      background-color: white;
      border-top-left-radius: 50px 30px;
      -webkit-box-shadow: 0 0 15px 7px rgba(0, 255, 255, 0.8), 0 0 40px 25px rgba(0, 255, 255, 0.5), -75px 0 30px 15px rgba(0, 255, 255, 0.2);
      box-shadow: 0 0 15px 7px rgba(0, 255, 255, 0.8), 0 0 40px 25px rgba(0, 255, 255, 0.5), -75px 0 30px 15px rgba(0, 255, 255, 0.2);
    }
html
 <div class="entry"
    id="cybertruck">
    <div></div>
  </div>

二、

1599468722(1).jpg
css
#xray {
      background-color: #e0ffff;
      background-image: linear-gradient(to right, transparent 30%, #d2b48c 30%, #d2b48c 47%, #ddc7a9 47%, #ddc7a9 53%, #d2b48c 53%, #d2b48c 70%, transparent 70%), linear-gradient(to right, transparent, rgba(0, 0, 0, 0.3) 20%, rgba(0, 0, 0, 0.3) 80%, transparent), linear-gradient(45deg, #bbb 22%, #888 22%, #888 25%, #bbb 25%, #bbb 75%, #888 75%, #888 78%, #bbb 78%), radial-gradient(circle, #888 8px, rgba(255, 255, 255, 0.9) 8px, rgba(255, 255, 255, 0.9) 11px, transparent 11px), linear-gradient(-45deg, #bbb 22%, #888 22%, #888 25%, #bbb 25%, #bbb 75%, #888 75%, #888 78%, #bbb 78%), linear-gradient(to bottom, #666 50%, #555 50%);
      background-size: 200px 70px, 290px 11.5%, 200px 7px, 100px 30px, 200px 7px, 200px 10%;
      background-position: 50% 56.2%, 50% 72.2%, 0 65%, 50% 71%, 0 75%, 0 72%;
      background-repeat: repeat-x, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x;
      -webkit-animation: moveDiv 2000ms linear infinite;
      animation: moveDiv 2000ms linear infinite;
    }

    #xray:before {
      content: '';
      width: 200px;
      height: 202px;
      position: absolute;
      left: 50%;
      margin-left: -100px;
      top: 27%;
      background-image: linear-gradient(165deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%), linear-gradient(to right, #002525, #002525), linear-gradient(to right, transparent 20%, #1aa093 20%, #1aa093 40%, transparent 40%, transparent 60%, #1aa093 60%, #1aa093 80%, transparent 80%), radial-gradient(circle, #1ba99b 50%, transparent 50%), radial-gradient(circle, #1ba99b 50%, transparent 50%), radial-gradient(circle, #1ba99b 50%, transparent 50%), linear-gradient(to bottom, #40e0d0 90%, #21ccbb 90%);
      background-size: 164px 130px, 170px 130px, 100% 10px, 16px 16px, 16px 16px, 16px 16px, 100% 100%;
      background-position: 50% 27%, 50% 22%, 50% 100%, 70% 85%, 80% 85%, 90% 85%, 0 0;
      background-repeat: no-repeat;
      border-radius: 10px 10px 3px 3px;
      border-top: 3px solid #21ccbb;
    }

    #xray:after {
      content: '';
      width: 170px;
      height: 130px;
      position: absolute;
      left: 50%;
      margin-left: -85px;
      top: 38%;
      background-image: -webkit-gradient(linear, left top, right top, from(white), to(white)), repeating-linear-gradient(to bottom, white, white 2px, transparent 2px, transparent 12px), -webkit-gradient(linear, left top, right top, color-stop(30%, transparent), color-stop(30%, #10635a), color-stop(40%, transparent), color-stop(60%, transparent), color-stop(70%, #10635a), color-stop(70%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(35%, transparent), color-stop(34%, #1aa093), color-stop(44%, #1aa093), color-stop(44%, transparent), color-stop(45%, transparent), color-stop(45%, #21ccbb), color-stop(55%, #21ccbb), color-stop(55%, transparent), color-stop(56%, transparent), color-stop(56%, #168a7f), color-stop(65%, #168a7f), color-stop(65%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(35%, transparent), color-stop(34%, #1eb6a7), color-stop(44%, #1eb6a7), color-stop(44%, transparent), color-stop(45%, transparent), color-stop(45%, #1aa093), color-stop(55%, #1aa093), color-stop(55%, transparent), color-stop(56%, transparent), color-stop(56%, #21ccbb), color-stop(65%, #21ccbb), color-stop(65%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(35%, transparent), color-stop(34%, #168a7f), color-stop(44%, #168a7f), color-stop(44%, transparent), color-stop(45%, transparent), color-stop(45%, #1aa093), color-stop(55%, #1aa093), color-stop(55%, transparent), color-stop(56%, transparent), color-stop(56%, #1eb6a7), color-stop(65%, #1eb6a7), color-stop(65%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(30%, transparent), color-stop(30%, #003e3f), color-stop(70%, #003e3f), color-stop(70%, transparent));
      background-image: linear-gradient(to right, white, white), repeating-linear-gradient(to bottom, white, white 2px, transparent 2px, transparent 12px), linear-gradient(to right, transparent 30%, #10635a 30%, transparent 40%, transparent 60%, #10635a 70%, transparent 70%), linear-gradient(to right, transparent 35%, #1aa093 34%, #1aa093 44%, transparent 44%, transparent 45%, #21ccbb 45%, #21ccbb 55%, transparent 55%, transparent 56%, #168a7f 56%, #168a7f 65%, transparent 65%), linear-gradient(to right, transparent 35%, #1eb6a7 34%, #1eb6a7 44%, transparent 44%, transparent 45%, #1aa093 45%, #1aa093 55%, transparent 55%, transparent 56%, #21ccbb 56%, #21ccbb 65%, transparent 65%), linear-gradient(to right, transparent 35%, #168a7f 34%, #168a7f 44%, transparent 44%, transparent 45%, #1aa093 45%, #1aa093 55%, transparent 55%, transparent 56%, #1eb6a7 56%, #1eb6a7 65%, transparent 65%), linear-gradient(to right, transparent 30%, #003e3f 30%, #003e3f 70%, transparent 70%);
      background-size: 2px 50px, 8px 50px, 200px 70px, 200px 18px, 200px 18px, 200px 18px, 200px 70px;
      background-position: 15px 40px, 16px 40px, 50% 56%, 50% 40%, 50% 58%, 50% 76%, 50% 56%;
      background-repeat: no-repeat, no-repeat, repeat-x, repeat-x, repeat-x, repeat-x, repeat-x;
      -webkit-animation: moveAfter 2000ms linear infinite;
      animation: moveAfter 2000ms linear infinite;
    }

    @keyframes moveDiv {
      100% {
        background-position-x: calc(50% + 200px), 50%, 200px, 50%, -200px, 0;
      }
    }

    @-webkit-keyframes moveDiv {
      to {
        background-position-x: calc(50% + 200px), 50%, 200px, 50%, -200px, 0
      }
    }

    @keyframes moveAfter {
      to {
        background-position-x: 15px, 16px, calc(50% + 200px), calc(50% + 200px), calc(50% + 200px), calc(50% + 200px), calc(50% + 200px)
      }
    }

    @-webkit-keyframes moveAfter {
      to {
        background-position-x: 15px, 16px, calc(50% + 200px), calc(50% + 200px), calc(50% + 200px), calc(50% + 200px), calc(50% + 200px)
      }
    }
html
<div class="entry"
    id="xray">
    <div></div>
  </div>

三、

1599468847(1).jpg
css
#pattern {
      background-image: linear-gradient(45deg, #639 33.142857143%, black 33.142857143%, black 34.28571429%, #4169e1 34.28571429%, #4169e1 41.28571429%, black 41.28571429%, black 42.42857143%, #228b22 42.42857143%, #228b22 49.42857143%, black 49.42857143%, black 50.57142857%, #ffd700 50.57142857%, #ffd700 57.57142857%, black 57.57142857%, black 58.71428571%, #ff8c00 58.71428571%, #ff8c00 65.71428571%, black 65.71428571%, black 66.85714286%, #dc143c 66.85714286%, #dc143c 73.85714286%, black 73.85714286%, black 75%, transparent 75%), linear-gradient(-45deg, #639 33.142857143%, black 33.142857143%, black 34.28571429%, #4169e1 34.28571429%, #4169e1 41.28571429%, black 41.28571429%, black 42.42857143%, #228b22 42.42857143%, #228b22 49.42857143%, black 49.42857143%, black 50.57142857%, #ffd700 50.57142857%, #ffd700 57.57142857%, black 57.57142857%, black 58.71428571%, #ff8c00 58.71428571%, #ff8c00 65.71428571%, black 65.71428571%, black 66.85714286%, #dc143c 66.85714286%, #dc143c 73.85714286%, black 73.85714286%, black 75%, transparent 75%);
      background-size: 100px 100px;
      background-position: 0 0;
      z-index: 5;
    }

    #pattern:before {
      background-image: linear-gradient(45deg, #639 8.142857143%, black 8.142857143%, black 9.28571429%, #4169e1 9.28571429%, #4169e1 16.28571429%, black 16.28571429%, black 17.42857143%, #228b22 17.42857143%, #228b22 24.42857143%, black 24.42857143%, black 25.57142857%, #ffd700 25.57142857%, #ffd700 32.57142857%, black 32.57142857%, black 33.71428571%, #ff8c00 33.71428571%, #ff8c00 40.71428571%, black 40.71428571%, black 41.85714286%, #dc143c 41.85714286%, #dc143c 48.85714286%, black 48.85714286%, black 50%, transparent 50%), linear-gradient(-45deg, #639 8.142857143%, black 8.142857143%, black 9.28571429%, #4169e1 9.28571429%, #4169e1 16.28571429%, black 16.28571429%, black 17.42857143%, #228b22 17.42857143%, #228b22 24.42857143%, black 24.42857143%, black 25.57142857%, #ffd700 25.57142857%, #ffd700 32.57142857%, black 32.57142857%, black 33.71428571%, #ff8c00 33.71428571%, #ff8c00 40.71428571%, black 40.71428571%, black 41.85714286%, #dc143c 41.85714286%, #dc143c 48.85714286%, black 48.85714286%, black 50%, transparent 50%);
      background-size: 100px 100px;
      background-position: 50px 0;
    }

    #pattern:before,
    #pattern:after {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
    }

    #pattern:after {
      background-image: linear-gradient(-45deg, black .5%, #ffd700 .5%, #ffd700 7.5%, black 7.5%, black 8.642857143%, #ff8c00 8.642857143%, #ff8c00 15.64285714%, black 15.64285714%, black 16.88571429%, #dc143c 16.88571429%, #dc143c 23.84285714%, black 23.84285714%, black 25%, transparent 25%);
      background-size: 100px 100px;
      background-position: 0 0;
    }
html
<div class="entry"
    id="pattern">
    <div></div>
  </div>

四、

1599469126(1).jpg
css
#dark {
      background-color: #111;
      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(5%, #222), color-stop(6%, #111), color-stop(7%, #111), color-stop(7%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(30%, #111), color-stop(30%, transparent)), -webkit-gradient(linear, left top, right top, from(#222), color-stop(5%, #2e2e2e), color-stop(5%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(6%, transparent), color-stop(6%, #222), color-stop(9%, #2e2e2e), color-stop(9%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(27%, transparent), color-stop(27%, #222), color-stop(34%, #2e2e2e), color-stop(34%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(51%, transparent), color-stop(51%, #222), color-stop(57%, #2e2e2e), color-stop(57%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(35%, #111), color-stop(35%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(42%, transparent), color-stop(42%, #222), color-stop(44%, #2e2e2e), color-stop(44%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(45%, transparent), color-stop(45%, #222), color-stop(47%, #2e2e2e), color-stop(47%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(48%, transparent), color-stop(48%, #222), color-stop(50%, #2e2e2e), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(87%, transparent), color-stop(87%, #222), color-stop(91%, #2e2e2e), color-stop(91%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(37.5%, #111), color-stop(37.5%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(14%, transparent), color-stop(14%, #222), color-stop(20%, #2e2e2e), color-stop(20%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(40%, #111), color-stop(40%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(10%, transparent), color-stop(10%, #222), color-stop(13%, #2e2e2e), color-stop(13%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(21%, transparent), color-stop(21%, #222), color-stop(25%, #1a1a1a), color-stop(25%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(58%, transparent), color-stop(58%, #222), color-stop(64%, #2e2e2e), color-stop(64%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(92%, transparent), color-stop(92%, #222), color-stop(95%, #2e2e2e), color-stop(95%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(48%, #111), color-stop(48%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(96%, transparent), color-stop(96%, #222), color-stop(99%, #1a1a1a), color-stop(99%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(68.5%, transparent), color-stop(76%, transparent), color-stop(76%, #111), color-stop(77.5%, #111), color-stop(77.5%, transparent), color-stop(86%, transparent), color-stop(86%, #111), color-stop(87.5%, #111), color-stop(87.5%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(35%, transparent), color-stop(35%, #222), color-stop(41%, #2e2e2e), color-stop(41%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(68%, #111), color-stop(68%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(78%, transparent), color-stop(78%, #333), color-stop(80%, #333), color-stop(80%, transparent), color-stop(82%, transparent), color-stop(82%, #333), color-stop(83%, #333), color-stop(83%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(66%, transparent), color-stop(66%, #222), color-stop(85%, #2e2e2e), color-stop(85%, transparent));
      background-image: linear-gradient(to top, #222 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #222, #2e2e2e 5%, transparent 5%), linear-gradient(to right, transparent 6%, #222 6%, #2e2e2e 9%, transparent 9%), linear-gradient(to right, transparent 27%, #222 27%, #2e2e2e 34%, transparent 34%), linear-gradient(to right, transparent 51%, #222 51%, #2e2e2e 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #222 42%, #2e2e2e 44%, transparent 44%), linear-gradient(to right, transparent 45%, #222 45%, #2e2e2e 47%, transparent 47%), linear-gradient(to right, transparent 48%, #222 48%, #2e2e2e 50%, transparent 50%), linear-gradient(to right, transparent 87%, #222 87%, #2e2e2e 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #222 14%, #2e2e2e 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #222 10%, #2e2e2e 13%, transparent 13%), linear-gradient(to right, transparent 21%, #222 21%, #1a1a1a 25%, transparent 25%), linear-gradient(to right, transparent 58%, #222 58%, #2e2e2e 64%, transparent 64%), linear-gradient(to right, transparent 92%, #222 92%, #2e2e2e 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #222 96%, #1a1a1a 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #222 35%, #2e2e2e 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #333 78%, #333 80%, transparent 80%, transparent 82%, #333 82%, #333 83%, transparent 83%), linear-gradient(to right, transparent 66%, #222 66%, #2e2e2e 85%, transparent 85%);
      background-size: 300px 150px;
      background-position: center bottom;
    }

    #dark:before {
      content: '';
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0;
      top: 0;
      background-color: #111;
      background-image: -webkit-gradient(linear, left bottom, left top, color-stop(5%, #d2b48c), color-stop(6%, #111), color-stop(7%, #111), color-stop(7%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(30%, #111), color-stop(30%, transparent)), -webkit-gradient(linear, left top, right top, from(#b22222), color-stop(5%, #871a1a), color-stop(5%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(6%, transparent), color-stop(6%, #ff6347), color-stop(9%, #ff3814), color-stop(9%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(27%, transparent), color-stop(27%, #556b2f), color-stop(34%, #39481f), color-stop(34%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(51%, transparent), color-stop(51%, #fa8072), color-stop(57%, #f85441), color-stop(57%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(35%, #111), color-stop(35%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(42%, transparent), color-stop(42%, #008080), color-stop(44%, #004d4d), color-stop(44%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(45%, transparent), color-stop(45%, #008080), color-stop(47%, #004d4d), color-stop(47%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(48%, transparent), color-stop(48%, #008080), color-stop(50%, #004d4d), color-stop(50%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(87%, transparent), color-stop(87%, #789), color-stop(91%, #4f5d6a), color-stop(91%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(37.5%, #111), color-stop(37.5%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(14%, transparent), color-stop(14%, #bdb76b), color-stop(20%, #989244), color-stop(20%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(40%, #111), color-stop(40%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(10%, transparent), color-stop(10%, #808000), color-stop(13%, #4d4d00), color-stop(13%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(21%, transparent), color-stop(21%, #8b4513), color-stop(25%, #5e2f0d), color-stop(25%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(58%, transparent), color-stop(58%, #8b4513), color-stop(64%, #5e2f0d), color-stop(64%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(92%, transparent), color-stop(92%, #2f4f4f), color-stop(95%, #1c2f2f), color-stop(95%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(48%, #111), color-stop(48%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(96%, transparent), color-stop(96%, #2f4f4f), color-stop(99%, #1c2f2f), color-stop(99%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(68.5%, transparent), color-stop(76%, transparent), color-stop(76%, #111), color-stop(77.5%, #111), color-stop(77.5%, transparent), color-stop(86%, transparent), color-stop(86%, #111), color-stop(87.5%, #111), color-stop(87.5%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(35%, transparent), color-stop(35%, #cd5c5c), color-stop(41%, #bc3a3a), color-stop(41%, transparent)), -webkit-gradient(linear, left top, left bottom, color-stop(68%, #111), color-stop(68%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(78%, transparent), color-stop(78%, #bc8f8f), color-stop(80%, #bc8f8f), color-stop(80%, transparent), color-stop(82%, transparent), color-stop(82%, #bc8f8f), color-stop(83%, #bc8f8f), color-stop(83%, transparent)), -webkit-gradient(linear, left top, right top, color-stop(66%, transparent), color-stop(66%, #a52a2a), color-stop(85%, #7c2020), color-stop(85%, transparent));
      background-image: linear-gradient(to top, #d2b48c 5%, #111 6%, #111 7%, transparent 7%), linear-gradient(to bottom, #111 30%, transparent 30%), linear-gradient(to right, #b22222, #871a1a 5%, transparent 5%), linear-gradient(to right, transparent 6%, #ff6347 6%, #ff3814 9%, transparent 9%), linear-gradient(to right, transparent 27%, #556b2f 27%, #39481f 34%, transparent 34%), linear-gradient(to right, transparent 51%, #fa8072 51%, #f85441 57%, transparent 57%), linear-gradient(to bottom, #111 35%, transparent 35%), linear-gradient(to right, transparent 42%, #008080 42%, #004d4d 44%, transparent 44%), linear-gradient(to right, transparent 45%, #008080 45%, #004d4d 47%, transparent 47%), linear-gradient(to right, transparent 48%, #008080 48%, #004d4d 50%, transparent 50%), linear-gradient(to right, transparent 87%, #789 87%, #4f5d6a 91%, transparent 91%), linear-gradient(to bottom, #111 37.5%, transparent 37.5%), linear-gradient(to right, transparent 14%, #bdb76b 14%, #989244 20%, transparent 20%), linear-gradient(to bottom, #111 40%, transparent 40%), linear-gradient(to right, transparent 10%, #808000 10%, #4d4d00 13%, transparent 13%), linear-gradient(to right, transparent 21%, #8b4513 21%, #5e2f0d 25%, transparent 25%), linear-gradient(to right, transparent 58%, #8b4513 58%, #5e2f0d 64%, transparent 64%), linear-gradient(to right, transparent 92%, #2f4f4f 92%, #1c2f2f 95%, transparent 95%), linear-gradient(to bottom, #111 48%, transparent 48%), linear-gradient(to right, transparent 96%, #2f4f4f 96%, #1c2f2f 99%, transparent 99%), linear-gradient(to bottom, transparent 68.5%, transparent 76%, #111 76%, #111 77.5%, transparent 77.5%, transparent 86%, #111 86%, #111 87.5%, transparent 87.5%), linear-gradient(to right, transparent 35%, #cd5c5c 35%, #bc3a3a 41%, transparent 41%), linear-gradient(to bottom, #111 68%, transparent 68%), linear-gradient(to right, transparent 78%, #bc8f8f 78%, #bc8f8f 80%, transparent 80%, transparent 82%, #bc8f8f 82%, #bc8f8f 83%, transparent 83%), linear-gradient(to right, transparent 66%, #a52a2a 66%, #7c2020 85%, transparent 85%);
      background-size: 300px 150px;
      background-position: center bottom;
      -webkit-clip-path: circle(150px at center center);
      clip-path: circle(150px at center center);
      -webkit-animation: dark-search 5000ms infinite;
      animation: dark-search 5000ms infinite;
    }

    #dark:after {
      content: '';
      width: 25px;
      height: 10px;
      position: absolute;
      left: calc(50% + 59px);
      bottom: 100px;
      background-repeat: no-repeat;
      background-image: radial-gradient(circle, white 50%, transparent 50%), radial-gradient(circle, white 50%, transparent 50%);
      background-size: 10px 10px;
      background-position: left center, right center;
      -webkit-animation: dark-eyes 5000ms infinite;
      animation: dark-eyes 5000ms infinite;
    }

    @-webkit-keyframes dark-search {

      0%,
      9% {
        opacity: 0;
        -webkit-clip-path: circle(150px at 45% 10%);
        clip-path: circle(150px at 45% 10%)
      }

      10%,
      15%,
      85% {
        opacity: 1
      }

      50% {
        -webkit-clip-path: circle(150px at 60% 20%);
        clip-path: circle(150px at 60% 20%)
      }

      54%,
      100% {
        -webkit-clip-path: circle(150px at 55% 92%);
        clip-path: circle(150px at 55% 92%)
      }

      88%,
      100% {
        opacity: 0
      }
    }

    @keyframes dark-search {

      0%,
      9% {
        opacity: 0;
        -webkit-clip-path: circle(150px at 45% 10%);
        clip-path: circle(150px at 45% 10%)
      }

      10%,
      15%,
      85% {
        opacity: 1
      }

      50% {
        -webkit-clip-path: circle(150px at 60% 20%);
        clip-path: circle(150px at 60% 20%)
      }

      54%,
      100% {
        -webkit-clip-path: circle(150px at 55% 92%);
        clip-path: circle(150px at 55% 92%)
      }

      88%,
      100% {
        opacity: 0
      }
    }

    @-webkit-keyframes dark-eyes {

      0%,
      52% {
        opacity: 0
      }

      53%,
      87% {
        opacity: 1
      }

      64% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
      }

      67% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0)
      }

      70% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
      }

      88%,
      100% {
        opacity: 0
      }
    }

    @keyframes dark-eyes {

      0%,
      52% {
        opacity: 0
      }

      53%,
      87% {
        opacity: 1
      }

      64% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
      }

      67% {
        -webkit-transform: scaleY(0);
        transform: scaleY(0)
      }

      70% {
        -webkit-transform: scaleY(1);
        transform: scaleY(1)
      }

      88%,
      100% {
        opacity: 0
      }
    }
html
 <div class="entry"
    id="dark">
    <div></div>
  </div>

五、

1599469182(1).jpg
css
#grid {
      background: #f5deb3;
    }

    #grid div {
      width: 540px;
      height: 180px;
      margin-left: -270px;
      margin-top: -90px;
      background-image: linear-gradient(to right, transparent 14px, #4682b4 14px), linear-gradient(to bottom, transparent 14px, #4682b4 14px);
      background-size: 15px 100%, 100% 15px;
      border: 1px solid #4682b4;
      border-right: none;
      border-bottom: none;
    }

    #grid div:before {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4)), -webkit-gradient(linear, left top, left bottom, from(#4682b4), to(#4682b4));
      background-image: linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4), linear-gradient(#4682b4, #4682b4);
      background-size: 90px 15px, 15px 15px, 15px 15px, 90px 15px, 15px 75px, 15px 15px, 90px 15px, 60px 15px, 15px 30px, 30px 15px, 15px 15px, 15px 90px, 15px 120px, 90px 15px, 15px 15px, 75px 15px, 45px 15px, 15px 15px, 45px 15px, 15px 15px, 45px 15px, 15px 15px, 30px 15px, 15px 105px, 120px 15px, 15px 15px, 15px 15px, 120px 15px, 15px 30px, 15px 30px, 45px 15px, 45px 15px, 15px 15px, 15px 15px, 120px 15px, 105px 15px, 15px 105px, 15px 15px, 75px 15px, 15px 45px, 15px 45px, 15px 15px, 15px 15px, 75px 15px, 15px 90px;
      background-position: 45px 30px, 45px 45px, 120px 45px, 30px 60px, 30px 60px, 45px 120px, 45px 135px, 75px 75px, 75px 90px, 90px 105px, 120px 120px, 135px 45px, 150px 30px, 165px 30px, 240px 45px, 165px 60px, 195px 75px, 240px 90px, 195px 105px, 195px 120px, 165px 135px, 225px 120px, 225px 135px, 255px 45px, 270px 30px, 270px 45px, 375px 45px, 270px 60px, 300px 75px, 345px 75px, 270px 105px, 345px 105px, 270px 120px, 375px 120px, 270px 135px, 390px 30px, 390px 45px, 480px 45px, 405px 60px, 435px 75px, 465px 75px, 450px 105px, 480px 120px, 405px 135px, 495px 45px;
      mix-blend-mode: multiply;
    }

    #grid div:after {
      width: 100%;
      height: 100%;
      background-repeat: no-repeat;
      background-image: -webkit-gradient(linear, left top, left bottom, from(#ffd700), to(#ffd700)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#ffd700), to(#ffd700)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#ffd700), to(#ffd700)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#ffd700), to(#ffd700)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#ffd700), to(#ffd700)), -webkit-gradient(linear, left top, left bottom, from(#ffd700), to(#ffd700)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072)), -webkit-gradient(linear, left top, left bottom, from(#fa8072), to(#fa8072));
      background-image: linear-gradient(#ffd700, #ffd700), linear-gradient(#fa8072, #fa8072), linear-gradient(#fa8072, #fa8072), linear-gradient(#fa8072, #fa8072), linear-gradient(#fa8072, #fa8072), linear-gradient(#ffd700, #ffd700), linear-gradient(#fa8072, #fa8072), linear-gradient(#ffd700, #ffd700), linear-gradient(#fa8072, #fa8072), linear-gradient(#fa8072, #fa8072), linear-gradient(#ffd700, #ffd700), linear-gradient(#fa8072, #fa8072), linear-gradient(#fa8072, #fa8072), linear-gradient(#ffd700, #ffd700), linear-gradient(#ffd700, #ffd700), linear-gradient(#fa8072, #fa8072), linear-gradient(#fa8072, #fa8072), linear-gradient(#fa8072, #fa8072);
      background-size: 30px 15px, 30px 30px, 45px 15px, 15px 15px, 60px 15px, 30px 15px, 30px 45px, 15px 15px, 45px 15px, 15px 30px, 30px 15px, 30px 30px, 90px 15px, 30px 15px, 15px 15px, 30px 30px, 15px 30px, 75px 15px;
      background-position: 45px 75px, 45px 90px, 90px 90px, 120px 105px, 60px 120px, 165px 75px, 165px 90px, 240px 75px, 195px 90px, 240px 105px, 315px 75px, 315px 90px, 285px 120px, 405px 75px, 480px 75px, 405px 90px, 480px 90px, 405px 120px;
      mix-blend-mode: multiply;
    }
html
 <div class="entry"
    id="grid">
    <div></div>
  </div>

六、

1599469229(1).jpg
css
#byebyecube {
      background-color: #aaa;
      z-index: 1;
      overflow: hidden;
    }

    #byebyecube div {
      width: 300px;
      height: 400px;
      position: relative;
      margin-left: -150px;
      top: 0;
      background-image: linear-gradient(30deg, #aaa 30%, rgba(170, 170, 170, 0) 30.1%), linear-gradient(-30deg, #aaa 30%, rgba(170, 170, 170, 0) 30.1%);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
    }

    #byebyecube div:before {
      width: 200px;
      height: 280px;
      left: 50px;
      top: -8px;
      background-repeat: no-repeat;
      background-image: linear-gradient(30deg, transparent 26%, #ccc 26.3%, #ccc 74%, transparent 74.3%), linear-gradient(150deg, transparent 26%, #999 26.3%, #999 74%, transparent 74.3%), linear-gradient(150deg, transparent 26%, #eee 26.3%, #eee 73%, transparent 73%), linear-gradient(30deg, transparent 27%, #eee 27%, #eee 74%, transparent 74.3%), radial-gradient(circle at center, #eee 20%, transparent 20%);
      background-size: 50% 60%;
      background-position: 0 100%, 100% 100%, 0 48.5%, 100% 48.5%, 50% 60%;
      -webkit-animation: cube-drop 6000ms infinite alternate linear;
      animation: cube-drop 6000ms infinite alternate linear;
      z-index: -1;
    }

    #byebyecube div:after {
      width: 113px;
      height: 100px;
      left: 92px;
      top: 164px;
      z-index: 0;
      -webkit-animation: cube-shadow 6000ms infinite alternate linear;
      animation: cube-shadow 6000ms infinite alternate linear;
    }

    @-webkit-keyframes cube-drop {
      20% {
        -webkit-transform: translateY(0) translateZ(-1px);
        transform: translateY(0) translateZ(-1px)
      }

      80%,
      100% {
        -webkit-transform: translateY(153px) translateZ(-1px);
        transform: translateY(153px) translateZ(-1px)
      }
    }

    @keyframes cube-drop {
      20% {
        -webkit-transform: translateY(0) translateZ(-1px);
        transform: translateY(0) translateZ(-1px)
      }

      80%,
      100% {
        -webkit-transform: translateY(153px) translateZ(-1px);
        transform: translateY(153px) translateZ(-1px)
      }
    }

    @-webkit-keyframes cube-shadow {

      0%,
      20% {
        -webkit-transform: translateY(0) rotate(-30deg) skew(30deg);
        transform: translateY(0) rotate(-30deg) skew(30deg);
        -webkit-box-shadow: -50px 45px 10px -10px rgba(0, 0, 0, 0.3);
        box-shadow: -50px 45px 10px -10px rgba(0, 0, 0, 0.3)
      }

      37% {
        -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.5);
        box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.5)
      }

      37%,
      100% {
        -webkit-transform: translateY(42px) rotate(-30deg) skew(30deg);
        transform: translateY(42px) rotate(-30deg) skew(30deg)
      }

      39%,
      100% {
        -webkit-box-shadow: -2px 2px 1px rgba(0, 0, 0, 0);
        box-shadow: -2px 2px 1px rgba(0, 0, 0, 0)
      }
    }

    @keyframes cube-shadow {

      0%,
      20% {
        -webkit-transform: translateY(0) rotate(-30deg) skew(30deg);
        transform: translateY(0) rotate(-30deg) skew(30deg);
        -webkit-box-shadow: -50px 45px 10px -10px rgba(0, 0, 0, 0.3);
        box-shadow: -50px 45px 10px -10px rgba(0, 0, 0, 0.3)
      }

      37% {
        -webkit-box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.5);
        box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.5)
      }

      37%,
      100% {
        -webkit-transform: translateY(42px) rotate(-30deg) skew(30deg);
        transform: translateY(42px) rotate(-30deg) skew(30deg)
      }

      39%,
      100% {
        -webkit-box-shadow: -2px 2px 1px rgba(0, 0, 0, 0);
        box-shadow: -2px 2px 1px rgba(0, 0, 0, 0)
      }
    }
html
<div class="entry"
    id="byebyecube">
    <div></div>
  </div>

七、

1599469264(1).jpg
css
#dragon {
      background: #228b22;
    }

    #dragon div {
      width: 120px;
      height: 160px;
      margin-left: -60px;
      margin-top: -100px;
      background-color: white;
      background-repeat: no-repeat;
      background-image: linear-gradient(75deg, white 50%, transparent 50%), linear-gradient(-30deg, white 40%, transparent 40%), linear-gradient(30deg, #b22222 50%, transparent 50%), linear-gradient(-20deg, transparent 30%, #b22222 30%, #b22222 53%, transparent 53%), linear-gradient(20deg, transparent 30%, white 30%), linear-gradient(68deg, transparent 30%, #b22222 30%, #b22222 70%, transparent 70%), linear-gradient(-10deg, transparent 30%, #b22222 30%, #b22222 53%, transparent 53%), radial-gradient(circle at bottom left, transparent 50%, white 50%), linear-gradient(-10deg, transparent 30%, #b22222 30%, #b22222 53%, transparent 53%), linear-gradient(110deg, white 50%, transparent 50%), linear-gradient(-60deg, transparent 30%, #b22222 30%, #b22222 70%, transparent 70%), linear-gradient(80deg, white 50%, transparent 50%), linear-gradient(-85deg, white 50%, transparent 50%), linear-gradient(to right, #b22222, #b22222);
      background-size: 20px 20px, 20px 20px, 20px 20px, 25px 20px, 10px 10px, 16px 30px, 25px 20px, 15px 15px, 32px 20px, 10px 15px, 16px 30px, 20px 40px, 20px 40px, 10px 100px;
      background-position: 42% 15%, 65% 16%, 50% 15%, 42% 31%, 32% 30%, 34% 40%, 51% 44%, 75% 29%, 64% 28%, 64.5% 38%, 70% 37%, 46% 81%, 53% 81%, 50% 56%;
      border-radius: 7px;
      -webkit-box-shadow: 0 15px 5px rgba(0, 0, 0, 0.05), 0 30px 0 #eee, 0 35px 5px rgba(0, 0, 0, 0.05), 0 40px 0 #00fa9a, 0 45px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 15px 5px rgba(0, 0, 0, 0.05), 0 30px 0 #eee, 0 35px 5px rgba(0, 0, 0, 0.05), 0 40px 0 #00fa9a, 0 45px 0 rgba(0, 0, 0, 0.1);
    }

    #dragon div:before {
      left: -140px;
      background-image: linear-gradient(to right, #191970 7%, transparent 7%, transparent 93%, #191970 93%), linear-gradient(to bottom, #191970 5%, transparent 5%, transparent 95%, #191970 95%), linear-gradient(to right, #191970 7%, transparent 7%, transparent 93%, #191970 93%), linear-gradient(to bottom, #191970 5%, transparent 5%, transparent 95%, #191970 95%), linear-gradient(-45deg, transparent 10%, #191970 10%, #191970 13%, transparent 13%, transparent 87%, #191970 87%, #191970 90%, transparent 90%), linear-gradient(45deg, transparent 10%, #191970 10%, #191970 13%, transparent 13%, transparent 87%, #191970 87%, #191970 90%, transparent 90%);
      background-size: 70% 75%, 70% 75%, 52% 62%, 52% 62%, 52% 62%, 52% 62%;
      background-position: center center;
    }

    #dragon div:before {
      left: -140px;
      background-image: linear-gradient(to right, #191970 7%, transparent 7%, transparent 93%, #191970 93%), linear-gradient(to bottom, #191970 5%, transparent 5%, transparent 95%, #191970 95%), linear-gradient(to right, #191970 7%, transparent 7%, transparent 93%, #191970 93%), linear-gradient(to bottom, #191970 5%, transparent 5%, transparent 95%, #191970 95%), linear-gradient(-45deg, transparent 10%, #191970 10%, #191970 13%, transparent 13%, transparent 87%, #191970 87%, #191970 90%, transparent 90%), linear-gradient(45deg, transparent 10%, #191970 10%, #191970 13%, transparent 13%, transparent 87%, #191970 87%, #191970 90%, transparent 90%);
      background-size: 70% 75%, 70% 75%, 52% 62%, 52% 62%, 52% 62%, 52% 62%;
      background-position: center center;
    }

    #dragon div:after {
      right: -140px;
      background-image: linear-gradient(-30deg, #006400 40%, transparent 40%), linear-gradient(-30deg, #006400 40%, transparent 40%), linear-gradient(110deg, white 50%, transparent 50%), linear-gradient(120deg, transparent 45%, #006400 45%, #006400 57%, transparent 57%), linear-gradient(55deg, transparent 35%, #006400 35%, #006400 50%, transparent 50%), linear-gradient(-45deg, transparent 30%, #006400 30%, #006400 50%, transparent 50%), linear-gradient(-30deg, white 40%, transparent 40%), linear-gradient(-45deg, transparent 30%, #006400 30%, #006400 50%, transparent 50%), linear-gradient(50deg, transparent 40%, white 40%), linear-gradient(60deg, transparent 40%, #006400 40%, #006400 60%, transparent 60%), linear-gradient(-22deg, transparent 20%, #006400 20%, #006400 45%, transparent 45%), linear-gradient(-20deg, transparent 20%, #006400 20%, #006400 45%, transparent 45%), radial-gradient(circle at bottom left, transparent 50%, white 50%), linear-gradient(-16deg, transparent 10%, #006400 10%, #006400 35%, transparent 35%), linear-gradient(110deg, transparent 25%, #006400 25%, #006400 50%, transparent 50%), linear-gradient(60deg, white 50%, transparent 50%), linear-gradient(45deg, #006400 60%, transparent 60%), linear-gradient(90deg, #006400, #006400), linear-gradient(100deg, transparent 10%, #006400 10%, #006400 30%, transparent 30%), linear-gradient(20deg, #006400 30%, transparent 30%), linear-gradient(100deg, transparent 5%, #006400 5%, #006400 27%, transparent 27%), linear-gradient(45deg, #006400 66%, transparent 66%), linear-gradient(-35deg, white 35%, transparent 35%), linear-gradient(-48deg, transparent 40%, #006400 40%, #006400 60%, transparent 60%), linear-gradient(30deg, transparent 30%, white 30%), linear-gradient(40deg, transparent 40%, #006400 40%, #006400 60%, transparent 60%);
      background-size: 15px 15px, 12px 20px, 30px 40px, 40px 50px, 20px 20px, 20px 20px, 20px 10px, 30px 20px, 50px 50px, 50px 40px, 18px 20px, 18px 20px, 10px 10px, 22px 20px, 20px 25px, 20px 20px, 20px 20px, 7px 5px, 20px 18px, 10px 20px, 20px 20px, 35px 6px, 20px 20px, 30px 30px, 30px 35px, 30px 30px;
      background-position: 36% 25%, 25% 37%, 15% 50%, 17% 45%, 67% 28%, 51% 28%, 48% 41%, 51% 36%, 83% 35%, 79% 43%, 37% 45%, 35% 51%, 43% 56%, 33% 54%, 39% 69%, 23% 72%, 25% 72%, 56% 47%, 67% 51%, 63% 51%, 58% 52%, 62% 61%, 47% 77%, 54% 75%, 62% 65%, 58% 72%;
    }

    #dragon div:before,
    #dragon div:after {
      width: 120px;
      height: 160px;
      background-color: white;
      background-repeat: no-repeat;
      border-radius: 7px;
      -webkit-box-shadow: 0 15px 5px rgba(0, 0, 0, 0.05), 0 30px 0 #eee, 0 35px 5px rgba(0, 0, 0, 0.05), 0 40px 0 #00fa9a, 0 45px 0 rgba(0, 0, 0, 0.1);
      box-shadow: 0 15px 5px rgba(0, 0, 0, 0.05), 0 30px 0 #eee, 0 35px 5px rgba(0, 0, 0, 0.05), 0 40px 0 #00fa9a, 0 45px 0 rgba(0, 0, 0, 0.1);
    }
html
 <div class="entry"
    id="dragon">
    <div></div>
  </div>

看了这些例子是不是觉得特别有趣！

最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,332评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,508评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,812评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,607评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,728评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,919评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,071评论 3赞 410
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,802评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,256评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,576评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,712评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,389评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 40,032评论 3赞 316
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,798评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,026评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,473评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,606评论 2赞 350