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(--button-key3-y),
var(--black-keys-position),
var(--keyboard-position),
0 0;
background-size:
1px 100%,
2px 100%,
100%,
100%,
100%,
var(--black-keys-size),
var(--keyboard-size),
100%;
box-shadow: inset 1vmin 0px 0 1vmin rgba(235,235,239,.2);
transform: translateX(calc(var(--bellow-width) * -.66));
text-shadow: var(--notes-full-1);
color: rgba(0,0,0,0);
font-size: 4vmin;
}
/* bellows */
div::before{
width: var(--bellow-width);
height: var(--height);
background:
linear-gradient(to right, rgba(255, 255, 255, 0), rgba(255, 255, 255, .02)),
repeating-linear-gradient(to right, var(--color1) 0vmin, var(--color1) 2.5vmin, var(--color1alt) 2.5vmin, var(--color1alt) 5vmin);
top: 2.5vmin;
left: 100%;
bottom: 0;
}
@supports((-webkit-clip-path: polygon(0% 0%, 0% 10%, 10% 0%)) or (clip-path: polygon(0% 0%, 0% 10%, 10% 0%))) {
div::before {
-webkit-clip-path: polygon(
0% 0%,
2.5vmin var(--bellow-y),
5vmin 0,
7.5vmin var(--bellow-y),
10vmin 0,
12.5vmin var(--bellow-y),
15vmin 0,
17.5vmin var(--bellow-y),
20vmin 0,
22.5vmin var(--bellow-y),
25vmin 0,
27.5vmin var(--bellow-y),
30vmin 0,
32.5vmin var(--bellow-y),
35vmin 0,
37.5vmin var(--bellow-y),
40vmin 0,
42.5vmin var(--bellow-y),
45vmin 0,
47.5vmin var(--bellow-y),
50vmin 0,
50vmin var(--height),
47.5vmin var(--bellow-y-less),
45vmin var(--height),
42.5vmin var(--bellow-y-less),
40vmin var(--height),
37.5vmin var(--bellow-y-less),
35vmin var(--height),
32.5vmin var(--bellow-y-less),
30vmin var(--height),
27.5vmin var(--bellow-y-less),
25vmin var(--height),
22.5vmin var(--bellow-y-less),
20vmin var(--height),
17.5vmin var(--bellow-y-less),
15vmin var(--height),
12.5vmin var(--bellow-y-less),
10vmin var(--height),
7.5vmin var(--bellow-y-less),
5vmin var(--height),
2.5vmin var(--bellow-y-less),
0vmin var(--height)
);
clip-path: polygon(
0% 0%,
2.5vmin var(--bellow-y),
5vmin 0,
7.5vmin var(--bellow-y),
10vmin 0,
12.5vmin var(--bellow-y),
15vmin 0,
17.5vmin var(--bellow-y),
20vmin 0,
22.5vmin var(--bellow-y),
25vmin 0,
27.5vmin var(--bellow-y),
30vmin 0,
32.5vmin var(--bellow-y),
35vmin 0,
37.5vmin var(--bellow-y),
40vmin 0,
42.5vmin var(--bellow-y),
45vmin 0,
47.5vmin var(--bellow-y),
50vmin 0,
50vmin var(--height),
47.5vmin var(--bellow-y-less),
45vmin var(--height),
42.5vmin var(--bellow-y-less),
40vmin var(--height),
37.5vmin var(--bellow-y-less),
35vmin var(--height),
32.5vmin var(--bellow-y-less),
30vmin var(--height),
27.5vmin var(--bellow-y-less),
25vmin var(--height),
22.5vmin var(--bellow-y-less),
20vmin var(--height),
17.5vmin var(--bellow-y-less),
15vmin var(--height),
12.5vmin var(--bellow-y-less),
10vmin var(--height),
7.5vmin var(--bellow-y-less),
5vmin var(--height),
2.5vmin var(--bellow-y-less),
0vmin var(--height)
);
}
}
/* button side */
div::after {
left: calc(100% + var(--bellow-width));
top: 0;
bottom: 0;
width: calc(var(--bellow-width) * .30);
border-radius: 1vmin 4vmin 4vmin 1vmin;
background:
var(--shine-horizontal),
var(--shine-horizontal),
var(--button1, var(--button)),
var(--button2, var(--button)),
var(--button3, var(--button)),
var(--button4, var(--button)),
var(--button5, var(--button)),
var(--button6, var(--button)),
var(--button7, var(--button)),
var(--button8, var(--button)),
var(--button9, var(--button)),
linear-gradient(var(--color3alt), var(--color3alt));
background-repeat: no-repeat;
background-position:
1.5vmin 8%,
1.5vmin 92%,
var(--button1-x, var(--button-x)) var(--button1-y, var(--button-y)),
var(--button2-x, var(--button-x)) var(--button2-y, var(--button-y)),
var(--button3-x, var(--button-x)) var(--button3-y, var(--button-y)),
var(--button4-x, var(--button-x)) var(--button4-y, var(--button-y)),
var(--button5-x, var(--button-x)) var(--button5-y, var(--button-y)),
var(--button6-x, var(--button-x)) var(--button6-y, var(--button-y)),
var(--button7-x, var(--button-x)) v.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0