网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > css

css实现时空隧道的炫酷特效

2022/4/24 20:49:53

前两天无意间看到有人用css实现了一个时空隧道的效果,特别酷,如下图所示,今天我们就来看看这个特效是如何实现的?<html><head> <meta charset="UTF-8"> <link rel="apple-touch-icon" type="image/png" href…

        前两天无意间看到有人用css实现了一个时空隧道的效果,特别酷,如下图所示,今天我们就来看看这个特效是如何实现的?

image.png

<html>
<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" type="image/png"
    href="https://cpwebassets.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png">
  <meta name="apple-mobile-web-app-title" content="CodePen">
  <link rel="shortcut icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico">
  <link rel="mask-icon" type="image/x-icon"
    href="https://cpwebassets.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg"
    color="#111">
  <title>css实现时空隧道的炫酷特效www.woaidaogu.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
  <style>
    html,
    body {
      height: 100%;
      width: 100%;
      overflow: hidden;
      background: #000;
      display: flex;
    }
    .g-container {
      margin: auto;
      perspective: 5px;
      perspective-origin: 50% 50%;
      position: relative;
      -webkit-animation: hueRotate 20s infinite linear;
      animation: hueRotate 20s infinite linear;
    }
    .g-group {
      position: absolute;
      width: 100vw;
      height: 100vh;
      left: -50vw;
      top: -50vh;
      transform-style: preserve-3d;
      -webkit-animation: move 8s infinite linear;
      animation: move 8s infinite linear;
    }
    .g-group:nth-child(2) {
      -webkit-animation: move 8s infinite linear;
      animation: move 8s infinite linear;
      -webkit-animation-delay: -4s;
      animation-delay: -4s;
    }
    .item {
      position: absolute;
      width: 100%;
      height: 100%;
      background: linear-gradient(#05040a, #03010e);
      background-size: cover;
      opacity: 1;
      -webkit-animation: fade 8s infinite linear;
      animation: fade 8s infinite linear;
      -webkit-animation-delay: 0;
      animation-delay: 0;
    }
    .item::after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      width: 1px;
      height: 1px;
      border-radius: 50%;
      box-shadow: 0 0 0 0 #911195, 77.88vw 36.5vh 0 4px #a3228f, 59.72vw 84.41vh 0 3px #f73980, 13vw 50.69vh 0 2px #7298b1, 28.54vw 46.72vh 0 4px #d0ac66, 32.58vw 7.49vh 0 5px #d6edc8, 61.04vw 93.13vh 0 3px #61328c, 70.04vw 71.46vh 0 1px #11a0fa, 92.74vw 67.9vh 0 1px #c770f4, 13.61vw 62.2vh 0 1px #e5d3b8, 55.17vw 49.94vh 0 2px #e2e99a, 29.24vw 32.19vh 0 1px #399d21, 18.57vw 84.19vh 0 3px #6c148b, 43.96vw 6.95vh 0 4px #6a9b0f, 31.04vw 30.23vh 0 4px #94c7e3, 90.01vw 76.34vh 0 5px #2b4adf, 52.08vw 78.82vh 0 3px #c03991, 46.29vw 28.37vh 0 4px #e14209, 41.33vw 22.7vh 0 5px #899d46, 23.54vw 43.99vh 0 4px #97bebd, 60.84vw 26.45vh 0 3px #e35041, 90.45vw 60.44vh 0 3px #2e6c62, 15.27vw 79.5vh 0 1px #b68ead, 27vw 72.48vh 0 1px #a6c85a, 77.09vw 84.23vh 0 4px #8b970e, 38.26vw 68.81vh 0 2px #ac8c3f, 45.18vw 0.5vh 0 5px #9a5230, 33.49vw 97.44vh 0 1px #d6ea66, 35.3vw 19.39vh 0 1px #d77aad, 69.07vw 46.46vh 0 3px #cfc039, 41.04vw 15.47vh 0 1px #e463e6, 99.84vw 75.27vh 0 5px #81423c, 93.89vw 40.23vh 0 4px #0fdb45, 70.95vw 9.43vh 0 1px #3350f1, 95.14vw 68.34vh 0 1px #c37f18, 36.03vw 53.14vh 0 2px #6dea68, 40.96vw 17.2vh 0 3px #73a566, 22.1vw 84.86vh 0 1px #20dfa3, 24.17vw 65.4vh 0 4px #bdbd2c, 28.65vw 46.4vh 0 1px #0deb11, 44.21vw 22.89vh 0 4px #5bb1fb, 34.56vw 24.02vh 0 4px #994fbc, 9.34vw 5.8vh 0 2px #4efe93, 82.74vw 37.38vh 0 2px #25bd61, 61.59vw 4.37vh 0 3px #ff7931, 65.76vw 67.52vh 0 3px #60a8c6, 2.81vw 90.53vh 0 4px #79c786, 98.42vw 34.99vh 0 1px #eaece0, 85.38vw 29.45vh 0 3px #8d24b4, 6.66vw 66.5vh 0 3px #91ce46, 33.74vw 82.35vh 0 2px #25ad81, 29.53vw 80.91vh 0 3px #5d4bb7, 41.86vw 9.33vh 0 2px #590a26, 58.91vw 35.83vh 0 4px #bb2869, 91.96vw 77.01vh 0 2px #6e9619, 30.19vw 4.83vh 0 2px #0cffce, 96.48vw 3.65vh 0 3px #89ee99, 60.85vw 53.98vh 0 3px #7d8027, 14.43vw 36.72vh 0 4px #7c0412, 68.27vw 93.36vh 0 5px #730b24, 82.22vw 95.7vh 0 5px #2a0870, 96.92vw 96.25vh 0 2px #1ca441, 90.57vw 58.36vh 0 2px #b2d798, 17.44vw 93.44vh 0 1px #e2b74c, 71.53vw 90.05vh 0 3px #f660a3, 6.82vw 54.48vh 0 2px #380824, 7.83vw 1.08vh 0 4px #aaddd2, 22.78vw 48.6vh 0 1px #5aa7f7, 10.3vw 24.39vh 0 4px #7c994a, 73.82vw 67.94vh 0 4px #441ad1, 9.29vw 23.4vh 0 2px #16ff4a, 56.95vw 46.78vh 0 3px #65564b, 18.27vw 81.06vh 0 3px #399ad0, 40.61vw 63.19vh 0 1px #81c2d8, 71.76vw 41.65vh 0 1px #4963f7, 33.76vw 55.14vh 0 5px #16feb7, 44.09vw 32.43vh 0 3px #5ec910, 69.46vw 94.68vh 0 5px #90423a, 68.92vw 10.55vh 0 3px #e2c7c4, 34.57vw 35.86vh 0 3px #3b0557, 33.17vw 7.92vh 0 3px #b93e56, 54.86vw 73.71vh 0 2px #8baaab, 26.79vw 68.12vh 0 4px #846914, 52.25vw 60.17vh 0 2px #3376ae, 82.97vw 74.73vh 0 5px #28daa0, 60.17vw 22.77vh 0 3px #143cbf, 14.68vw 48.49vh 0 3px #170d06, 31.79vw 47.04vh 0 3px #6bfb58, 13.84vw 19.24vh 0 5px #9f3844, 24.67vw 82.79vh 0 2px #323e24, 15.14vw 72.59vh 0 4px #9da5d6, 95.94vw 66.43vh 0 4px #ae3238, 93.89vw 92.74vh 0 2px #4f1af6, 76.66vw 71.39vh 0 5px #8cd35f, 87.74vw 54.93vh 0 3px #2bc1e1, 85.18vw 42.04vh 0 4px #7ed2c5, 60.68vw 56.41vh 0 1px #20f93b, 15.79vw 49.18vh 0 5px #f0c2dd, 42.15vw 38.25vh 0 5px #fd8b3f, 99.17vw 87.25vh 0 5px #f4b13d, 89.66vw 95.66vh 0 1px #ac7f78, 70.5vw 90.62vh 0 2px #81d418, 55.4vw 16.95vh 0 4px #cafe56, 83.58vw 86.75vh 0 2px #3d1a6c, 88.63vw 27.37vh 0 2px #d828b3, 29.2vw 50.9vh 0 1px #0fedd6, 12.59vw 56.17vh 0 4px #d17311, 87.76vw 20.87vh 0 1px #8b0969, 58.98vw 72.83vh 0 5px #603a1e, 80.93vw 51.07vh 0 4px #f158b1, 19.2vw 35.46vh 0 4px #fbcbbf, 48.96vw 3.74vh 0 3px #76094f, 92.94vw 45.9vh 0 1px #f86bed, 38.77vw 24.53vh 0 2px #3b4dbf, 55.23vw 74.82vh 0 5px #84374f, 1.31vw 49.56vh 0 3px #4aa7c2, 97.9vw 42.81vh 0 2px #e379c9, 71.88vw 53.44vh 0 3px #0d4ef3, 39.05vw 53.82vh 0 5px #c43a14, 76.75vw 55.72vh 0 1px #c901c5, 90.95vw 71.16vh 0 4px #9afd5c, 9.11vw 53.42vh 0 1px #e1e196, 84.89vw 2.39vh 0 1px #1f262d, 43.45vw 62.41vh 0 1px #4c906c, 29.01vw 51.16vh 0 5px #84e954, 51.37vw 32.5vh 0 3px #fef822, 74.1vw 91.01vh 0 1px #e74998, 78.65vw 13.11vh 0 4px #a61312, 96.67vw 95.74vh 0 1px #d5e517, 35.4vw 21.11vh 0 1px #a30354, 98.46vw 98.1vh 0 3px #d069cc, 75.43vw 97.47vh 0 5px #8029a3, 18.92vw 13.73vh 0 3px #34a075, 90.93vw 19.59vh 0 2px #e8f18d, 57.14vw 43.68vh 0 1px #5b6cd0, 99.62vw 44.19vh 0 2px #d69b64, 17.37vw 75.15vh 0 2px #3659a3, 17.91vw 52.89vh 0 5px #14452e, 37.42vw 11.99vh 0 1px #fd6cc9, 61.76vw 24.66vh 0 5px #c1787e, 81.94vw 24.48vh 0 2px #d19830, 2.52vw 61.92vh 0 2px #e08023, 96.8vw 24.22vh 0 4px #bf2044, 40.75vw 30.69vh 0 2px #f0ad38, 1.9vw 7.77vh 0 4px #3946c9, 90.55vw 26.43vh 0 3px #877acc, 95.8vw 43.94vh 0 3px #928d41, 62.69vw 70.26vh 0 2px #78e097, 89.3vw 81.5vh 0 3px #175654, 16.35vw 13.82vh 0 1px #e5ed97, 5.79vw 94.05vh 0 3px #f3cbd1, 78.84vw 88.66vh 0 4px #2ada24, 81.72vw 41.83vh 0 4px #adeabd, 8.42vw 65.98vh 0 1px #cb037b, 7.59vw 71.11vh 0 1px #7effbf, 17.01vw 91.52vh 0 4px #58c49a, 65.23vw 22.15vh 0 1px #4c2de9, 67.4vw 44.27vh 0 5px #fe28c9, 32.77vw 43.74vh 0 3px #a45dc9, 54.71vw 91.25vh 0 2px #0993a4, 2.68vw 83.62vh 0 1px #fa9cae, 55.53vw 75.25vh 0 3px #fc7d1e, 10.58vw 40.55vh 0 4px #4234d3, 0.4vw 46.19vh 0 1px #727ecf, 38.76vw 25.76vh 0 4px #83cca7, 15.4vw 22.56vh 0 2px #c4c919, 45.99vw 8.06vh 0 4px #cf6d34, 81.03vw 70.82vh 0 3px #1f5d71, 72.92vw 81.17vh 0 3px #0478dd, 17.7vw 78.47vh 0 2px #53f244, 76.47vw 91.96vh 0 4px #bd0f5f, 77.81vw 93.16vh 0 5px #de291c, 69.37vw 10.76vh 0 1px #f387bb, 41.88vw 18.83vh 0 5px #7b9c31, 75.82vw 37.98vh 0 2px #5efed1, 14.39vw 54.47vh 0 5px #4f4eb9, 10.65vw 36.93vh 0 4px #dd5c2a, 72.38vw 75.85vh 0 5px #c5a0e8, 68.89vw 39.3vh 0 5px #774819, 31.17vw 79.63vh 0 4px #4ba516, 92.05vw 4.6vh 0 2px #97534a, 17.85vw 27.22vh 0 3px #5dc7ff, 19.86vw 76.44vh 0 3px #968e69, 6.39vw 92.55vh 0 3px #6d94b9, 82.72vw 60.95vh 0 5px #db8d9c, 59.61vw 62.78vh 0 4px #d69f59, 56.7vw 37.57vh 0 3px #b87873, 39.94vw 27.24vh 0 5px #e6170b, 64.14vw 30.92vh 0 4px #7c605a, 77.67vw 89.36vh 0 3px #ec88d2, 72.47vw 60.23vh 0 4px #e2b1fd, 12.34vw 40.98vh 0 5px #16a783, 18.29vw 21.98vh 0 1px #f03ea4, 68.83vw 66.46vh 0 1px #5e3a92, 78.93vw 59.62vh 0 1px #0c0696, 56.78vw 87.84vh 0 2px #17fd74, 65.83vw 8.96vh 0 1px #b63d21, 97.72vw 33.19vh 0 2px #f9563e, 58.93vw 39.62vh 0 2px #31fa06, 56.5vw 62.55vh 0 4px #7dc273, 78.21vw 68.69vh 0 2px #e180eb, 6.29vw 49.29vh 0 4px #8056dd, 25.23vw 11.53vh 0 3px #05b51a, 24.64vw 89.29vh 0 4px #f3ec5b, 37.2vw 92.43vh 0 4px #fbc7f7, 10.96vw 55.01vh 0 4px #ea34c5, 24.94vw 51.76vh 0 1px #14cb53, 47.47vw 26.67vh 0 3px #5f5b01, 6.81vw 70.83vh 0 4px #5a22d3, 23.34vw 73.04vh 0 1px #57e9e6, 67.63vw 53.1vh 0 2px #b0ac10, 23.26vw 77.17vh 0 3px #cf6af2, 60.93vw 94.25vh 0 3px #ba9926, 28.09vw 4.73vh 0 5px #431ac6, 58vw 3.55vh 0 4px #ccbd82, 10.09vw 88.08vh 0 3px #df21cb, 37.69vw 29.55vh 0 4px #b6bd47, 79.08vw 65.09vh 0 2px #1c60b3, 45.74vw 5.22vh 0 3px #79366f, 29.06vw 33.69vh 0 2px #235e7f, 9.46vw 24.63vh 0 3px #8a0cd7, 44.49vw 78.22vh 0 4px #0ce21a, 38.78vw 79.33vh 0 1px #80c92d, 71.54vw 61.55vh 0 5px #4b4345, 25.73vw 8.28vh 0 2px #e4a29b, 88.04vw 55.29vh 0 2px #34902a, 95.68vw 6.14vh 0 2px #3ed52d, 72.3vw 98.35vh 0 3px #51a106, 1.87vw 97.21vh 0 2px #bba538, 99.56vw 65.88vh 0 5px #547250, 19.1vw 88.77vh 0 1px #47afff, 41.53vw 25.06vh 0 1px #7d0854, 0.52vw 91.06vh 0 5px #51dab2, 21.31vw 76.01vh 0 3px #90c024, 38.52vw 91.19vh 0 1px #2a71d4, 88.15vw 0.99vh 0 2px #2d7834, 36.61vw 82.04vh 0 3px #d6f63b, 54.43vw 23.44vh 0 3px #f09b80, 4.73vw 6.9vh 0 4px #33fe73, 74.95vw 53.88vh 0 3px #fe7039, 70.95vw 68.04vh 0 1px #38836d, 80.28vw 35.3vh 0 2px #74f02b, 73.38vw 77.73vh 0 3px #f46da2, 72.3vw 89.2vh 0 3px #b1fc33, 89.65vw 31.14vh 0 1px #db0d76, 57.03vw 4.35vh 0 4px #5145d2, 39.17vw 84.25vh 0 5px #dc0b8e, 67.88vw 65.51vh 0 4px #4c6e1f, 4.55vw 13.48vh 0 5px #c0c761, 70.68vw 40.96vh 0 3px #8f4b3e, 55.72vw 75.61vh 0 1px #fedfc4, 95.09vw 37.15vh 0 1px #0d94d2, 92.55vw 13.64vh 0 3px #ba8dcb, 19.4vw 54.85vh 0 4px #04e0d5, 8.09vw 91.31vh 0 3px #16c09a, 63.35vw 57.82vh 0 5px #3c3f66, 17.06vw 32.38vh 0 2px #7341cb, 24.51vw 45.61vh 0 2px #49d494, 25.98vw 26.83vh 0 3px #b7c20f, 54.65vw 47.15vh 0 1px #29b319, 51.43vw 84.56vh 0 3px #5b5b28, 23.96vw 59.26vh 0 3px #caecaa, 41.35vw 14.61vh 0 1px #f016a5, 52.94vw 70.89vh 0 3px #4975b9, 88.92vw 63.88vh 0 3px #082f4b, 98.74vw 6.8vh 0 5px #1b96cf, 7.44vw 74.94vh 0 5px #d7dd39, 5.04vw 76.28vh 0 1px #ec42d9, 37.25vw 9.13vh 0 1px #94a9dc, 4.04vw 43.89vh 0 5px #5e1d11, 47.37vw 29.87vh 0 4px #c2f0d6, 80.51vw 87.85vh 0 4px #ccda53, 50.51vw 96.16vh 0 1px #942dad, 76.09vw 23.4vh 0 4px #85b460, 30.18vw 51.99vh 0 1px #8680ba, 5.76vw 1.88vh 0 4px #c1521e, 84.1vw 81.96vh 0 1px #ce8340, 36.18vw 51.52vh 0 2px #861097, 8.15vw 45.9vh 0 3px #3458d2, 61.85vw 11.03vh 0 5px #1b9083, 28.89vw 17.85vh 0 1px #971c12, 48.4vw 93.22vh 0 3px #e7aacd, 57.32vw 12.83vh 0 2px #db321f, 69.57vw 5.75vh 0 5px #60f677, 19.08vw 87.78vh 0 2px #58f25f, 13.05vw 95.12vh 0 4px #6177d5, 2.7vw 52.05vh 0 4px #ce0867, 33.23vw 83.05vh 0 1px #ee568b, 57.63vw 91.18vh 0 3px #59b244, 91.14vw 83.7vh 0 3px #afbdd5, 28.13vw 63.06vh 0 3px #2ee6dc, 12.93vw 90.49vh 0 2px #ef94a9, 75.28vw 31.5vh 0 2px #42843f, 86.77vw 87.07vh 0 5px #6c4a01, 90.67vw 52.55vh 0 1px #cae1dc, 44.87vw 4.1vh 0 4px #155fb4, 1.28vw 67.02vh 0 5px #4859b2, 45.98vw 97.21vh 0 1px #d1b619, 34.46vw 64.74vh 0 1px #578b1f, 27.11vw 92.73vh 0 1px #d88f10, 27.87vw 70.59vh 0 4px #823d61, 36.87vw 54.35vh 0 1px #ba1cf6, 79.64vw 57.25vh 0 5px #1f1889, 77.29vw 79.99vh 0 4px #f58643, 91.67vw 86.98vh 0 5px #b9183b, 14.53vw 40.72vh 0 5px #fc729e, 78.89vw 98.03vh 0 5px #7529a0, 88.27vw 47.57vh 0 2px #a6d91b, 9.84vw 91.89vh 0 5px #f4abef, 27.86vw 4.7vh 0 2px #787c42, 38.35vw 19.81vh 0 4px #1b926f, 97.83vw 93.42vh 0 1px #e4dde0, 12.09vw 43.12vh 0 4px #fb2eb2, 39.9vw 92.7vh 0 5px #66dc9c, 59.34vw 21.73vh 0 2px #968379, 49.46vw 4.96vh 0 4px #04a656, 99.06vw 21.81vh 0 2px #0d578a, 98.29vw 32.58vh 0 3px #c91128, 9.88vw 6.13vh 0 4px #294c48, 30.21vw 12.5vh 0 5px #71e347, 64.66vw 67.58vh 0 1px #24d02a, 20.69vw 91.62vh 0 3px #434d10, 49.21vw 64.48vh 0 3px #dc61c1, 70.92vw 65.34vh 0 5px #f7a9ac, 53.12vw 71.77vh 0 3px #bc7d8a, 19.95vw 70.55vh 0 4px #b2723e, 79.28vw 50.87vh 0 4px #639f2d, 66.53vw 88.73vh 0 1px #4454e7, 30.26vw 85.7vh 0 3px #4e848a, 81.54vw 52.33vh 0 2px #e59284, 70.49vw 50.4vh 0 2px #c3e332, 31.45vw 8.53vh 0 3px #ed6fae, 46.51vw 71.67vh 0 5px #3340f7, 64.64vw 19.11vh 0 5px #24179b, 83.48vw 42.9vh 0 4px #2bda64, 43.63vw 43.24vh 0 5px #31291e, 90.1vw 36.29vh 0 4px #37e745, 11.72vw 28.78vh 0 2px #f17991, 34.69vw 73.71vh 0 2px #119e9c, 53.08vw 86.65vh 0 2px #94726a, 25.78vw 63.92vh 0 5px #835e63, 88.9vw 65.08vh 0 5px #a3d1f3, 57.51vw 87.85vh 0 3px #f9e5ca, 99.66vw 64.71vh 0 1px #146a7d, 11.9vw 75.75vh 0 5px #5fe3bb, 22.08vw 27.8vh 0 1px #fb50d9, 38.81vw 90.28vh 0 4px #1506b5, 12.58vw 57.13vh 0 5px #2e21a6, 8.37vw 13.37vh 0 5px #ee547f, 13.82vw 58.41vh 0 1px #31edbc, 19.24vw 72.44vh 0 3px #623793, 83.73vw 19.73vh 0 5px #81fa96, 15.64vw 32.51vh 0 5px #bcce43, 10.95vw 89.19vh 0 5px #e840ff, 39.34vw 31.58vh 0 4px #d9a32d, 43.41vw 21.95vh 0 3px #869a69, 83.24vw 80.17vh 0 3px #683adc, 66.96vw 18.29vh 0 5px #ed9033, 98.24vw 52.73vh 0 1px #fe5dd2, 68.21vw 76.69vh 0 4px #4a6faa, 66.84vw 76.97vh 0 5px #3dad18, 10.23vw 74.96vh 0 5px #c20776, 57.03vw 9.05vh 0 4px #c744e9, 1.79vw 12.67vh 0 5px #08fd53, 27.09vw 21.76vh 0 3px #805b93, 86vw 62.05vh 0 4px #2ddac5, 19.75vw 15.23vh 0 1px #34185a, 2.9vw 24.73vh 0 2px #082634, 47.72vw 6.55vh 0 5px #d58e3b, 89.82vw 10.99vh 0 4px #2f2c62, 7.7vw 66.61vh 0 2px #c2fc52, 84.81vw 67.53vh 0 3px #8266ee, 59.09vw 7.78vh 0 4px #7a45b5, 27.09vw 21.8vh 0 5px #a8120e, 96.07vw 76.23vh 0 1px #31137f, 21.8vw 24.41vh 0 2px #633e33, 83.97vw 71.03vh 0 1px #3c0da6, 82.74vw 74.92vh 0 4px #20e1aa, 2.91vw 51.08vh 0 4px #f7fe0d, 99.84vw 11.6vh 0 4px #584e82, 37.46vw 69.86vh 0 1px #f0c119, 70.95vw 61.91vh 0 5px #8a79f3, 61.93vw 69.79vh 0 3px #7d8c5c, 56.32vw 87.43vh 0 5px #140651, 6.39vw 80.07vh 0 4px #de8d93, 94.32vw 95.93vh 0 3px #02be69, 28.51vw 28.59vh 0 5px #c56638, 60.15vw 5.58vh 0 5px #279da5, 19.47vw 45.85vh 0 4px #ab4505, 91.94vw 91.43vh 0 3px #71b217, 87vw 15.24vh 0 1px #2bf7c2, 52.85vw 95.68vh 0 4px #41e039, 87.13vw 88.7vh 0 3px #d105bf, 7.83vw 22.61vh 0 1px #2bf715, 90.06vw 47.01vh 0 2px #a5e91a, 14.52vw 96.24vh 0 5px #b57c37, 87.26vw 79.26vh 0 2px #fe4303, 41.57vw 19.51vh 0 3px #1a63ac, 89.33vw 8.67vh 0 3px #bc5542, 27.81vw 91.41vh 0 5px #e52cee, 4.6vw 51.01vh 0 3px #c86e2f, 0.95vw 7.33vh 0 1px #4c7efa, 16.6vw 50.84vh 0 1px #cf2013, 20.68vw 83.69vh 0 3px #4fab37, 80.7vw 24.21vh 0 4px #a57314, 21.01vw 39.71vh 0 1px #43ae72, 7.29vw 22.76vh 0 5px #35ca43, 33.97vw 96.53vh 0 1px #d5406b, 0.22vw 78.08vh 0 1px #9717ac, 37.37vw 39.02vh 0 4px #60daae, 87.95vw 4.2vh 0 5px #214f40, 78.32vw 14.76vh 0 2px #78ea77, 16.62vw 43.71vh 0 3px #5f0651, 98.62vw 90.24vh 0 5px #7b8e0b, 35.84vw 23.36vh 0 4px #df457a, 14.81vw 40.92vh 0 5px #d4f0d8, 98.91vw 75.18vh 0 2px #c9dd79, 29.63vw 9.04vh 0 1px #b3d2e3, 46.11vw 11.93vh 0 4px #17e337, 99.96vw 53.92vh 0 1px #f19216, 7.9vw 74vh 0 1px #fd3ef2, 50.3vw 58.66vh 0 1px #3803a9, 0.6vw 7.53vh 0 3px #34189e, 6.9vw 26.83vh 0 4px #445e07, 86.26vw 2.41vh 0 2px #ff4ad8, 85.28vw 94.83vh 0 3px #075358, 32.67vw 35.57vh 0 2px #137b6a, 24.09vw 98.22vh 0 2px #b8808f, 35.64vw 13.26vh 0 5px #c3d9bc, 93.04vw 42.85vh 0 1px #8a13d5, 68.34vw 12.2vh 0 3px #df9708, 69.13vw 13.63vh 0 3px #5821ec, 15.32vw 17.37vh 0 3px #6f5787, 91.02vw 14.67vh 0 5px #3c3067, 96.3vw 21.8vh 0 5px #5ba8bb, 74.25vw 63.2vh 0 5px #e51a38, 45.13vw 48.59vh 0 4px #2ec0d6, 18.54vw 59.93vh 0 4px #d525b6, 53.15vw 6.61vh 0 4px #929214, 6.07vw 18vh 0 1px #de54c7, 34.65vw 46.69vh 0 1px #891831, 57.89vw 25.03vh 0 5px #e64631, 66.87vw 40.12vh 0 1px #d47c30, 23.06vw 59.84vh 0 2px #23e3db, 14.25vw 0.48vh 0 1px #ba3917, 50.75vw 66.58vh 0 2px #9f1d5b, 87.66vw 96.87vh 0 3px #e06bf3, 33.5vw 50.53vh 0 5px #fd4127, 60.02vw 84.04vh 0 2px #90df96, 0.68vw 4.61vh 0 3px #17be1b, 30.15vw 91.43vh 0 1px #e73804, 94.26vw 30.82vh 0 4px #eab1e0, 70.31vw 77.73vh 0 5px #be719e, 82.4vw 9.17vh 0 2px #a6c505, 39.78vw 24.15vh 0 3px #020c18, 15.53vw 29.51vh 0 4px #9e4504, 26.61vw 27.9vh 0 3px #f31dde, 9.33vw 84.88vh 0 4px #16a928, 13.02vw 44.85vh 0 3px #663686, 1.84vw 32.54vh 0 5px #9813a2, 86.9vw 5.42vh 0 4px #962714, 23.74vw 40.38vh 0 5px #337f48, 27.92vw 38.55vh 0 4px #f87ef1, 39.99vw 84.21vh 0 3px #18cc3c, 29.23vw 98.63vh 0 2px #dc83d3, 39.09vw 90.41vh 0 3px #63590c, 27.07vw 34.16vh 0 3px #7c6b5f, 20.25vw 28.51vh 0 1px #dab41b, 17.87vw 73.97vh 0 3px #724283, 7.68vw 70.58vh 0 4px #28159a, 80.42vw 84.74vh 0 4px #84f295, 27.79vw 38.03vh 0 5px #a81a66, 38.28vw 35.79vh 0 4px #de607e, 65.03vw 58.15vh 0 2px #d2f356, 54.09vw 60.66vh 0 4px #4eb4db, 96.48vw 21.5vh 0 1px #a725d1, 41.72vw 83.33vh 0 3px #7fe2eb, 14.07vw 0.87vh 0 4px #f13cdb, 60.4vw 28.09vh 0 5px #ac60f1, 90.2vw 90.99vh 0 2px #7eedd3, 63.07vw 79.66vh 0 1px #e7806a, 98.42vw 93.97vh 0 5px #5926ad, 30.24vw 95.77vh 0 2px #27a941, 64.26vw 11.1vh 0 1px #8af7c0, 78.25vw 17.02vh 0 4px #fcf032, 63.24vw 33.64vh 0 2px #95fee7, 99.33vw 17.6vh 0 2px #603107, 79.85vw 72.79vh 0 4px #1b0866, 61.61vw 24.16vh 0 1px #97fdae, 98.48vw 48.86vh 0 5px #573eed, 50.54vw 77.49vh 0 3px #12f2e0, 88.6vw 18.76vh 0 2px #1371dd, 27.34vw 28.91vh 0 4px #2ff6be, 30.85vw 22.88vh 0 3px #ead94c, 11.66vw 43.46vh 0 1px #1518aa, 38.99vw 86.68vh 0 2px #d7bce1, 19.3vw 68.51vh 0 2px #5098a6, 17.32vw 10.63vh 0 1px #99e363, 68.69vw 34.68vh 0 3px #e77af6, 45.6vw 75.64vh 0 1px #68e766, 71.94vw 98.68vh 0 2px #062fc0, 28.86vw 25.8vh 0 1px #da0146;
    }
    .g-group:nth-child(2) .item {
      -webkit-animation-delay: -4s;
      animation-delay: -4s;
    }
    .item-right {
      transform: rotateY(90deg) translateZ(500px);
    }
    .item-left {
      transform: rotateY(-90deg) translateZ(500px);
    }
    .item-top {
      transform: rotateX(90deg) translateZ(500px);
    }
    .item-bottom {
      transform: rotateX(-90deg) translateZ(500px);
    }
    .item-middle {
      transform: rotateX(180deg) translateZ(1000px);
    }
    @-webkit-keyframes move {
      0% {
        transform: translateZ(-200px) rotate(0deg);
      }
      100% {
        transform: translateZ(150px) rotate(0deg);
      }
    }
    @keyframes move {
      0% {
        transform: translateZ(-200px) rotate(0deg);
      }
      100% {
        transform: translateZ(150px) rotate(0deg);
      }
    }
    @-webkit-keyframes fade {
      0% {
        opacity: 0.2;
      }
      25%,
      60% {
        opacity: 1;
      }
      100% {
        opacity: 0.2;
      }
    }
    @keyframes fade {
      0% {
        opacity: 0.2;
      }
      25%,
      60% {
        opacity: 1;
      }
      100% {
        opacity: 0.2;
      }
    }
    @-webkit-keyframes hueRotate {
      0% {
        filter: hue-rotate(0);
      }
      100% {
        filter: hue-rotate(360deg);
      }
    }
    @keyframes hueRotate {
      0% {
        filter: hue-rotate(0);
      }
      100% {
        filter: hue-rotate(360deg);
      }
    }
  </style>
  <script>
    window.console = window.console || function (t) { };
  </script>
  <script>
    if (document.location.search.match(/type=embed/gi)) {
      window.parent.postMessage("resize", "*");
    }
  </script>
