css+svg实现文字穿越虫洞动画效果代码-html代码-BFW代码库

代码语言：html
所属分类：动画
代码描述：css+svg实现文字穿越虫洞动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">
  

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font: normal 100%/1.4 'Keep Calm', helvetica, sans-serif;
  color: #fff;
  background: #1a1a11;
}

.keep-calm {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  padding: 12.5vh 0;
  overflow: hidden;
  display: table;
}

ul {
  width: 100%;
  display: table-cell;
  vertical-align: middle;
  list-style: none;
  font-size: 7vh;
  overflow: hidden;
  /* Only for webkit */
  -webkit-mask: -webkit-linear-gradient(transparent, black 10%, black 90%, transparent);
  -webkit-mask: linear-gradient(rgba(0, 0, 0, 0), #000000 10%, #000000 90%, rgba(0, 0, 0, 0));
}

li {
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 -5px 5px rgba(255, 255, 255, 0.15), 0 5px 5px rgba(255, 255, 255, 0.15);
}

#timeline-01 li {
  -moz-animation: continue-testing 3s linear infinite -1.5s;
  -webkit-animation: continue-testing 3s linear infinite -1.5s;
  animation: continue-testing 3s linear infinite -1.5s;
}

#timeline-02 li {
  -moz-animation: continue-testing 3s linear infinite;
  -webkit-animation: continue-testing 3s linear infinite;
  animation: continue-testing 3s linear infinite;
}

span {
  font-size: 5vh;
}

li:first-child span {
  font-size: 8vh;
}

