很有意思的css动态渐变
<!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: absolute
setInterval(() => {
rotatingContainer.style.position = isAbsolute ? 'static' : 'absolute';
// 切换状态
isAbsolute = !isAbsolute;
}, 2000);
});
</script>
</html>原文地址：https://blog.csdn.net/lulei5153/article/details/142447333
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！