Вопрос пользователя:
Ответ нейросети:
Для реализации этих задач можно использовать следующий код:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Morphing</title>
<style>
#shape {
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
transition: border-radius 2s;
}
</style>
</head>
<body>
<div id="shape"></div>
<script>
document.getElementById("shape").addEventListener("click", function() {
this.style.borderRadius = this.style.borderRadius === "50%" ? "0" : "50%";
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Circle Movement</title>
<style>
#circle {
width: 50px;
height: 50px;
background-color: red;
border-radius: 50%;
position: absolute;
}
</style>
</head>
<body>
<button onclick="moveCircle()">Move Circle</button>
<div id="circle"></div>
<script>
function moveCircle() {
var circle = document.getElementById("circle");
var x = 0;
var y = 0;
var interval = setInterval(function() {
x += 5;
y = Math.sin(x / 50) * 50 + 50;
circle.style.left = x + "px";
circle.style.top = y + "px";
if (x >= 300) {
clearInterval(interval);
}
}, 50);
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Image Popup</title>
<style>
#thumbnail {
width: 200px;
height: 200px;
overflow: hidden;
}
#fullImage {
display: none;
}
</style>
</head>
<body>
<div id="thumbnail">
<img src="thumbnail.jpg" alt="Thumbnail" onclick="showFullImage()">
</div>
<div id="fullImage">
<img src="fullimage.jpg" alt="Full Image">
</div>
<script>
function showFullImage() {
document.getElementById("thumbnail").style.display = "none";
document.getElementById("fullImage").style.display = "block";
}
</script>
</body>
</html>
Для реализации эффекта фона сайта, который меняется при наведении курсора, можно использовать следующий CSS код:
body { background-image: url("background1.jpg"); background-size: cover; background-repeat: no-repeat; height: 100vh; overflow: hidden; } #circle { width: 50px; height: 50px; background-color: rgba(255, 255, 255, 0.5); border-radius: 50%; position: absolute; display: none; } #circle:hover + body { background-image: url("background2.jpg"); }
Надеюсь, эти примеры помогут вам реализовать задачи на вашем сайте.
Напишите нам, если в вопросе есть ваши персональные данные ([email protected])
Обратите внимание: ответы, предоставляемые искусственным интеллектом, могут не всегда быть точными. Не рассчитывайте на них в критически важных областях, таких как медицина, юриспруденция, финансы или в вопросах, связанных с безопасностью. Для важных решений всегда обращайтесь к квалифицированным специалистам. Администрация сайта не несет ответственности за контент, сгенерированный автоматически.