用html做一个欢迎回来的打开特效
时间: 2023-12-22 21:05:17 浏览: 34
可以通过CSS3的动画实现欢迎回来的打开特效,以下是一个简单的示例代码:
HTML代码:
```html
<div class="welcome">
<h1>Welcome Back!</h1>
<p>Good to see you again.</p>
</div>
```
CSS代码:
```css
.welcome {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 20px;
border: 1px solid #ccc;
background-color: #fff;
opacity: 0;
animation: fadeInUp 0.5s ease-out forwards;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translate(-50%, -60%);
}
100% {
opacity: 1;
transform: translate(-50%, -50%);
}
}
```
上述代码中,`<div>`元素使用了CSS的fixed定位,使其固定在页面中心位置。初始时,`<div>`的透明度为0,即不可见。通过CSS的动画`fadeInUp`,`<div>`元素在0.5秒内从页面顶部向上弹出,并且透明度从0到1,最终停留在页面中心位置。
你可以根据自己的需求调整CSS样式和动画效果。
相关推荐
![](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)