css实现经典磁盘式录音机动画效果代码-html代码-BFW代码库

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.........完整代码请登录后点击上方下载按钮下载查看