css实现经典磁盘式录音机动画效果代码
代码语言：html
所属分类：动画
代码描述：css实现经典磁盘式录音机动画效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
@import url(https://fonts.googleapis.com/css?family=Montserrat:400);
:root {
--base: rgb(186, 98, 154);
/* --base:rgb(167,95,68); */
/* --base:rgb(184,64,102); */
--r: 64;
--g: 102;
--b: 184;
/* highest value should be the one that's nonzero */
--col00: rgb(0, 0, calc(var(--b) - 100));
--col0: rgb(calc(var(--r) - 50), calc(var(--g) - 50), calc(var(--b) - 50));
--col1: rgb(calc(var(--r) - 40), calc(var(--g) - 40), calc(var(--b) - 40));
--col2: rgb(calc(var(--r) - 30), calc(var(--g) - 30), calc(var(--b) - 30));
--col3: rgb(calc(var(--r) - 20), calc(var(--g) - 20), calc(var(--b) - 20));
--col4: rgb(calc(var(--r) - 10), calc(var(--g) - 10), calc(var(--b) - 10));
--col5: rgb(var(--r), var(--g), var(--b));
--col6: rgb(calc(var(--r) + 10), calc(var(--g) + 10), calc(var(--b) + 10));
--col7: rgb(calc(var(--r) + 20), calc(var(--g) + 20), calc(var(--b) + 20));
--col8: rgb(calc(var(--r) + 30), calc(var(--g) + 30), calc(var(--b) + 30));
--col9: rgb(calc(var(--r) + 40), calc(var(--g) + 40), calc(var(--b) + 40));
--col10: rgb(calc(var(--r) + 50), calc(var(--g) + 50), calc(var(--b) + 50));
--col11: rgb(calc(var(--r) + 60), calc(var(--g) + 60), calc(var(--b) + 60));
--col12: rgb(calc(var(--r) + 70), calc(var(--g) + 70), calc(var(--b) + 70));
--col13: rgb(calc(var(--r) + 80), calc(var(--g) + 80), calc(var(--b) + 80));
--speckled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='filter'%3E%3CfeTurbulence baseFrequency='0.09637' numOctaves='8' seed='655' /%3E%3CfeColorMatrix values='4.5 -3.2 2.4 2.9 0.9 -3.6 2.7 4.2 -0.4 1.7 -0.9 -3.3 -1.3 3.6 3.3 -3.2 2.7 2.8 0.1 2.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23filter)'/%3E%3C/svg%3E%0A")
no-repeat center;
--speckled2: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='filter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.05'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='table' tableValues='0 0 0 1 1'/%3E%3C/feComponentTransfer%3E%3CfeComposite in='SourceGraphic' operator='in'/%3E%3CfeMorphology radius='1' operator='dilate'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3C/filter%3E%3Ccircle r='150%25'/%3E%3Cg fill='none' stroke='%23bef' stroke-width='99%25' filter='url(%23filter)'%3E%3Ccircle cx='50%25' cy='50%25' r='57%25' stroke-dasharray='2 60 .5 60'/%3E%3Ccircle cx='50%25' cy='50%25' r='71%25' stroke-dasharray='.5 43 2 47'/%3E%3C/g%3E%3C/svg%3E")
no-repeat center;
}
body {
height: 100vh;
width: 100vw;
margin: 0 auto;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='blur'%3E%3CfeGaussianBlur stdDeviation='4' /%3E%3C/filter%3E%3Cpattern id='wave' width='200' height='120' patternUnits='userSpaceOnUse'%3E%3Cg filter='url(%23blur)' fill='none' stroke-width='14' stroke-linecap='round'%3E%3Cpath class='path1' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 -40)' stroke='rgb(0,0,140)' /%3E%3Cpath class='path2' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 -20)' stroke='rgb(0,0,150)' /%3E%3Cpath class='path1' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 0)' stroke='rgb(0,0,100)' /%3E%3Cpath class='path2' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 20)' stroke='rgb(0,0,110)' /%3E%3Cpath class='path3' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 40)' stroke='rgb(0,0,120)' /%3E%3Cpath class='path4' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 60)' stroke='rgb(0,0,130)' /%3E%3Cpath class='path5' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 80)' stroke='rgb(0,0,140)' /%3E%3Cpath class='path6' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 100)' stroke='rgb(0,0,150)' /%3E%3Cpath class='path1' d='M -50 0 Q -25 -25 0 0 Q 25 25 50 0 Q 75 -25 100 0 Q 125 25 150 0 Q 175 -25 200 0 Q 225 25 250 0' transform='translate(0 120)' stroke='rgb(0,0,100)' /%3E%3C/g%3E%3C/pattern%3E%3Crect width='100%25' height='100%25' fill='rgb(0,0,90)' /%3E%3Crect width='100%25' height='100%25' fill='url(%23wave)' /%3E%3C/svg%3E");
}
img {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% + 10px), calc(-50% + 14px));
opacity: 0.3;
}
.recordBg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(calc(-50% - 20px), -50%);
height: 210px;
width: 210px;
}
.playerBg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 222px;
width: 300px;
background-color: var(--col5);
border-radius: 20px;
opacity: 0.9;
overflow: hidden;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.5);
}
.knobTL {
position: absolute;
top: 4%;
left: 4%;
height: 14%;
width: 10.36%;
border-radius: 50%;
background-color: var(--col11);
}
.knobTR {
position: absolute;
top: 6%;
right: 3.5%;
height: 26%;
width: 19.24%;
border-radius: 50%;
background-color: var(--col11);
}
.knobTR > i:nth-child(1) {
position: absolute;
top: 50%;
left: 50%;
height: 66%;
width: 66%;
transform: translate(-50%, -50%);
border-radius: 50%;
background-color: var(--col00);
border: 2px solid var(--col13);
}
.knobBL {
position: absolute;
bottom: 11.5%;
left: 4.5%;
height: 10%;
width: 7.4%;
border-radius: 50%;
background-color: var(--col11);
}
.rectBL {
position: absolute;
bottom: 2.2%;
left: 4%;
height: 5%;
width: 8%;
background-color: var(--col00);
border: 1px solid var(--col13);
}
.rectBL2 {
position: absolute;
bottom: 2.2%;
left: 14%;
height: 3%;
width: 10%;
background-color: var(--col8);
border: 1px solid var(--col13);
}
.rectBR {
position: absolute;
bottom: 2%;
left: 62%;
height: 3.6%;
width: 6%;
background-color: var(--col8);
border: 1px solid var(--col13);
}
.rectBR2 {
position: absolute;
bottom: 12%;
left: 78.5%;
height: 13%;
width: 7.5%;
background-color: var(--col8);
border: 1px solid var(--col13);
}
.rectBR2 > i:nth-child(1),
.rectBR2 > i:nth-child(2) {
position: absolute;
bottom: 12%;
left: 10%;
height: 13%;
width: 38%;
background-color: var(--col00);
}
.rectBR2 > i:nth-child(2) {
left: 52%;
}
.rectBR3 {
position: absolute;
bottom: 12%;
left: 88%;
height: 33%;
width: 6%;
background-color: var(--col8);
border: 1px solid var(--col13);
}
.wrap {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
height: 50%;
width: 1em;
}
[type="range"] {
position: absolute;
top: 50%;
left: 50%;
margin: 0;
padding: 0;
width: 4em;
height: 1em;
transform: translate(-50%, -50%) rotate(-90deg);
background: transparent;
font: 1em/1 arial, sans-serif;
cursor: pointer;
}
[type="range"],
[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
}
[type="range"]::-webkit-slider-runnable-track {
box-sizing: border-box;
border: none;
width: 4em;
height: 0.25em;
background: var(--col13);
}
[type="range"]::-moz-range-track {
box-sizing: border-box;
border: none;
width: 4em;
height: 0.25em;
background: var(--col13);
}
[type="range"]::-ms-track {
box-sizing: border-box;
border: none;
width: 4em;
height: 0.25em;
background: var(--col13);
}
[type="range"]::-webkit-slider-thumb {
margin-top: -0.4em;
box-sizing: border-box;
border: none;
width: 0.4em;
height: 1em;
background: var(--col00);
}
[type="range"]::-moz-range-thumb {
box-sizing: border-box;
border: none;
width: 1em;
height: 0.5em;
background: var(--col00);
}
[type="range"]::-ms-thumb {
margin-top: 0;
box-sizing: border-box;
border: none;
width: 1em;
height: 0.5em;
background: var(--col00);
}
[type="range"]::-ms-tooltip {
display: none;
}
.discBg {
position: absolute;
top: 7.8%;
left: 10.1%;
height: 88%;
width: 65.12%;
border-radius: 50%;
background: var(--speckled2);
.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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