如题，效果图如下
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>点击背景变换渐变方向</title>
<style>
body {
background: linear-gradient(to right, rgb(177, 168, 168), rgb(201, 201, 166));
transition: background 0.5s;
}
</style>
</head>
<body>
点击背景变换渐变方向
<script>
let currentDirection = 'to right';
const directions = ['to right', 'to bottom', 'to left', 'to top'];
document.body.addEventListener('click', function() {
const currentIndex = directions.indexOf(currentDirection);
const nextIndex = (currentIndex + 1) % directions.length;
currentDirection = directions[nextIndex];
document.body.style.background = `linear-gradient(${currentDirection}, rgb(177, 168, 168), rgb(201, 201, 166))`;
});
</script>
</body>
</html>
217
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
