【css酷炫效果】纯CSS实现全屏万花筒效果
想直接拿走的老板，链接放在这里：上传后更新
缘
创作随缘，不定时更新。
创作背景
刚看到csdn出活动了，赶时间，直接上代码。
html结构
clike
<div class="kaleidoscope"></div>css样式
clike
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
height: 100vh; /* 视口高度 */
overflow: hidden; /* 隐藏溢出内容 */
perspective: 1000px; /* 3D透视空间 */
background:
linear-gradient(45deg, #FF6B6B 25%, transparent 25%),
linear-gradient(135deg, #4ECDC4 25%, transparent 25%),
linear-gradient(225deg, #96CEB4 25%, transparent 25%),
linear-gradient(315deg, #45B7D1 25%, transparent 25%);
}
@keyframes colorShift {
100% { filter: hue-rotate(360deg); }
}
.kaleidoscope {
width: 150vmax;
height: 150vmax;
background:
linear-gradient(45deg, #FF6B6B 25%, transparent 25%),
linear-gradient(135deg, #4ECDC4 25%, transparent 25%),
linear-gradient(225deg, #45B7D1 25%, transparent 25%),
linear-gradient(315deg, #96CEB4 25%, transparent 25%);
background-size: 50% 50%;
animation: rotate 20s linear infinite;
transform-style: preserve-3d;
}
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}完整代码
clike
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
height: 100vh;
overflow: hidden;
background: #000;
display: flex;
justify-content: center;
align-items: center;
perspective: 1000px;
height: 100vh; /* 视口高度 */
overflow: hidden; /* 隐藏溢出内容 */
perspective: 1000px; /* 3D透视空间 */
background:
linear-gradient(45deg, #FF6B6B 25%, transparent 25%),
linear-gradient(135deg, #4ECDC4 25%, transparent 25%),
linear-gradient(225deg, #96CEB4 25%, transparent 25%),
linear-gradient(315deg, #45B7D1 25%, transparent 25%);
}
@keyframes colorShift {
100% { filter: hue-rotate(360deg); }
}
.kaleidoscope {
width: 150vmax;
height: 150vmax;
background:
linear-gradient(45deg, #FF6B6B 25%, transparent 25%),
linear-gradient(135deg, #4ECDC4 25%, transparent 25%),
linear-gradient(225deg, #45B7D1 25%, transparent 25%),
linear-gradient(315deg, #96CEB4 25%, transparent 25%);
background-size: 50% 50%;
animation: rotate 20s linear infinite;
transform-style: preserve-3d;
}
@keyframes rotate {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(180deg) scale(1.2);
}
100% {
transform: rotate(360deg) scale(1);
}
}
</style>
</head>
<body>
<div class="kaleidoscope"></div>
</body>
</html>效果图
