div+css实现文字点击拼筹变形分解组合动画效果代码-html代码-BFW代码库

div+css实现文字点击拼筹变形分解组合动画效果代码

代码语言：html

所属分类：动画

代码描述：div+css实现文字点击拼筹变形分解组合动画效果代码

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

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

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

  
  
  
<style>
*{ box-sizing: border-box; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; scroll-behavior: smooth;}
html, body { height: 100%; overflow: hidden;}

body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0;
    background: #1e1e1e;
}
.tokyo {
    font-size: 2em;
    --br: 0em; 
    --sz: 6;
    --tc: calc(var(--sz) * 0.02em);
    width: calc(var(--sz) * (8/30) * 1em);
    height: calc(var(--sz) * 1.43em);
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    filter: drop-shadow(4px 4px #fff4);
    --offset: 27%;
}
.tokyo, .tokyo *, .tokyo *::before, .tokyo *::after {
    --cb: cubic-bezier(1,-0.69,0,1.95);
    --tf: 0.8s;
    transition: 
    top var(--tf) var(--cb),
    bottom var(--tf) var(--cb),
    left .........完整代码请登录后点击上方下载按钮下载查看