css实现手风琴伸缩动画效果代码
代码语言: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(--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