|
|
本帖最后由 老谟深虑 于 2024-11-3 08:32 编辑
2023年12月20日我《送个喜欢音画的初学者》一个制作简单音画的代码，经过学习交流都基本掌握，能制作了有图片、有按钮、有音乐的单图简单音画。今天，我《再送给喜欢音画的初学者》一个在上次学习的基础上加上同步歌词的代码，代码如下：（亚伦老师奉献）
- <div class="blockcode"><blockquote><style >
- #papa { margin: 10px 20px ; width: 1164px; height: 640px; background:#000 url('图片') no-repeat center/cover; box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 10px #880000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
- #papa:hover #fullscreen { display:block ;}
- #fullscreen { position: absolute; top:4%; left:85%;color:#000;font: normal 2em 楷体; opacity: 1; cursor: pointer; z-index: 10}
- #mdiv {top:80%; left:12%;cursor: pointer;width:120px;height: 120px;border: 3px solid #000;border-radius: 50%;animation:rot 10s linear infinite;position: absolute;z-index: 40;background:#000 url('按钮图片') no-repeat center/cover;}
- @keyframes rot { to { transform: rotate(2turn);} }
- .lrc{z-index: 10;width: 90%;height: 180px;overflow: hidden;filter:drop-shadow(#ccc 1px 0 0)drop-shadow(#ccc 0 1px 0)drop-shadow(#ccc -1px 0 0) drop-shadow(#ccc 0 -1px 0);display: block;position: absolute;top:85%; left:5%; margin: 0 auto;}
- .lrc #ullrc{width: 100%;padding: 0;list-style: none;transition: 0.3s all ease; margin: 0;}
- /*歌词普通样式*/
- .lrc #ullrc li{height: 70px;line-height: 60px;font-family:华文隶书; font-size: 0px; color: #000078; font-weight: normal; transition: .3s all ease;list-style-type: none; text-align: center;display: block;width: 100%;margin: 0 auto;}
- /*动态歌词样式*/.lrc #ullrc li.active{ font-size: 44px;color: #800080;text-align: center;}
- #wzsd1 { animation: wzsd 0.56s linear infinite ;}
- @keyframes wzsd {
- from {opacity: 1;filter:hue-rotate(360deg)contrast(180%)brightness(200%);}
- 50% {opacity: 1;}
- to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
- </style>
- <div style="width: 100%;height: 1050px;position: absolute;MARGIN-LEFT:-210px;MARGIN-top:86px;">
- <div id="papa">
- <audio autoplay="" id="aud" loop="" src="音频地址"> </audio>
- <span id="fullscreen">全屏观赏</span>
- <div id="mdiv"></div>
- <div class="lrc" ><div id="wzsd1"><ul id="ullrc"></ul></div></div>
- </div>
- </div>
- <div style="width: 100%;height: 950px;"> </div>
- <script >
- mdiv.onclick = () => aud.paused ? aud.play():aud.pause();
- aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
- aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
- /*歌词特效*/
- wzsd1.style.animationPlayState = aud.paused ? 'paused' : 'running';
- aud.addEventListener('playing', () => wzsd1.style.animationPlayState = 'running');
- aud.addEventListener('pause', () => wzsd1.style.animationPlayState = 'paused');
- let fs = true;
- fullscreen.onclick = () => {
- fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏欣赏', document.exitFullscreen());
- fs = !fs;
- };
- </script >
- <script >
- var lrc = `同步歌词
- `;
- document.write('<script src="https://bbs.ltxjob.com/forum.php?mod=attachment&aid=MTI5ODl8YjFjMTEyYjl8MTczMDMzMzcyNnwxMjh8MTEzODk%3D" type="text/javascript" charset="utf-8"><\/script>');
- </script>
大家在制作时，只要把自己的图片、音乐地址、按钮图片、同步歌词，填到代码汉字地方，千万不要动代码的其他任何地方。切记！这次学习，就是让大家学会制作同步歌词，这个你要是学会了，你会感到很高兴，不信，你试试看。
|
评分
-
查看全部评分
|
发表于 2024-2-29 14:21:44
发表于 2024-2-29 16:56:00
