The magic of CSS 3

As is known to allHTML.CSS 和 JavaScript They are the “troika” of Web pages, responsible for the structure, style and behavior of Web pages, which together make up the rich and colorful Web world. A complete web page is usually complete without any of these.

When it comes to web graphics, we often think of usingcanvas,svgorWebGLOr even directly use various image formats. But, uh, did you ever think about justHTMLandCSSHow complex visual effects can be achieved? Recently, I saw a big guy’s work on the Internet, and I was shocked: only onedivElement, plusCSSCode to achieve a lot of amazing graphics and animation!

The source website

Demo online code

A,

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);
    }
Copy the code

html

 <div class="entry"
    id="cybertruck">
    <div></div>
  </div>
Copy the code

Second,

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)}}Copy the code

html

<div class="entry"
    id="xray">
    <div></div>
  </div>
Copy the code

Three,

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;
    }
Copy the code

html

<div class="entry"
    id="pattern">
    <div></div>
  </div>
Copy the code

Four,

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}}Copy the code

html

 <div class="entry"
    id="dark">
    <div></div>
  </div>
Copy the code

Five,

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;
    }
Copy the code

html

 <div class="entry"
    id="grid">
    <div></div>
  </div>
Copy the code

Vi.

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)}}Copy the code

html

<div class="entry"
    id="byebyecube">
    <div></div>
  </div>
Copy the code

Seven,

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);
    }
Copy the code

html

 <div class="entry"
    id="dragon">
    <div></div>
  </div>
Copy the code

Look at these examples do not feel particularly interesting!