当前位置：首页 > news >正文

很有意思的css动态渐变

news 2024/11/14 21:16:41

<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>很有意思的css动态渐变</title><style>body {background-color: black;}.rotating-container,.static-container,.secondary-container {background-color: black;border-radius: 8px;width: 200px;height: 200px;position: absolute;}.rotating-container {/* background: repeating-conic-gradient(from var(--range), var(--color1), var(--color2), var(--color3), var(--color4), var(--color5), var(--color6), var(--color7), var(--color8), var(--color9), var(--color10), var(--color11), var(--color12)); */background: repeating-conic-gradient(from var(--range), var(--colors));animation: rotating 3s linear infinite;left: 30%;top: 25%;}.static-container {left: 50%;top: 25%;}.secondary-container {left: 70%;top: 25%;}@property --range {initial-value: 0deg;syntax: '<angle>';inherits: false;}@keyframes rotating {0% {--range: 0deg;}100% {--range: 360deg;}}.rotating-container::before,.static-container::before,.secondary-container::before {content: '';position: absolute;left: -10px;top: -10px;width: calc(100% + 20px);height: calc(100% + 20px);border-radius: 10px;z-index: -1;animation: rotating 4s linear infinite;/* background: repeating-conic-gradient(from var(--range), var(--color1), var(--color2), var(--color3), var(--color4), var(--color5), var(--color6), var(--color7), var(--color8), var(--color9), var(--color10), var(--color11), var(--color12)); */background: repeating-conic-gradient(from var(--range), var(--colors));}.secondary-container::before {animation: rotating2 4s linear infinite;}@keyframes rotating2 {from {transform: rotate(0deg);}to {transform: rotate(360deg);}}</style>
</head><body><div><div class="rotating-container"></div><div class="static-container"></div><div class="secondary-container"></div></div>
</body>
<script>document.addEventListener("DOMContentLoaded", function () {const rotatingContainer = document.querySelector('.rotating-container');// 颜色数组const colors = ['#FF9933','#3399FF','#66c6ac','#CC66FF','#66CC66','#99CCFF','#FFCC33','#67c23a','#e6a23c','#f56c6c','#909399','#0b1b2c'];// 生成颜色字符串const colorsString = colors.join(', ');// 使用 JavaScript 设置 CSS 变量document.documentElement.style.setProperty('--colors', colorsString);// 使用 JavaScript 设置 CSS 变量colors.forEach((color, index) => {document.documentElement.style.setProperty(`--color${index + 1}`, color);});// 初始化状态let isAbsolute = false;// 每2秒循环添加和移除 position: absolutesetInterval(() => {rotatingContainer.style.position = isAbsolute ? 'static' : 'absolute';// 切换状态isAbsolute = !isAbsolute;}, 2000);});
</script></html>

查看全文

http://www.mrgr.cn/news/34520.html