二次元个人团队介绍页HTML源码黑夜主权+UI超好看

正文:

二次元个人团队介绍页HTML源码黑夜主权,我简单的测试了一下,整体UI还是挺不错的,非常的二次元,所以对于一些喜欢动漫的朋友来说应该还是挺不错,本篇的所有图片就是源码的相关演示图。

程序:

lanzou.com/iLEOH04sh6cd

图片:

 

 

  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一款带有樱花飘落效果和滚动播放背景图片及随机背景音乐的个人导航页面的HTML码: ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>个人导航页面</title> <style type="text/css"> body { background-image: url(bg.jpg); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; background-position: center center; animation: bg 60s linear infinite; -webkit-animation: bg 60s linear infinite; -moz-animation: bg 60s linear infinite; -o-animation: bg 60s linear infinite; } @keyframes bg { 0% { background-image: url(bg1.jpg); } 25% { background-image: url(bg2.jpg); } 50% { background-image: url(bg3.jpg); } 75% { background-image: url(bg4.jpg); } 100% { background-image: url(bg1.jpg); } } @-webkit-keyframes bg { 0% { background-image: url(bg1.jpg); } 25% { background-image: url(bg2.jpg); } 50% { background-image: url(bg3.jpg); } 75% { background-image: url(bg4.jpg); } 100% { background-image: url(bg1.jpg); } } @-moz-keyframes bg { 0% { background-image: url(bg1.jpg); } 25% { background-image: url(bg2.jpg); } 50% { background-image: url(bg3.jpg); } 75% { background-image: url(bg4.jpg); } 100% { background-image: url(bg1.jpg); } } @-o-keyframes bg { 0% { background-image: url(bg1.jpg); } 25% { background-image: url(bg2.jpg); } 50% { background-image: url(bg3.jpg); } 75% { background-image: url(bg4.jpg); } 100% { background-image: url(bg1.jpg); } } #content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; font-size: 36px; font-weight: bold; text-shadow: 2px 2px 2px rgba(0,0,0,0.5); } #music { position: fixed; bottom: 0; left: 0; width: 100%; height: 50px; background-color: rgba(0,0,0,0.5); color: #fff; font-size: 24px; text-align: center; line-height: 50px; z-index: 999; } #music audio { display: none; } #music span { cursor: pointer; } </style> </head> <body> <div id="content"> <h1>个人导航页面</h1> <p>这是一款非常好看的二次元背景动态个人导航页面,有樱花飘落效果和滚动播放背景图片及随机背景音乐,自适应引导页码看起来非常大气。文字链接修改 index.html 文件。</p> </div> <div id="music"> <audio src="music1.mp3"></audio> <audio src="music2.mp3"></audio> <audio src="music3.mp3"></audio> <span onclick="play()">播放</span> <span onclick="pause()">暂停</span> </div> <script type="text/javascript"> var musicList = document.querySelectorAll("#music audio"); var currentMusic = 0; function play() { musicList[currentMusic].play(); musicList[currentMusic].addEventListener("ended", function() { currentMusic++; if (currentMusic >= musicList.length) { currentMusic = 0; } musicList[currentMusic].play(); }); } function pause() { musicList[currentMusic].pause(); } </script> </body> </html> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值