open-prop实现三维文字跳入跳出动画效果代码-html代码-BFW代码库

open-prop实现三维文字跳入跳出动画效果代码

代码语言：html

所属分类：动画

代码描述：open-prop实现三维文字跳入跳出动画效果代码

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

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

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


<style>
@import '//repo.bfw.wiki/bfwrepo/css/open-props.css' layer(design.system);
@import '//repo.bfw.wiki/bfwrepo/css/open-props_normalize.dark.css'
  layer(demo.support);

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@200..900&display=swap');

:root {
  font-family: 'Inter', sans-serif;
}

body {
  display: grid;
  place-content: center;
  background-color: var(--sand-12);
}

h1 {
  text-transform: lowercase;
  display: flex;

  text-align: center;
  /* filter: var(--noise-filter-1); */
}

.shadow {
  text-align: center;
  rotate: x 106deg;
  filter: blur(60px);
}

.text {
  display: grid;
  font-weight: var(--font-weight-9);

  /* font-size: var(--size-fluid-5); */
  font-size: clamp(3.5rem, 5vw, 5rem);
}

.letter {
  grid-area: 1/1;

  display: flex;

  > * {
    /* animation: rotate 4s var(--ease-squish-5); *.........完整代码请登录后点击上方下载按钮下载查看