按要求完成相应页面,鼠标经过容器时,半圆区域从顶部慢慢滑下来,人物图片渐渐变小,有白色边框和蓝色圆形背景,底部蓝色区域块从底部慢慢升上来。
时间: 2024-03-27 22:36:59 浏览: 22
好的,这是一个交互式的页面效果,需要使用 JavaScript 和 CSS 实现。下面是一个简单的实现方案:
HTML 结构:
```html
<div class="container">
<div class="image-container">
<img src="person.jpg" alt="person image">
</div>
<div class="content">
<h2>人物名称</h2>
<p>人物介绍</p>
</div>
</div>
```
CSS 样式:
```css
.container {
position: relative;
width: 300px;
height: 400px;
overflow: hidden;
}
.image-container {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
transition: transform 0.5s ease-in-out;
}
.image-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
.content {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #fff;
transition: height 0.5s ease-in-out;
}
.content h2 {
margin: 20px;
}
.content p {
margin: 0 20px 20px;
}
.blue-block {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: #007bff;
transition: height 0.5s ease-in-out;
z-index: -1;
}
```
JavaScript 代码:
```javascript
const container = document.querySelector('.container');
const imageContainer = document.querySelector('.image-container');
const content = document.querySelector('.content');
const blueBlock = document.createElement('div');
blueBlock.classList.add('blue-block');
container.appendChild(blueBlock);
container.addEventListener('mouseenter', () => {
// 半圆区域从顶部慢慢滑下来
imageContainer.style.transform = 'translateY(50%) scale(0.8)';
// 人物图片渐渐变小
content.style.height = '200px';
// 底部蓝色区域块从底部慢慢升上来
blueBlock.style.height = '50px';
});
container.addEventListener('mouseleave', () => {
// 半圆区域回到顶部
imageContainer.style.transform = 'translateY(0) scale(1)';
// 人物图片回到原始大小
content.style.height = '0';
// 底部蓝色区域块回到底部
blueBlock.style.height = '0';
});
```
这样就可以实现一个简单的交互式页面效果了,当鼠标经过容器时,半圆区域从顶部慢慢滑下来,人物图片渐渐变小,有白色边框和蓝色圆形背景,底部蓝色区域块从底部慢慢升上来。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)