div+scss实现彩带立体卷起来三维文字动画效果代码-html代码-BFW代码库

div+scss实现彩带立体卷起来三维文字动画效果代码

代码语言：html

所属分类：动画

代码描述：div+scss实现彩带立体卷起来三维文字动画效果代码，彩带丝带弯曲卷入场和出场动画。

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">


  
<style type = 'text/scss'>
@import url('https://fonts.googleapis.com/css2?family=Protest+Riot&display=swap');

*, *::before, *::after {
    padding: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

body {
  font-family: 'Protest Riot', sans-serif;
  background-color: #000;
  color: #fff;
  min-height: 100vh;
  display: grid;
  place-items: center;
  perspective: 800px;
  overflow: hidden;
  
  * {
    transform-style: preserve-3d;
  }
}

.scene {
  position: relative;
  // font-size: 24px;
  animation: scene 45s infinite linear;

  @keyframes scene {
    from { transform: rotate(0deg) rotateX(15deg) rotate(360deg); }
    to { transform: rotate(360deg) rotateX(15deg) rotate(0deg); }
  }
}

.ribbon {
  position: absolute;
  
  i {
    position: absolute;
    inset: -1.5em -0.5em;
    overflow: hidden;
    transform:
      translate(var(--tx, 0), var(--ty, 0))
      rotateY(var(--ry, 0deg))
      translateZ(calc(0.5em / tan(4.5deg)))
      skewY(5deg)
      scalex(1.02);

    @for $i from 0 to 120 {
      &:nth-child(#{$i + 1}) {
        --left: #{($i + 1) * 0.5}em;
        --ty: #{-10 / 120 * $i + 5}em;
        
        @if ($i < 20) {
          --tx: #{20 - $i}em;
          --fadeLight: #{($i + 1) * 4}%;
        } @else if ($i >= 100) {
          --tx: #{($i - 100) * -1}em;
          --fadeLight: #{80 - ($i - 99) * 4}%;
        } @else {
          --ry: #{-720 / 80 * ($i - 20) - 0}deg;
          --fadeLight: calc((sin(var(--ry) + 90deg) + 1) * 30% + 20%);
        }
      }
    }
    
    --bgColor: hsl(200 100% var(--fadeLight));
    --color: hsl(200 100% calc(var(--fadeLight) * 1.5));
    
    &::after {
      content: "CSS is Awsome!";
      position: absolute;
      display: grid;
      place-items: center;
      top: 50%; left: var(--left);
      width: 36em; height: 100%;
      color: var(--color);
      font-size: 2em;
      background-image:
        linear-gradient(-60deg, transparent 1em, var(--bgColor) 0 31em, transparent 0),
        linear-gradient(60deg, transparent 1em, var(--bgColor) 0 31em, transparent 0);
      font-style: normal;
      text-shadow: 0 0 0.1em #0007;
      animation: text 16s infinite ease-in-out;
      
      @keyframes text {
        0% { translate: 0em -50%; }
        45% { translate: -49.5em -50%; }
        55% { translate: -47em -50%; }
        100% { translate: -96.5em -50%; }
      }
    }
  }
}
</style>

  
  
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/sass.sync.js"></script>
    <script>
 
     const styleEls = document.querySelectorAll('style');

       styleEls.forEach(styleEl => {
           const type = styleEl.getAttribute('type');

           if (type == 'text/scss') {



               Sass.compile(styleEl.innerHTML, function(result) {
                   if (result.status == 0) {

                       const newStyleEl = document.createElement('style');
                       newStyleEl.textContent = result.text

                       document.head.appendChild(newSt.........完整代码请登录后点击上方下载按钮下载查看