效果演示：
代码目录：
主要代码实现：
CSS样式：
@property --color-position {syntax: '<length-percentage>';inherits: false;initial-value: 30%;
}body {margin: 0;overflow: hidden;--color-position: 30%;background: radial-gradient(circle at center, #F9F871, #FFD45A var(--color-position));animation: beat 3s infinite ease-in-out;
}@keyframes beat {33%,66% {--color-position: 160%;}
}部分HTML代码 :
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>Three.js + CSS Gradient background animated with Houdini</title><link rel="stylesheet" href="css/style.css"></head><body><script src='js/three.min.js'></script><script src="js/script.js"></script></body></html>上面的 script.js和three.min.js需要引入即可运行
源码获取
精彩推荐更新中：
HTML5大作业实战100套
打卡 文章 更新 37 / 100天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
