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

代码语言:html

所属分类:动画

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

代码标签: 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(--white1, var(--white)) 0.4%,
          var(--white1, var(--white)) 5%,
          var(--white-between) 5%,
          var(--white-between) 5.4%,
          var(--white2, var(--white)) 5.4%,
          var(--white2, var(--white)) 10%,
          var(--white-between) 10%,
          var(--white-between) 10.4%,
          var(--white3, var(--white)) 10.4%,
          var(--white3, var(--white)) 15%,
          var(--white-between) 15%,
          var(--white-between) 15.4%,
          var(--white4, var(--white)) 15.4%,
          var(--white4, var(--white)) 20%,
          var(--white-between) 20%,
          var(--white-between) 20.4%,
          var(--white5, var(--white)) 20.4%,
          var(--white5, var(--white)) 25%,
          var(--white-between) 25%,
          var(--white-between) 25.4%,
          var(--white6, var(--white)) 25.4%,
          var(--white6, var(--white)) 30%,
          var(--white-between) 30%,
          var(--white-between) 30.4%,
          var(--white7, var(--white)) 30.4%,
          var(--white7, var(--white)) 35%,
          var(--white-between) 35%,
          var(--white-between) 35.4%,
          var(--white8, var(--white)) 35.4%,
          var(--white8, var(--white)) 40%,
          var(--white-between) 40%,
          var(--white-between) 40.4%,
          var(--white9, var(--white)) 40.4%,
          var(--white9, var(--white)) 45%,
          var(--white-between) 45%,
          var(--white-between) 45.4%,
          var(--white10, var(--white)) 45.4%,
          var(--white10, var(--white)) 50%,
          var(--white-between) 50%,
          var(--white-between) 50.4%,
          var(--white11, var(--white)) 50.4%,
          var(--white11, var(--white)) 55%,
          var(--white-between) 55%,
          var(--white-between) 55.4%,
          var(--white12, var(--white)) 55.4%,
          var(--white12, var(--white)) 60%,
          var(--white-between) 60%,
          var(--white-between) 60.4%,
          var(--white13, var(--white)) 60.4%,
          var(--white13, var(--white)) 65%,
          var(--white-between) 65%,
          var(--white-between) 65.4%,
          var(--white14, var(--white)) 65.4%,
          var(--white14, var(--white)) 70%,
          var(--white-between) 70%,
          var(--white-between) 70.4%,
          var(--white15, var(--white)) 70.4%,
          var(--white15, var(--white)) 75%,
          var(--white-between) 75%,
          var(--white-between) 75.4%,
          var(--white16, var(--white)) 75.4%,
          var(--white16, var(--white)) 80%,
          var(--white-between) 80%,
          var(--white-between) 80.4%,
          var(--white17, var(--white)) 80.4%,
          var(--white17, var(--white)) 85%,
          var(--white-between) 85%,
          var(--white-between) 85.4%,
          var(--white18, var(--white)) 85.4%,
          var(--white18, var(--white)) 90%,
          var(--white-between) 90%,
          var(--white-between) 90.4%,
          var(--white19, var(--white)) 90.4%,
          var(--white19, var(--white)) 95%,
          var(--white-between) 95%,
          var(--white-between) 95.4%,
          var(--white20, var(--white)) 95.4%,
          var(--white20, var(--white)) 100%);
     
      --keyboard-base: linear-gradient(to right, var(--color3alt), var(--color3alt));
     
      --black-keys-position: 45% center;
      --black-keys-size: 36% 84%;
      --keyboard-position: left center;
      --keyboard-size: 66% 84%;
     
      --squeeze-duration: 13000ms;
      --button-duration: 2300ms;
      --squeeze-state: running;
     
      --note-color1: rgba(255, 255, 255, .1);
      --note-color2: rgba(255, 255, 255, .2);
      --note-color3: rgba(255, 255, 255, .05);
      --note-x1: -10vmin;
      --note-x2: -16vmin;
      --note-x3: -8vmin;
     
      --notes-full-1: var(--note-x1) 5vmin 0vmin var(--note-color1),
        var(--note-x2) 25vmin 0vmin var(--note-color2),
        var(--note-x3) 37.5vmin 0vmin var(--note-color3);
      --notes-full-2: -8vmin 5vmin 0vmin rgba(255, 255, 255, .4),
          -10vmin 25vmin 0vmin rgba(255, 255, 255, .02),
          -14vmin 37.5vmin 0vmin rgba(255, 255, 255, .24);
      --notes-full-3: -12vmin 5vmin 0vmin rgba(255, 255, 255, .1),
          -8vmin 25vmin 0vmin rgba(255, 255, 255, .2),
          -16vmin 37.5vmin 0vmin rgba(255, 255, 255, .4);
      --notes-full-4: -16vmin 5vmin 0vmin rgba(255, 255, 255, .2),
          -13vmin 25vmin 0vmin rgba(255, 255, 255, .3),
          -9vmin 37.5vmin 0vmin rgba(255, 255, 255, .1);
    }
   
    /*keyboard side*/
    div {
      width: calc(var(--bellow-width) * .36);
      height: calc(var(--height) + 5vmin);
      border-radius: 4vmin 1vmin 1vmin 4vmin;
      border: 0vmin solid var(--color2);
     
      background:
        var(--shine),
        var(--shine),
        var(--button-key1, var(--button)),
        var(--button-key2, var(--button)),
        var(--button-key3, var(--button)),
        var(--the-black-keys),
        var(--keyboard),
        var(--keyboard-base);
      background-repeat: no-repeat;
     
      background-position:
        80% 0,
        85% 0,
        var(--button-key-x) var(--button-key1-y),
        var(--button-key-x) var(--button-key2-y),
        var(--button-key-x) var(--.........完整代码请登录后点击上方下载按钮下载查看

网友评论0