css变量实现rgb色值改变颜色变化动画效果代码
代码语言:html
所属分类:动画
代码描述:css变量实现rgb色值改变颜色变化动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@700&display=swap" rel="stylesheet"> <style> @property --red { syntax: '<integer>'; inherits: true; initial-value: 0; } @property --green { syntax: '<integer>'; inherits: true; initial-value: 0; } @property --blue { syntax: '<integer>'; inherits: true; initial-value: 0; } @keyframes red-fade { 50% { --red: 255; } } @keyframes green-fade { 50% { --green: 255; } } @keyframes blue-fade { 50% { --blue: 255; } } :root { animation: red-fade 16s, green-fade 14s, blue-fade 12s; animation-iteration-count: infinite; } *, *::before, *::after { box-sizing: border-box; } body { display: grid; justify-content: center; align-items: center; min-height: 100vh; margin: 0; padding: 20px; color: #fff; background-color: #333; background-image: linear-gradient(135deg, #111, #444); font: bold 1.25rem/1 'Roboto Mono', monospace; } .wrapper { display: grid; grid-template-columns: repeat(3, 40px) minmax(0, 50%); justify-content: space-around; gap: 10px; width: 600px; max-width: calc(100vw - 40px); padding: 20px; border-radius: 20px; background-color: #0006; } .widget { display: grid; grid-template-rows: auto max-content max-content; justify-items: center; gap: 10px; } .bar { display: grid; width: 40px; height: 257px; border-radius: 5px; border: 1px solid #fff; background-color: #fff; } .indicator { align-self: end; height: 4px; margin: -2px -6px; border-radius: 2px; background-color: #fff; } .value::before { content: counter(color-value); } /* red */ .red .bar { background-image: linear-gradient(to bottom, red, black); } .red .indicator { transform: translateY(calc(var(--red) * -1px)); } .red .value::before { counter-reset: color-value var(--red); } /* green */ .green .b.........完整代码请登录后点击上方下载按钮下载查看
网友评论0