css实现手风琴伸缩动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：css实现手风琴伸缩动画效果代码

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

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

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

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <style>
        div, div::before, div::after {
      position: relative;
      box-sizing: border-box;
    }
    
    div {
      --color1: hsl(196, 50%, 50%);
      --color1alt: hsl(196, 50%, 33%);
      --color1alta: hsl(196, 50%, 73%);
      --color2: hsl(356, 70%, 50%);
      --color2alt: hsl(356, 70%, 40%);
      --color2alta: hsl(356, 70%, 80%);
      --color3: hsl(33, 80%, 60%);
      --color3alt: hsl(43, 80%, 50%);
      --white: #eaeaef;
      --white-between: hsla(0,0%,0%,.2);
      --black: var(--color1alt);
      
      --height: 40vmin;
      --bellow-y: 1vmin;
      --bellow-y-less: 39vmin;
      --bellow-width: 50vmin;
      
      --button-dim: 1.4vmin;
      --button: radial-gradient(circle, var(--color1) var(--button-dim), transparent var(--button-dim));
      --button1: radial-gradient(circle, var(--button1-color, var(--color1)) var(--button1-dim, var(--button-dim)), transparent var(--button1-dim, var(--button-dim)));
      --button4: radial-gradient(circle, var(--button4-color, var(--color1)) var(--button4-dim, var(--button-dim)), transparent var(--button4-dim, var(--button-dim)));
      --button7: radial-gradient(circle, var(--button7-color, var(--color1)) var(--button7-dim, var(--button-dim)), transparent var(--button7-dim, var(--button-dim)));
      --button8: radial-gradient(circle, var(--button8-color, var(--color1)) var(--button8-dim, var(--button-dim)), transparent var(--button8-dim, var(--button-dim)));
      --button-x: -3vmin;
      --button-y: -16vmin;
      --button2-x: 2vmin; --button2-y: -12vmin;
      --button3-y: -8vmin;
      --button4-x: 2vmin; --button4-y: -4vmin;
      --button5-y: 0vmin;
      --button6-x: 2vmin; --button6-y: 4vmin;
      --button7-y: 8vmin;
      --button8-x: 2vmin; --button8-y: 12vmin;
      --button9-y: 16vmin;
      
      --button-key-x: 5.5vmin;
      --button-key1-y: -6vmin;
      --button-key2-y: 0vmin;
      --button-key3-y: 6vmin;
       
      --shine: linear-gradient(to bottom, transparent 11.5%, var(--color2) 11.5%, var(--color2) 29.5%, transparent 29.5%, transparent 70.5%, var(--color2) 70.5%, var(--color2) 88.5%, transparent 88.5%);
      --shine-horizontal: linear-gradient(to right, transparent 9.5%, var(--color2) 41.5%, var(--color2) 58.5%, transparent 86.5%);
      
      --the-black-keys: 
        linear-gradient(
          to bottom,
          transparent 3.5%,
          var(--black1, var(--black)) 3.5%,
          var(--black1, var(--black)) 6.5%,
          transparent 6.5%,
          transparent 8.5%,
          var(--black2, var(--black)) 8.5%,
          var(--black2, var(--black)) 11.5%,
          transparent 11.5%,
          transparent 13.5%,
          var(--black3, var(--black)) 13.5%,
          var(--black3, var(--black)) 16.5%,
          transparent 16.5%,
          
          transparent 23.5%,
          var(--black4, var(--black)) 23.5%,
          var(--black4, var(--black)) 26.5%,
          transparent 26.5%,
          transparent 28.5%,
          var(--black5, var(--black)) 28.5%,
          var(--black5, var(--black)) 31.5%,
          transparent 31.5%,
          
          transparent 38.5%,
          var(--black6, var(--black)) 38.5%,
          var(--black6, var(--black)) 41.5%,
          transparent 41.5%,
          transparent 43.5%,
          var(--black7, var(--black)) 43.5%,
          var(--black7, var(--black)) 46.5%,
          transparent 46.5%,
          transparent 48.5%,
          var(--black8, var(--black)) 48.5%,
          var(--black8, var(--black)) 51.5%,
          transparent 51.5%,
          
          transparent 58.5%,
          var(--black9, var(--black)) 58.5%,
          var(--black9, var(--black)) 61.5%,
          transparent 61.5%,
          transparent 63.5%,
          var(--black10, var(--black)) 63.5%,
          var(--black10, var(--black)) 66.5%,
          transparent 66.5%,
          
          
          transparent 73.5%,
          var(--black11, var(--black)) 73.5%,
          var(--black11, var(--black)) 76.5%,
          transparent 76.5%,
          transparent 78.5%,
          var(--black12, var(--black)) 78.5%,
          var(--black12, var(--black)) 81.5%,
          transparent 81.5%,
          transparent 83.5%,
          var(--black13, var(--black)) 83.5%,
          var(--black13, var(--black)) 86.5%,
          transparent 86.5%,
          
          transparent 93.5%,
          var(--black14, var(--black)) 93.5%,
          var(--black14, var(--black)) 96.5%,
          transparent 96.5%
        );
      
      /* If not animating, the keys can be done with a repeating linear gradient, breaking it out explicity (a few lines down) allows us more animation options 
      --keyboard: repeating-linear-gradient(to bottom, 
          var(--white-between) 0%,
          var(--white-between) 0.4%,
          var(--white) 0.4%,
          var(--white) 5%);
      */
      
      --keyboard: linear-gradient(to bottom, 
          var(--white-between) 0%,
          var(--white-between) 0.4%,
          var(--w.........完整代码请登录后点击上方下载按钮下载查看