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 .........完整代码请登录后点击上方下载按钮下载查看