创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px
时间: 2024-03-20 08:43:59 浏览: 25
好的,以下是代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>盒子宽高变化</title>
<style type="text/css">
.box {
width: 100px;
height: 100px;
background-color: #FCD12A;
transition: all 0.5s ease-in-out;
}
.box:hover {
width: 250px;
height: 250px;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
该代码中使用了 HTML 和 CSS,其中 HTML 部分创建了一个类名为 `box` 的盒子,宽高为 100px,背景颜色为随意的颜色。CSS 部分使用了 `transition` 属性,当盒子宽高变化时过渡效果为 0.5s 的缓动效果。当鼠标移入盒子时,盒子宽高变为 250px;当鼠标移出盒子时,盒子宽高变回 100px。
相关问题
用js 创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px
好的,以下是用JavaScript创建一个满足你要求的盒子:
```html
<!DOCTYPE html>
<html>
<head>
<title>Box Example</title>
<style>
#box {
width: 100px;
height: 100px;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="box"></div>
<script>
var box = document.getElementById("box");
box.addEventListener("mouseenter", function() {
box.style.width = "250px";
box.style.height = "250px";
});
box.addEventListener("mouseleave", function() {
box.style.width = "100px";
box.style.height = "100px";
});
</script>
</body>
</html>
```
以上代码会在页面中创建一个宽高为100px的盒子,并且当鼠标移入盒子时,盒子的宽高会变为250px,当鼠标移出盒子时,盒子的宽高会变回100px。
2.创建一个盒子,宽高为100px,背景颜色随意。当鼠标移入盒子时,盒子宽高变为250px。当鼠标移出盒子时,盒子宽高变回100px。
好的,以下是代码实现:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子大小变化</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: #F44336;
transition: all 0.5s;
}
</style>
</head>
<body>
<div class="box" onmouseover="changeSize(this)" onmouseout="changeSize(this)"></div>
<script>
function changeSize(box) {
if (box.style.width == "100px") {
box.style.width = "250px";
box.style.height = "250px";
} else {
box.style.width = "100px";
box.style.height = "100px";
}
}
</script>
</body>
</html>
```
代码中创建了一个宽高为100px的盒子,并设置其背景颜色。使用 CSS 的 `transition` 属性实现了平滑的动画效果。通过 JavaScript 的 `onmouseover` 和 `onmouseout` 事件监听器实现了鼠标移入移出盒子时触发的函数。函数中判断当前盒子的宽度是否为100px,是则将其宽高改为250px,否则改为100px。