1.设计页面,在页面中添加一个div(大小和颜色自拟,设置为绝对定位),添加一个按钮,点击按钮后,实现动画(div向右移动500px,再向下移动500px,然后返回开始位置) 2. 设计页面,在页面中添加如下的布局。添加10个li,显示效果如下。 设计动画:鼠标进入li区域后,该li高度增加,其他的li高度恢复。 所有的li的高度和颜色自拟。
时间: 2023-10-01 19:12:40 浏览: 31
1. HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>移动动画</title>
<style type="text/css">
#box{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
#moveBtn{
margin-top: 50px;
}
</style>
</head>
<body>
<div id="box"></div>
<button id="moveBtn">点击移动</button>
<script type="text/javascript">
var box = document.getElementById('box');
var moveBtn = document.getElementById('moveBtn');
moveBtn.onclick = function(){
box.style.transition = 'all 1s ease-in-out';
box.style.transform = 'translate(500px, 500px)';
setTimeout(function(){
box.style.transform = 'translate(-50%, -50%)';
}, 2000);
}
</script>
</body>
</html>
```
2. HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>动态效果</title>
<style type="text/css">
ul{
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
}
li{
width: 100px;
height: 50px;
background-color: #f2f2f2;
margin: 10px;
display: flex;
justify-content: center;
align-items: center;
transition: all 0.5s ease-in-out;
cursor: pointer;
}
li.active{
height: 100px;
background-color: red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
</ul>
<script type="text/javascript">
var lis = document.getElementsByTagName('li');
for(var i = 0; i < lis.length; i++){
lis[i].onmouseover = function(){
for(var j = 0; j < lis.length; j++){
lis[j].classList.remove('active');
}
this.classList.add('active');
}
}
</script>
</body>
</html>
```