js+css实现可配置参数的立体弯曲文字旋转动画效果代码-html代码-BFW代码库

js+css实现可配置参数的立体弯曲文字旋转动画效果代码

代码语言：html

所属分类：动画

代码描述：js+css实现可配置参数的立体弯曲文字旋转动画效果代码

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

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

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

  
  
  
  
<style>
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
*{
    box-sizing: border-box;
}
html, body {
    height: 100%;
    overflow: hidden;
}
body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    font-family: Poppins;
    background: #161616;
    --speed: 24s;
}
.bg-lighting {
    position: absolute;
    pointer-events: none;
    width: 100%;
    height: 100%;
    top: 0;bottom: 0; margin: auto;
    background: radial-gradient(
        circle at 50% -100%,
        rgba(0, 0, 0, 1),
        rgba(0, 0, 0, 0)
        ),
        url("data:image/svg+xml,%3Csvg viewBox='0 0 600 600' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E"
        );
    filter: contrast(100%) brightness(200%) invert(100%) grayscale(1) opacity(0.1);
    mix-blend-mode: screen;
    z-index: -1;
}
.bg-lighting::after {
    display: block; content: '';
    width: 100%; height: 100%;
    position: absolute;
    background: linear-gradient( #000 20%, #0003 80%, transparent 100%);
    animation: var(--speed) f-grad linear infinite;
}
@keyframes f-grad {
    0% { height: 100%; }
    50% { height: 50%; }
    100% { height: 100%; }
}

.text-container {
    position: absolute;
    width: 300px;
    height: 300px;
    transform-style: preserve-3d;
    animation: var(--speed) f-rotate linear infinite;
}
.text-container.set1 {
    animation: var(--speed) f-rotate linear infinite reverse;
}
@keyframes f-rotate {
    0% { transform: rotateX(80deg) rotateY(0deg) rotateZ(0deg); }
    50% { transform: rotateX(42deg) rotateY(0deg) rotateZ(180deg); }
    100% { transform: rotateX(80deg) rotateY(0deg) rotateZ(360deg); }
}
.letter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform-origin: center;
    font-size: calc(var(--fontSize)*1px);
    color: #fff;
    filter: drop-shadow(0 3px 3px #ffffff9a);
}
.letter::after {
    content: attr(data-text);
    position: absolute;
    transform-origin: top;
    top: 100%;
    left: 0;
    transform: scaleY(-1) translateY(calc((var(--shadowHeight)*-1px) + -82%));
    z-index: -1;
    color: #fff;
    filter: blur(calc(var(--refBlur) * 1px));
    opacity: var(--refOpacity);
}

.text-container.set2 .letter {
    transform: rotateX(180deg);
}
</style>


  
  
</head>

<body translate="no">
  <div class="bg-lighting"></div>
  <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/dat.gui-min.js"></script>
      <script  type="module">
const animationDuration = 24000;
const updateInterval = 400;
let startTimeMap = new Map();
let intervalMap = new Map();

function createLetters(text, rad, offset, frontColor, direction, id) {
  const radius = rad;
  let letters = text.split('');
  if (direction != 'backwards') {letters = letters.reverse();}
  let dir = direction == 'backwards' ? -1 : 1;


  const container = document.createElement('div');
  container.classList.add('text-container');
  container.classList.add(id);
  document.body.appendChild(container);

  startTimeMap.set(id, Date.now());

  letters.forEach((letter, index) => {
    const angle = 360 / letters.length * dir * in.........完整代码请登录后点击上方下载按钮下载查看