全控HTML5音画《我看上的姑娘 - 杨小壮》画面可暂停
本帖最后由 亚伦影音工作室 于 2022-8-30 05:48 编辑 <br /><br /><div style="z-index: 127;width: 1000px; height: 600px; margin-top:50px; margin-left:-230px;box-shadow: 0px 0px 0px 2px #ffffff, 0px 0px 0px 15px #880000; overflow: hidden;transform:rotate(0deg);background:url(https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/0323a98fe3627a64c6c16d96c701d18f.jpg)0 0/100%100%,linear-gradient(50deg, #000080, #ff0000, #000000, #00f000);text-align: center;"><div class="HT">
<divclass="photos" id="testImg">
<img src="https://img-baofun.zhhainiao.com/fs/08e5ee069a2bdca410f6acdc4716d154.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/80cf3f632bed46df15fe82d4f6e591b0.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/506465753f8985a68964e9e93d2a8141.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/ff4ad3821a4a29b0909290eb9f307b8c.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/7c5e11e8850af24b77faa4280baa5f3b.jpg" />
<img src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/02ed51985170a4b9db3f8e70cadb9396.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/b16aafc95770fb2073e15bfa453f1113.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/d379de6a6004bf2cfd47de40813702c6.jpg" />
<img src="https://img-baofun.zhhainiao.com/fs/fad8d29ff61243c5ecf73730d8a1a0e5.jpg" /></div>
<audio autoplay=""id="MusicPlayer"src="https://www.qqmc.com/mp3/music234675020.mp3" loop="" ></audio>
<div class="img_border" id="aplay"style="width: 1024px; height: 1024px;background: linear-gradient(45deg, rgba(253, 4, 18, 0.51) 14%,rgba(60, 231, 224, 0) 42%,rgba(142, 68, 173, 0) 54%,rgba(10, 4, 248, 0.47) 85%),url(http://image.hnol.net/c/2022-01/05/16/202201051650422421-5769293.png)0 0/30% 30%;transform:rotate(0deg)scale(1.2);"></div>
<div class="btn">
<div id="testImg" onclick="bf()"> <input type="button"id="testBtn"value="暂停"style="width: 70px; height: 40px;border-radius: 0%;color: #000000;font-size:20px;font-weight:bold;border:1px solid #000000;"> </div>
</div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div></div>
</div>
<style type="text/css">
.photos img{float:right;width:1000px;height:600px;position:relative;LEFT:0px;top:0px;overflow:hidden;border-radius:0px;-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);filter:hue-rotate(0deg)contrast(120%)brightness(100%);z-index: 10;}
.photos img:stop{}
.stop{animation-play-state:paused;}
.photos {position: absolute;z-index:9; width: calc(1000px * 9);
animation-name: animate;animation-duration: 30s;
animation-iteration-count: infinite;
animation-timing-function: linear;}
@keyframes animate {
0%,20% { right: -9000px;}
25%,30% { right: -8000px; }
35%,40% { right: -7000px;}
45%,50% { right: -6000px; }
55%,60% { right: -5000px; }
65%,70% { right: -4000px; }
75%,80% { right: -3000px; }
85%,90% { right: -2000px;}
95%,100% { right: -1000px;}
}
</style>
<style type="text/css">.items{ animation: slider 0.26s linear infinite ; }
@keyframes slider {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>
<script >
var image = document.getElementById("testImg"),
button = document.getElementById("testBtn");
if (image.classList && image && button) {
button.onclick = function() {
if (this.value == '暂停') {
image.classList.add('stop');
this.value = '播放';
} else {
image.classList.remove('stop');
this.value = '暂停';
}
};
}
</script>
<style type="text/css">
.HT{
width: 1px;position: absolute;top:0px; left:0px;
}
#MusicPlayer{
width: 250px;
margin: 0 auto;
}
.btn{
z-index: 300;
margin: 0px 0px;position: absolute;top:540px; left:20px;
}
.lrc{
width: 870px;
height: 140px;
overflow: hidden;filter:drop-shadow(#FFFfff 1px 0 0)drop-shadow(#FFFfff 0 1px 0)drop-shadow(#FFFfff -1px 0 0) drop-shadow(#FFFfff 0 -1px0);
display: block;position: absolute;top:500px; left:60px;z-index: 30;
margin: 0 auto;
}
.lrc #ullrc{
width: 100%;
padding: 0;
list-style: none;
transition: 0.3s all ease;
margin: 0;
}
/*歌词普通样式*/
.lrc #ullrc li{
height: 80px;
line-height: 60px;
font-family:华文隶书;
font-size: 0px;
color: #000078;transform: translate(0%,0%);
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;
display: block;
width: 100%;
margin: 0 auto;-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-color: red;
background-image:linear-gradient(50deg, #fff000, #ff0000, #000000, #00f000);
background-repeat:no-repeat;
background-position: -800px 0;
-webkit-animation:loop 3s linear infinite;
}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 45px;
color: #ff0000;transform: translate(0%,0%);
font-weight: bold;
}
@-webkit-keyframes loop{
0%{background-position: -800px 0;}
100%{background-position: -0 0;}
}
/*mv动画*/
.img_border{margin: -260px -10px;position: absolute;top:0px; left:0px;z-index:10;
display: block;
width: 1024px; height: 1024px;animation:rotating 10s linear infinite;}
.img_border #aplay{ }
@keyframes rotating{0%{
background-position: 0% 0%;filter:hue-rotate(0deg);transform:rotate(0deg)scale(1.2);
}
100%{
background-position: 0% 0;filter:hue-rotate(360deg);transform:rotate(360deg)scale(1.2);
}
}
</style>
<script>var lrc =`我看上的姑娘 - 杨小壮
词：杨小壮
曲：杨小壮
编曲：zc-mstudio
吉他：潘春宇
制作：亚伦影音工作室
代码设计：亚伦
欢迎使用改编
寂寞被染成霜
我的世界出现一位姑娘
她来的时候 对着我讲
以后别在吊儿郎当
我吻过她的脸庞
也看过她笑的模样
每一句话都能刻在心上
我只想守在你身旁
我看上的姑娘 她是如此的温柔善良
她躲在我梦里 悄悄的为我 披上了那件红装
她是我夜里的月亮 她是我黑暗里的霞光
她的美丽和端庄还有大方 都住在了我的心上
寂寞被染成霜
我的世界出现一位姑娘
她来的时候 对着我讲
以后别在吊儿郎当
我吻过她的脸庞
也看过她笑的模样
每一句话都能刻在心上
我只想守在你身旁
我看上的姑娘 她是如此的温柔善良
她躲在我梦里 悄悄的为我 披上了那件红装
她是我夜里的月亮 她是我黑暗里的霞光
她的美丽和端庄还有大方 都住在了我的心上
我看上的姑娘 她是如此的温柔善良
她躲在我梦里 悄悄的为我 披上了那件红装
她是我夜里的月亮 她是我黑暗里的霞光
她的美丽和端庄还有大方 都住在了我的心上
她的美丽和端庄还有大方 都住在了我的心上`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts = getLrcObj(parts);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts.substr(1);
var timeParts = time.split(":");
var seconds = +timeParts;
var min = +timeParts;
seconds = min * 60 + seconds;
var words = twoParts;
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray.words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 80, lrc_ul_height = 70;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {
top = 0;
}
$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");
}
$("ullrc").children.classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("MusicPlayer").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("MusicPlayer").ontimeupdate = setPosition;
</script>
<script>
function bf() {
var audio = document.getElementById('MusicPlayer');
var bf=document.getElementById("bf");
if (audio !== null) {
if (audio.paused) {
audio.play(); //audio.play();
bf.innerText="";
} else {
audio.pause();
bf.innerText="";
}
}
}
var my_audio =document.getElementById("MusicPlayer");my_audio.onended = function(){document.getElementById("aplay").className="";};my_audio.onplaying = function()
{document.getElementById("aplay").className="img_border";};my_audio.onpause = function(){document.getElementById("aplay").className="";};var lyric = parseLyric(songkrc);
</script>
亚伦制作得挺漂亮，同步歌词也挺好的。{:4_199:} 好多美女啊，这个画面滚动暂停好，可以仔细欣赏美女了{:4_187:} 欣赏亚伦大作 {:4_199:}{:4_199:}{:4_199:}欢迎，又来了一位代码大神。。。。 友友，你这水平，可以自己出碟片。。。
页:
[1]