</head>
<body translate="no">
  <div>
    <div>
      <div class="item item-right"></div>
      <div class="item item-left"></div>
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>
      <div class="item item-middle"></div>
    </div>
    <div>
      <div class="item item-right"></div>
      <div class="item item-left"></div>
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>
      <div class="item item-middle"></div>
    </div>
  </div>
  <div id="xl_chrome_ext_{4DB361DE-01F7-4376-B494-639E489D19ED}" style="display: none;">
    <div></div>
    <a id="xl_chrome_ext_download" href="javascript:;">下载视频</a>
    <a id="xl_chrome_ext_close" href="javascript:;"></a>
  </div>
</body>
</html>

        查看在线实例

        通过以上内容我们知道了css实现时空隧道的炫酷特效?感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • 设置英文首字母大写的css属性是什么?

    设置CSS text-transform 的属性为capitalize就可以实现英文首字母大写。 定义和用法  text-transform 属性控制文本的大小写。 属性值 值 描 述 none 默认。定义带有小写字…

    2021/7/14 20:35:17
  • 只让页面显示横滚动条,不显示竖滚动条如何实现?

    只让页面显示横滚动条,不显示竖滚动条的方法其实很简单,主要用到body的两个css属性 overflow和 overflow-y,如下所示:body { overflow:scroll; overflow-y:hidden;}

    2021/2/28 21:45:25
  • 网页的滚动条样式可以修改吗?如何修改?

    网页的滚动条样式可以修改的,主要是使用css来控制那如何修改呢?如下代码:<div class="inner"> <div class="innerbox"> <p style="height:200px;">这是内容111</p> <p style="hei…

    2021/2/28 21:15:24
  • css如何实现6张图片均匀排列在一行?

    css部分如下:img{width:120px; height:80px;float:left;margin-right:16px;}.img3{margin-right:0;}html部分如下:<img src="images/001.jpg" /><img src="images/002.jpg" /><img src="images/003.jpg" /><img src=…

    2021/2/28 21:10:01