【css酷炫效果】纯CSS实现全屏万花筒效果

【css酷炫效果】纯CSS实现全屏万花筒效果

• 缘
• 创作背景
• html结构
• css样式
• 完整代码
• 效果图

想直接拿走的老板，链接放在这里：上传后更新

缘

创作随缘，不定时更新。

创作背景

刚看到csdn出活动了，赶时间，直接上代码。

html结构

  <div class="kaleidoscope"></div>

css样式

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);
  }
}

完整代码

<!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>

效果图