.top-portal {
  width: 100%;
  height: 30vh;
  margin-top: 0;
  perspective: 1000px;
  overflow: hidden;
}
.top-portal .wrapper-portal {
  height: 30vh;
  display: block;
  margin: 0 auto;
  -moz-transform: rotate3D(45, 0, 0, -60deg) scaleX(2.4);
  -ms-transform: rotate3D(45, 0, 0, -60deg) scaleX(2.4);
  -webkit-transform: rotate3D(45, 0, 0, -60deg) scaleX(2.4);
  transform: rotate3D(45, 0, 0, -60deg) scaleX(2.4);
}
.top-portal .inner-portal {
  display: block;
  width: auto;
  max-width: 100vw;
  height: 30vh;
  margin: 0 auto;
  fill: #009cdf;
  -webkit-filter: drop-shadow(-5px -5px 20px #009cdf);
  filter: drop-shadow(-5px -5px 20px #009cdf);
  -moz-animation: spin 1s linear infinite;
  -webkit-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
}

.bottom-portal {
  width: 100%;
  height: 30vh;
  margin-top: 40vh;
  perspective: 1000px;
  overflow: hidden;
}
.bottom-portal .wrapper-portal {
  height: 30vh;
  display: block;
  margin: 0 auto;
  -moz-transform: rotate3D(45, 0, 0, 60deg) scaleX(2.4);
  -ms-transform: rotate3D(45, 0, 0, 60deg) scaleX(2.4);
  -webkit-transform: rotate3D(45, 0, 0, 60deg) scaleX(2.4);
  transform: rotate3D(45, 0, 0, 60deg) scaleX(2.4);
}
.bottom-portal .inner-portal {
  display: block;
  width: auto;
  max-width: 100vw;
  height: 30vh;
  margin: 0 auto;
  fill: #f49007;
  -webkit-filter: drop-shadow(-5px -5px 20px #f49007);
  filter: drop-shadow(-5px -5px 20px #f49007);
  -moz-animation: spin 1s linear infinite reverse;
  -webkit-animation: spin 1s linear infinite reverse;
  animation: spin 1s linear infinite reverse;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotateZ(360deg);
  }
}
@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotateZ(360deg);
  }
}
@keyframes spin {
  100% {
    -webkit-transform: rotateZ(360deg);
    transform: rotateZ(360deg);
  }
}
@-webkit-keyframes continue-testing {
  0% {
    -webkit-transform: translateY(-70vh);
  }
  100% {
    -webkit-transform: translateY(70vh);
  }
}
@-moz-keyframes continue-testing {
  0% {
    -moz-transform: translateY(-70vh);
  }
  100% {
    -moz-transform: translateY(70vh);
  }
}
</style>




</head>

<body>
  <div class="continue-testing">
  <div class="top-portal">
    <div class="wrapper-portal">
      <svg xmlns="http://www.w3.org/2000/svg" class="inner-portal" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="500px" height="500px" viewBox="0 0 500 500" preserveAspectRatio="xMidYMid meet" enable-background="new 0 0 500 500" xml:space="preserve" >
        <path d="M454.967 201.497c-2.046-4.584-4.103-11.274-6.81-15.257c-1.573 1.083-1.413 2.54 0.48 4.38 c-1.124-2.934-2.787-5.496-4.988-7.686c3.922 9.31 6.28 19.03 8.84 28.435c-1.234-5.589 3.67 3.72 0.694-8.076 c2.072 0.43 2.97 8.73 4.77 9.432C460.563 207.46 454.27 186.51 454.97 201.497z" />
        <path d="M171.276 412.319c10.754 4.62 4.7 2.6 0.95 2.94c0.003 0 9.23 2.83 10.04 3.04 c-9.737-3.001 0.261-3.568-9.111-7.332c4.727-0.088 9.13 1.11 13.2 3.599c-1.075 2.478-3.178 2.9-6.31 1.27 c10.493 3.33 25.54 7.75 36.48 6.252c0.593-1.175-19.706-7.598-22.095-5.952c0.934 0.14 1.87 0.25 2.81 0.34 c-27.642-13.083-52.699-26.151-92.344-47.62c2.044 1.45 6.63 7.965-0.194 4.164c3.306 2.51 5.35 2.08 8.76 5.58 c7.969 4.11 38.31 24.85 56.05 33.515c-3.908-0.089-7.582-1.094-11.021-3.014C165.733 413.93 165.55 412.48 171.28 412.319z" />
        <path d="M77.182 310.442c14.617 17.63 22 37.82 36.95 57.408c0.099-0.199-6.1-0.488-8.88-3.735 c1.723 0.2 3.37 0.68 4.93 1.448c-12.311-14.363-24.632-26.043-30.629-42.565c2.274 4.72 13.2 15.41 13.12 17.44 C92.829 340.59 74.55 311.47 77.18 310.442z M80.237 316.743C81.078 319 84.34 324.58 80.24 316.74 C80.237 316.74 81.01 318.23 80.24 316.743z"/>
        <path d="M442.629 174.725c1.469 0.56 6.9 14.38 3.07 2.014c2.178-0.2 4.07 8.85 4.74 10.34 c-0.696-7.177 8.28 23.209-0.532-5.998c-0.203 0.73 5.48 8.45 4.88 4.362c-3.026-9.364-7.495-18.705-14.084-26.091 c3.146 5.93 6.39 12.06 7.69 18.717c-2.302-5.086-5.517-11.376-7.957-17.219c1.43 4.05 2.37 14 4.16 16.48 C441.933 173.69 444.25 170.57 442.63 174.725C443.427 175.03 442.78 174.33 442.63 174.725z" />
        <path d="M81.598 352.855c4.883 5.44 15.81 16.6 24.08 25.972c-0.911-1.771-2.257-2.773-4.038-3.006 c3.476 5.66 5.19 9.22 10.88 12.823c-0.094 0.283-3.354-3.659-3.842-3.659c3.541 1.76 6.79 4.85 10.58 6.05 c-2.816 0.219-5.213-0.896-7.19-3.343c10.362 7.12 73.91 62.92 87.83 47.147c-7.133-2.744-8.451-1.786-14.452-5.389 c16.3 8.92 66.52 20.02 73.11 15.265c11.19-0.249 22.725-4.226 33.062-7.46c-2.954 0.547-5.172 2.013-6.652 4.4 c3.682-0.942 13.608-6.332 3 1.711c10.116-0.835 21.985-8.287 32.115-12.742c-2.006-0.395-3.898-0.009-5.677 1.16 c-0.027 3.72 77.603-53.258 85.821-62.336c-0.94 1.393-1.73 2.866-2.371 4.421c4.667-7.408 11.623-12.95 15.903-20.691 c-4.471 7.4 2.309-4.534 2.338-4.601c10.349-13.445 16.886-37.541 21.756-58.104c-1.413 3.396-1.294 6.56 0.36 9.51 c4.479-18.83 2.562-33.653 4.389-53.412c1.101 6.36 2.13 12.67 2.98 19.07c0.572-1.538 1.144-3.076 1.716-4.614 c0.459 2.22 0.05 6.45 1 8.619c4.262-11.575 2.08-4.508 1.488-15.275c2.561 8.397-1.777 38.209-2.246 37.51 c-1.143 3.866-2.248 7.743-3.318 11.63c2.178 0.16 2.988-1.4 2.431-4.679c6.514 4.244-29.777 68.318-27.043 64.92 c-1.17 7.845-29.53 36.709-34.982 42.181c-0.245 0.01 9.749-12.601 10.436-14.15c-6.358 0.063-9.994 21.286-0.064-3.001 c-10.074 9.819-15.756 18.314-26.59 27.018c1.844-0.784 13.148-7.72 13.526-7.166c-31.537 25.245-65.322 30.673-102.11 48.23 c2.599-1.258 5.252-2.391 7.959-3.399c-3.625 1.596-7.383 2.229-11.271 1.9c1.727-0.009 3.415-0.244 5.067-0.706 c0.537-0.208-4.18-0.938-0.602-1.934c-4.688 0.97-9.575 1.29-14.158 2.77c6.824-0.536-0.964 2.62 6.2 1.09 c-27.196 10.188-36.429-4.557-62.718-0.722c1.141-0.166 10.62 0.9 3.815-1.708c3.477-0.127 12.21 2.69 15.11 0.23 c-22.728 0.554-67.546-18.729-80.622-21.855c-0.938-0.65-9.778-6.96-11.214-5.301c1.805 1.22 3.57 2.49 5.29 3.83 c-36.271-8.563-70.657-59.726-90.703-90.053c-2.869 3.55 12.15 18.09 13.06 21.952c-7.923-5.218-13.757-19.247-18.151-26.169 c2.287 10.14 6.48 19.45 12.57 27.935c-0.104-0.308-2.169-4.169-1.906-4.756c1.247 1.49 1.77 3.72 3.19 5.07 c-0.623-1.893-1.198-3.799-1.728-5.72c2.282 4.64 5.63 8.79 8.52 13.054c-1.317-1.612-2.172-3.425-2.563-5.439 c0.235 2.36 7.36 7.76 8.69 9.703c-2.493-1.536-3.013-2.838-1.562-3.907c1.287 2.82 14.73 27.43 21.72 26.13 c-0.577-0.058 10.77 10.06 22.94 19.188c-5.697-1.851-10.722-4.871-15.075-9.062c0.963 1.14 1.93 2.29 2.89 3.43 c-4.935-1.916-9.932-7.841-13.246-11.583c7.179 5.152-4.539-7.983-4.014-6.83c0.474 2.512-0.472 2.62-2.837 0.33 c3.366 3.45 6.63 7 9.8 10.637c-11.574-11.564-25.354-25.466-30.335-29.659c1.34 1.487-15.272-25.782-9.032-15.183 c2.089 3.549-9.453-22.777-13.544-28.508c1.545-0.853 2.75-0.313 3.61 1.616c-1.34-4.911-10.351-21.199-9.144-20.536 c2.979-1.279 11.48 19.63 10.46 16.625c-1.245-8.914 4.427-0.217 3.94 1.188c-12.282-8.732-11.427-44.975-16.165-52.608 c-1.483 1.01 0.12 2.95 0.84 3.614c-0.906-3.75-1.384-7.633-2.397-11.35c2.923 9.26 3.344-35.683-0.825-49.261 c-2.357 11.631-1.549 2.073-2.306 1.202c1.547 7.136-3.956 15.21 0.53 23.382c5.375-14.501 0.62 10.42 1.03 19.32 c-1.102-3.748-2.573-4.396-2.763-8.798c-3.169 2.69 2.32 14.18 2.02 18.136c0.108-1.405-8.075-18.194-4.736-9.486 c-1.065-13.629-1.772-30.332 1.568-49.284c-0.814 12.34 4.902-10.314 4.169-11.142c4.002 4.52 4.729-33.479 11.832-45.715 c4.442-11.841 15.026-32.115 27.582-43.057c-6.606 12.458-12.094 18.71-15.943 27.299c1.042-0.04-2.767 12.587-6.119 18.91 c3.181 17.67 0.821-13.382 0.441-12.877c-1.417 6.405-4.717 12.022-6.309 18.382c1.79-13.501-7.627 19.766-4.909 18.7 c2.719-8.229 5.5-16.297 9.16-24.173c-1.217 4.002-0.2 10.492-1.694 14.143c1.092 1.65 2.65 2.19 4.66 1.62 c0.185-6.698 4.227-12.836 6.065-19.104c-3.072 1.342-4.756 3.876-5.053 7.601c2.789-7.598 5.334-12.116 10.818-22.118 c-1.073 2.081-1.602 4.28-1.586 6.6c7.025-12.626 17.988-36.869 30.858-46.148c-0.423-11.587-18.317 27.508-15.974 17.12 c0.028-0.032-7.061 10.291-7.458 9.867c1.749-3.893 3.645-7.713 5.688-11.46c-1.034 1.056-2.067 2.113-3.101 3.17 c2.45-3.728 5.231-7.192 8.345-10.392c-2.434-0.305-1.734-1.824 2.102-4.557c3.312-2.005-9.898 11.859-10.225 9.52 c5.539-14.887 28.362-34.951 40.447-44.112c-4.119 8.676-12.492 11.583-17.662 20.967c3.558-5.678 20.316-16.773 21.022-18.333 c-1.895 4.382-18.126 15.522-11.975 11.591c-4.054 3.762-10.604 9.516-12.274 14.999C117.668 75.14 130.22 60.09 159.8 45.3 c-0.596 11.028-34.118 8.503-36.399 21.256c0.959 1.78 15.773-8.067 16.172-8.227c-2.167 1.24-16.374 8.528-14.354 13.48 c1.336 3.26 16.467-9.801 5.882-4.867c1.102-1.234 24.498-15.732 24.498-16.566c-1.252 0.735-2.172 1.755-2.76 3.06 c5.151-2.792 16.004-6.605 18.97-10.484c0.848-1.11-8.17 2.731-8.342 2.804c16.633-12.361 27.775-10.277 52.861-16.27 c-2.8 1.809-2.648 3.24 0.45 4.296c-5.709 0.189-11.458 1.673-16.955 3.094c3.605-2.744 7.743-4.262 12.415-4.555 c-4.839-4.042-42.376 8.241-42.866 13.946c11.858 2.56 52.364-8.117 66.324-13.005c-0.41-0.074-7.748-0.97-10.976-1.243 c8.277-1.571 15.13-2.428 25.017-1.558c-4.72-1.011-9.649-1.845-14.417-0.528c9.589-2.835 18.875-2.066 28.566-0.946 c-6.965-0.017-3.923 3.998-14.343 3.052c4.378-4.068-11.814 0.861-11.882 2.308c0.016-0.341 62.54 5.74 68.72 7.14 c-1.787-1.439-4.98-1.976-7.105-2.959c24.855 0.49 44.72 16.99 67.03 28.497c0.354 0.16 26.61 26.44 30.6 26.43 c1.467 1.624-18.325-15.913-12.669-12.604c-4.063-3.499-8.354-6.688-12.877-9.566c1.003 2.17 2.61 3.79 4.82 4.87 c-1.119 1.541-9.152-4.978-10.928-5.101c1.499 0.11 17.42 11.26 18.83 13.368c-3.664-2.488-7.551-4.562-11.661-6.219 c5.406 4.61 33.33 20.94 28.8 14.246c-2.13-2.025 10.21 8.46 7.5 10.995c-4.113-3.712-8.061-3.772-12.47-6.988 c4.264 8.5 13.92 19.28 25.06 27.872c-4.425-8.087-7.728-12.547-13.905-17.933c1.476 1.63 2.95 3.26 4..........完整代码请登录后点击上方下载按钮下载查看