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 var(--tf) var(--cb),
    right var(--tf) var(--cb),
    rotate var(--tf) var(--cb),
    height var(--tf) var(--cb),
    width var(--tf) var(--cb),
    filter var(--tf) var(--cb),
    transform var(--tf) var(--cb);
}
.tokyo *, .tokyo *::before, .tokyo *::after {
    position: absolute; content: ''; display: block;
    pointer-events: none;
}

.tokyo .t {
    width: 100%;
    top: 0;
}
.tokyo .t::before {
    top: 0;
    width: 100%;
    height: var(--tc);
    background: #fff;
    border-radius: var(--br);
}
.tokyo .t::after {
    border-radius: var(--br);
    width: 70%;
    height: var(--tc);
    background: #fff;
    left: 0; right: 0; margin: auto;
    transform: rotate(90deg) translateX(50%);
}
/* kanji */
.tokyo.kanji .t {
    top: var(--offset);
}
.tokyo.kanji .t::before {
    top: calc( var(--sz) * 0.05em);
}
.tokyo.kanji .t::after {
    width: 100%;
}


.tokyo .o {
    border-radius: calc(var(--br)* 0.3);
    border: var(--tc) solid #fff;
    width: 100%; 
    left: 0%; 
    height: calc(var(--sz) * 0.22em);
}
.tokyo .o:nth-child(2){
    top: calc(var(--sz) * 0.26em);
}
/* kanji */
.tokyo.kanji .o:nth-child(2){
    width: 80%;
    left: 10%; 
    top: calc((var(--sz) * 0.1em) + var(--offset));
    height: calc(var(--sz) * 0.1em);
}


.tokyo .k {
    height: calc(0.22em * var(--sz));
    width: 100%;
    top: calc(var(--sz) * 0.58em);
}
.tokyo .k div {
    border-radius: var(--br);
    height: calc(0.22em * var(--sz));
    width: var(--tc);
    background: #fff;
    top: 0%;
}
.tokyo .k::before {
    border-radius: var(--br);
    width: var(--tc); height: 100%;
    background: #fff;
    transform: rotate(64deg) translateX(0%) translateY(-50%);
}
.tokyo .k::after {
    border-radius: var(--br);
    width: var(--tc); height: 108%;
    background: #fff;
    transform: rotate(114deg) translateX(0%) translateY(-50%);
}
/* kanji */
.tokyo.kanji .k {
    left: 2%;
    top: calc((var(--sz) * 0.16em) + var(--offset));
    transform: rotate(90deg);
}
.tokyo.kanji .k.........完整代码请登录后点击上方下载按钮下载查看