<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>渐变</title>
</head>
<style>
body {
background: linear-gradient(to right, #ff7e5f, #feb47b);
transition: background 0.5s;
}
</style>
</head>
<body>
<script>
let gradientDirection = 'to right';
document.body.addEventListener('click', function() {
if (gradientDirection === 'to right') {
document.body.style.background = `linear-gradient(to bottom, #ff7e5f, #feb47b)`;
gradientDirection = 'to bottom';
} else {
document.body.style.background = `linear-gradient(to right, #ff7e5f, #feb47b)`;
gradientDirection = 'to right';
}
});
</script>
<body>
<style>
img {
width: 100px;
height: auto;
cursor: pointer;
transition: filter 0.3s;
}
</style>
</head>
<body>
<img src="c:\Users\D2318\Documents\图片\006csIs1ly1hq8hfgg680j31hc25ob2a.jpg" alt="图片">
<script src="d:\WeChat document\WeChat Files\wxid_epia2hr0b89x12\FileStorage\File\2024-07\JQuery.js"></script>
<script>
$(document).ready(function() {
let isColorInverted = false;
$('img').on('click', function() {
if (!isColorInverted) {
$(this).css('filter', 'invert(100%)');
isColorInverted = true;
} else {
$(this).css('filter', 'invert(0)');
isColorInverted = false;
}
});
});
</script>
</body>
</html>
92
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
