gsap+svg实现播放按钮点击变换成收音机播放音乐效果代码
代码语言：html
所属分类：多媒体
代码描述：gsap+svg实现播放按钮点击变换成收音机播放音乐效果代码
代码标签： gsap svg 播放 按钮 点击 变换 收音机 播放 音乐
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<style>
*,
*:after,
*:before {
box-sizing: border-box;
transform-style: preserve-3d;
}
:root {
--handle-girth: 10;
--handle-multiplier: 0.5px;
--surface-1: hsl(210 10% 50%);
--surface-2: hsl(210 10% 40%);
--surface-3: hsl(210 10% 30%);
--surface-4: hsl(210 10% 20%);
--surface-5: hsl(210 10% 10%);
--speaker: hsl(0 0% 6%);
--trim: hsl(0 0% 90%);
--tweeter: hsl(0 0% 30%);
--handle: hsl(0 0% 8%);
/* --handle: var(--trim);*/
--label: hsl(0 0% 98%);
--top: hsl(210 10% 65%);
--front: var(--surface-1);
--grill: hsl(0 0% 10%);
--back: var(--surface-3);
--cassette: hsl(0 0% 0%);
--control: hsl(210 80% 80%);
--play: hsl(10 80% 80%);
--accent: hsl(10 50% 50%);
--drawer: hsl(210 10% 6%);
}
body {
background: hsl(210 34% 84%);
display: grid;
place-items: center;
min-height: 100vh;
font-family: 'Google Sans', sans-serif, system-ui;
}
span {
display: block;
}
.play-btn {
position: relative;
border: 0;
padding: 0;
background: none;
}
.play-btn__text {
color: white;
padding: 1rem 2rem;
background: var(--front);
}
.txt {
display: flex;
align-items: center;
gap: 0.5rem;
}
.play-btn__text svg {
width: 24px;
}
.play-btn__box {
--depth: var(--boom-depth);
display: none;
position: absolute;
inset: 0;
color: var(--surface-3);
opacity: 1;
transform: translate3d(0, 0, -1px);
/* transform: translate3d(0, 0, calc(var(--boom-depth) * -0.5px));*/
}
.play-btn__box > .cuboid > .cuboid__side:nth-of-type(2):after {
content: "";
height: 16%;
width: 60%;
position: absolute;
bottom: 6%;
right: 0;
background:
repeating-linear-gradient(0deg, var(--grill) 0 20%, transparent 20% 40%);
}
.speaker {
position: absolute;
height: 55%;
aspect-ratio: 1;
border-radius: 50%;
bottom: 0;
background: conic-gradient(from 190deg, hsl(0 0% 20%) 0 45deg, transparent 0deg), var(--speaker);
border: 4px solid var(--trim);
}
.tweeter {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50%;
aspect-ratio: 1;
border-radius: 50%;
background: var(--tweeter);
}
.controls {
position: absolute;
bottom: 10%;
left: 10%;
height: 16%;
display: flex;
gap: 4px;
}
.bear {
position: absolute;
left: 5%;
top: 5%;
width: 20%;
rotate: -30deg;
}
.brand {
color: var(--trim);
text-shadow: 2px 2px red;
position: absolute;
right: 4%;
top: 8%;
font-size: 1rem;
font-family: monospace;
font-weight: bold;
}
.brand:after {
content: "";
position: absolute;
top: 110%;
width: 100%;
aspect-ratio: 2 / 1;
background: var(--label);
right: 0;
}
.control {
--depth: 20;
height: 100%;
aspect-ratio: 1;
color: var(--control);
}
.control:nth-of-type(1) {
color: hsl(130 80% 80%);
}
.cogs {
position: absolute;
top: 50%;
left: 50%;
translate: -50% -50%;
height: 40%;
width: 70%;
display: flex;
justify-content: space-between;
}
.cogs:after {
content: "";
font-family: cursive;
background: white;
height: 0.5rem;
position: absolute;
top: 110%;
width: 80%;
left: 50%;
overflow: hidden;
translate: -50% 0;
}
.cog {
fill: black;
stroke: var(--trim);
}
.control:nth-of-type(3) {
aspect-ratio: 2 / 1;
color: var(--play);
}
.speaker--left {
left: 0;
translate: 10% -10%;
}
.speaker--right {
right: 0;
translate: -10% -10%;
}
.cassette-hole {
--depth: 20;
color: var(--surface-4);
aspect-ratio: 4 / 2.5;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% 0;
transform-origin: 50% 100%;
transform: translate3d(0, 0, -11px);
}
.cassette-hole .cuboid__side:nth-of-type(5) {
display: none;
}
.cassette {
--depth: 10;
color: var(--cassette);
width: 90%;
aspect-ratio: 4 / 2.5;
transform: translate3d(0, 0, -11px);
}
.cassette-deck {
aspect-ratio: 4 / 2.5;
background:
linear-gradient(90deg, var(--drawer) 10px, transparent 10px calc(100% - 10px), var(--drawer) calc(100% - 10px)),
linear-gradient(0deg, var(--drawer) 10px, transparent 10px calc(100% - 10px), var(--drawer) calc(100% - 10px)),
linear-gradient(-65deg, transparent 70%, hsl(0 0% 100% / 0.5) 70.5% 80%, transparent 80.5% 82%, hsl(0 0% 100% / 0.5) 82.5% 84%, transparent 84.5%),
hsl(0 0% 100% / 0.2);
display: grid;
place-items: center;
width: 25%;
position: absolute;
top: 50%;
left: 50%;
translate: -50% 0;
transform-origin: 50% 100%;
transform: rotateX(0deg);
}
.cassette .cuboid__side:nth-of-type(5) {
background: linear-gradient(90deg, transparent 60%, red 60.5% 70.5%, transparent 71%), var(--cassette);
}
.cassette-deck:after,
.cassette-deck:before {
content: "";
position: absolute;
bottom: 0;
height: 85%;
width: 10%;
background: var(--drawer);
}
.cassette-deck:after {
left: 100%;
transform-origin: 0 50%;
transform: rotateY(90deg);
-webkit-clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
clip-path: polygon(0 0, 100% 25%, 100% 100%, 0 100%);
}
.cassette-deck:before {
right: 100%;
transform-origin: 100% 50%;
transform: rotateY(-90deg);
-webkit-clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0 100%);
clip-path: polygon(0 25%, 100% 0%, 100% 100%, 0 100%);
}
.play-btn > .cuboid {
color: var(--back);
}
.play-btn__box > .cuboid > .cuboid__side:nth-of-type(5) {
filter: none;
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5px));
top: 0;
left: 0;
background:
linear-gradient(180deg, var(--front) 50%, transparent 50% 77%, var(--front) 77%),
linear-gradient(90deg, var(--front) 38.5%, transparent 38.5% 62.5%, var(--front) 62.5%),
hsl(0 0% 50% / var(--fill, 0));
}
.eq-wrap {
width: 25%;
aspect-ratio: 16 / 6;
top: 20%;
position: absolute;
left: 50%;
translate: -50% 0;
}
.eq {
border: 4px solid black;
aspect-ratio: 16 / 6;
width: 100%;
background: black;
}
.eq-wrap:after {
content: "";
position: absolute;
inset: 0;
border: 4px solid black;
background:
linear-gradient(-65deg, transparent 50%, hsl(0 0% 100% / 0.5) 50.5% 60%, transparent 60.5% 62%, hsl(0 0% 100% / 0.5) 62.5% 64%, transparent 64.5%);
}
.top {
position: absolute;
bottom: 10%;
width: calc(90% - (2 * (var(--handle-girth) * 1px)));
height: 90%;
--depth: calc(var(--active) * 40);
left: 50%;
translate: -50% 0;
color: var(--top);
transform: translate3d(0, 0, -20px);
}
.top .cuboid__side:nth-of-type(2) {
background: var(--back);
}
.play-btn__backdrop {
background: var(--surface);
position: absolute;
inset: 0;
z-index: 0;
}
.play-btn__box > .cuboid > .cuboid__side:nth-of-type(6) {
background:
linear-gradient(0deg, var(--back) calc(100% - (var(--handle-girth) * 1px)), transparent calc(100% - (var(--handle-girth) * 1px))),
linear-gradient(90deg, var(--back) 5%, transparent 5% 95%, var(--back) 95%);
}
.top > .cuboid > .cuboid__side:nth-of-type(5):after {
content: "";
position: absolute;
right: 10%;
top: 0;
background: repeating-linear-gradient(90deg, var(--grill) 0 5%, transparent 5% 10%);
height: 30%;
width: 36%;
}
.play-btn__box > .cuboid > .cuboid__side:nth-of-type(1) {
background:
linear-gradient(0deg, var(--top) 10%, transparent 10%),
linear-gradient(90deg, var(--top) 5%, transparent 5% 95%, var(--top) 95%);
}
.handle {
color: var(--handle);
height: 80%;
position: absolute;
top: 0;
left: 50%;
translate: -50% 0;
width: 90%;
transform-origin: 50% 100%;
transform: translate3d(0, 0, calc(var(--handle-girth) * -0.5px)) rotateX(0deg);
}
.handle__segment {
--depth: calc(var(--active) * var(--handle-girth));
position: absolute;
}
.handle__left {
width: calc(var(--handle-girth) * var(--handle-multiplier));
height: 100%;
left: 0;
}
.handle__right {
width: calc(var(--handle-girth) * var(--handle-multiplier));
height: 100%;
right: 0;
}
.handle__top {
height: calc(var(--handle-girth) * var(--handle-multiplier));
width: 100%;
}
.btn-scene {
--active: 0;
position: relative;
}
.btn-shadow {
width: 100%;
aspect-ratio: 4 / 1;
background: hsl(0 0% 10%);
top: 100%;
position: absolute;
translate: 0 -50%;
transform: rotateX(90deg) translate(0, -1px);
}
/* Cuboid related stuff */
.cuboid {
--color-range-lower: 180;
--color-range-upper: 340;
--step: calc((var(--color-range-upper) - var(--color-range-lower)) / var(--count));
--alpha: calc(1 - ((0.85 / var(--count)) * var(--index)));
--color: hsl(calc(var(--color-range-lower) + (var(--step) * var(--index))) 80% 60% / var(--alpha));
--bg: currentColor;
}
/* Cuboid boilerplate code */
.cuboid {
width: 100%;
height: 100%;
position: relative;
}
.cuboid__side {
background: var(--bg);
filter: brightness(var(--b, 1));
border: calc(var(--size) * 0.0075vmin) solid var(--color);
position: absolute;
}
.cuboid__side:nth-of-type(1) {
--b: 1.1;
filter: none;
height: calc(var(--depth, 20) * 1px);
width: 100%;
top: 0;
/* perspective: 100vmin;*/
transform: translate(0, -50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(2) {
--b: 0.9;
height: 100%;
width: calc(var(--depth, 20) * 1px);
top: 50%;
right: 0;
transform: translate(50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(3) {
--b: 0.5;
width: 100%;
height: calc(var(--depth, 20) * 1px);
bottom: 0;
transform: translate(0%, 50%) rotateX(90deg);
}
.cuboid__side:nth-of-type(4) {
--b: 1;
height: 100%;
width: calc(var(--depth, 20) * 1px);
left: 0;
top: 50%;
transform: translate(-50%, -50%) rotateY(90deg);
}
.cuboid__side:nth-of-type(5) {
filter: none;
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth, 20) * 0.5px));
top: 0;
left: 0;
/* perspective: 100vmin;*/
}
.cuboid__side:nth-of-type(6) {
--b: 1.2;
height: 100%;
width: 100%;
transform: translate3d(0, 0, calc(var(--depth, 20) * -0.5px)) rotateY(180deg);
top: 0;
left: 0;
}
</style>
</head>
<body >
<div class="btn-scene">
<div class="btn-jump">
<div class="btn-tip">
<button class="play-btn">
<span class="play-btn__box">
<span class="cuboid">
<span class="cuboid__side">
<span class="top">
<span class="cuboid">
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side">
<span class="controls">
<span class="control">
<span class="cuboid">
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
</span>
</span>
<span class="control">
<span class="cuboid">
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
</span>
</span>
<span class="control play">
<span class="cuboid">
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
</span>
</span>
</span>
</span>
<span class="cuboid__side"></span>
</span>
</span>
<span class="handle">
<span class="handle__segment handle__top">
<span class="cuboid">
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
</span>
</span>
<span class="handle__segment handle__left">
<span class="cuboid">
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
</span>
</span>
<span class="handle__segment handle__right">
<span class="cuboid">
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
</span>
</span>
</span>
</span>
<span class="cuboid__side"></span>
<span class="cuboid__side"></span>
<span class="cuboid__side"&g.........完整代码请登录后点击上方下载按钮下载查看
相似代码
热门代码搜索
其他语言代码库
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