<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
.index1{
width: 100%;
height: 600px;
}
.index2{
width: 100%;
height: 500px;
}
.index2>img{
width: 400px;
height: 500px;
animation: donghua 3s 1s infinite;
}
.index3{
display: flex;
justify-content: center;
border-radius: 10px;
width: 300px;
height: 86px;
/* background-color: #908a42; */
animation: mp3 3s 1s infinite;
}
@keyframes mp3{
from{
margin-top: 100px;
}
}
.geci{
position: absolute;
margin-top: -20px;
margin-left: -250px;
width: 500px;
height: 100px;
left: 50%;
/* background-color: #908a42; */
text-shadow: 1px 1px 1px red;
color:white;
overflow: hidden;
}
.geci>span{
display: flex;
letter-spacing: 3px;
justify-content: center;
animation: geci 5s 1s infinite linear;
}
@keyframes geci{
30%{
margin-top: -10px;
}
40%{
margin-top: -20px;
}
50%{
margin-top: -40px;
}
60%{
margin-top: -60px;
}
70%{
margin-top: -80px;
}
80%{
margin-top: -100px;
}
90%{
margin-top: -120px;
}
100%{
margin-top: -170px;
}
}
@keyframes donghua{
30%{
margin-left: 200px;
}
50%{
margin-left: 400px;
}
80%{
margin-left: 600px;
}
90%{
margin-left: 900px;
}
100%{
margin-left: 1200px;
}
}
</style>
<body>
<div class="index1">
<div class="index2">
<img src="./src/行走的人.gif">
</div>
<div class="index3">
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="//music.163.com/outchain/player?type=2&id=1344897943&auto=1&height=66"></iframe>
</div>
</div>
<div class="geci">
<span>
作词 : 邵帅</br>
作曲 : 邵帅</br>
跨越山河去拥抱你，多大风浪都在一起。</br>
听到最美的记忆，关于你所有的消息。</br>
盼望每天都看到你，雨天也风和日丽。</br>
花花绿绿的世界里，我只会喜欢你。</br>
愿你在我看不到的地方安然无恙，</br>
愿你的冬天永远不缺暖阳。</br>
愿你的明天不再经历雨打风霜，</br>
愿你的未来永远热泪盈眶。</br>
最美好的年纪里，柴米油盐酱醋你。</br>
春风把我带给你，四月润湿了空气。</br>
</span>
</div>
</body>
</html>
源码下载链接:
https://pan.baidu.com/s/1aa_tuNJ7Hr70UwMCq3npGw
提取码：9ewq
记得留个关注,谢谢啦!
扫一扫
1616
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
