效果演示：
代码目录：
主要代码实现：
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天
大家可以点赞、收藏、关注、评论我啦 、需要完整文件随时联系我或交流哟~！
