svg+css实现粉色音乐播放器播放动画ui效果代码
代码语言:html
所属分类:布局界面
代码描述:svg+css实现粉色音乐播放器播放动画ui效果代码
代码标签: svg css 粉色 音乐 播放器 播放 动画 ui
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
:root {
--base:rgb(186,98,154);
/* --base:rgb(167,95,68); */
/* --base:rgb(184,64,102); */
--r:184;
--g:64;
--b:102;
--col00: rgb(calc(var(--r) - 100),0,0);
--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));
--.........完整代码请登录后点击上方下载按钮下载查看
















网友评论0