一个简单的html大海日出特效的代码
代码
2023年05月11日 18:04 469
小糯草
以下是一个简单的html大海日出特效的代码:
```html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>大海日出特效</title> <style> body { margin: 0; padding: 0; background-color: #000; } #ocean { position: relative; width: 100%; height: 500px; overflow: hidden; } #sun { position: absolute; z-index: 2; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100px; height: 100px; border-radius: 50%; background-color: #fa803a; box-shadow: 0px 0px 30px 10px #f9aa33; animation: sun-rise 8s linear forwards; } @keyframes sun-rise { from { top: 100%; left: 50%; transform: translateX(-50%); width: 0; height: 0; opacity: 0; } to { top: 20%; left: 10%; width: 200px; height: 200px; opacity: 1; } } #water { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, #1e87c9, #119bd1, #4db8e8, #75c9e9, #1e87c9); animation: water-anime 10s linear infinite; } @keyframes water-anime { from { background-position: 0% 50%; } to { background-position: 100% 50%; } } </style> </head> <body> <div id="ocean"> <div id="water"></div> <div id="sun"></div> </div> </body> </html>
```
代码说明:
1. 使用html和css定义了一个大海和太阳的基本样式;
2. 使用animation让太阳从初始位置向上升起,并且设置好其动画属性;
3. 设置大海背景渐变和水面的动画效果。
专题推荐:
部份内容隐藏请会员登录查看
标签: html大海日出特效的代码
相关文章