js+css实现可修改参数的彩虹效果代码
代码语言:html
所属分类:其他
代码描述:js+css实现可修改参数的彩虹效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --hue { initial-value: 0; inherits: false; syntax: '<number>'; } * { box-sizing: border-box; } body { min-height: 100vh; display: grid; place-items: center; background: #d1e5fa; } .rainbow { height: 25vmin; width: 50vmin; position: relative; overflow: hidden; } .rainbow__band { --size: calc((50 - (var(--index, 0) * 4)) * 1vmin); height: 50vmin; width: 50vmin; border-radius: 50%; position: absolute; top: 100%; left: 50%; border-width: 2vmin; border-color: hsl(var(--hue), 80%, 50%); border-style: solid; transform: translate(-50%, -50%); height: var(--size); width: var(--size); -webkit-animation: rainbow calc(var(--duration, 8) * 1s) calc(var(--index, 0) * -0.2s) infinite linear; animation: rainbow calc(var(--duration, 8) * 1s) calc(var(--index, 0) * -0.2s) infinite linear; } @-webkit-keyframes rainbow { to { --hue: 360; } } @keyframes rainbow { to { --hue: 360; } } </style> </head> <body > <.........完整代码请登录后点击上方下载按钮下载查看
网友评论0