原神开屏动画html
时间: 2023-11-21 21:57:09 浏览: 191
以下是原神启动开屏动画的HTML源码,你可以将其保存为.html文件并在浏览器中打开查看效果:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>原神启动开屏动画</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
overflow: hidden;
}
#logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 150px solid #fff;
border-bottom: 100px solid transparent;
border-left: 150px solid #fff;
animation: logo 2s ease-in-out forwards;
}
@keyframes logo {
0% {
width: 0;
height: 0;
border-top: 100px solid transparent;
border-right: 150px solid #fff;
border-bottom: 100px solid transparent;
border-left: 150px solid #fff;
}
50% {
width: 300px;
height: 200px;
border-top: 0 solid transparent;
border-right: 300px solid #fff;
border-bottom: 0 solid transparent;
border-left: 0 solid transparent;
}
100% {
width: 300px;
height: 200px;
border-top: 0 solid transparent;
border-right: 0 solid transparent;
border-bottom: 0 solid transparent;
border-left: 300px solid #fff;
}
}
#bgm {
position: absolute;
top: 0;
left: 0;
width: 0;
height: 0;
overflow: hidden;
}
</style>
</head>
<body>
<audio id="bgm" src="bgm.mp3" autoplay></audio>
<div id="logo"></div>
</body>
</html>
```
该源码使用了CSS3的动画效果和HTML5的音频标签,实现了渐变式显示原神游戏的Logo,并有背景音乐,实现了非常流畅的动画效果。