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

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

article 2025/3/24 15:34:23

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

效果图

在这里插入图片描述

查看全文

原文地址:https://blog.csdn.net/u011561335/article/details/146340865
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.kler.cn/a/595827.html 如若内容造成侵权/违法违规/事实不符，请联系邮箱：809451989@qq.com进行投诉反馈，一经查实，立即删除！