也来充电试试《一个人在城市颠沛流离》
本帖最后由 亚伦影音工作室 于 2023-4-8 22:30 编辑 <br /><br /><style>#papa {
margin: 10px -300px;
width: 1164px;
height: 620px;
background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56) 100%),url('http://chuangshicdn.data.mvbox.cn/album/22/06/29/22062918314029952954.jpg')0 0/100% 100%; filter: drop-shadow(2px 2px 0px black); border-radius: 8px;
position: relative;
z-index: 1;overflow: hidden;}
#dt{position: absolute;top:45%; left:25%;z-index: 1;
width:200px;
height:200px;transform: rotateY(0deg);opacity: 0.8}
.mplayer {top:500px; left:35%;z-index: 2;
width: 400px;
height: 100px;
border: 2px solid darkgreen;
border-radius: 8px;
filter: drop-shadow(2px 2px 0px black);
cursor: pointer;
position: relative;
--ww: 0; --bg: dargreen; --time: .2s;
}
.mplayer::before, .mplayer::after {
position: absolute;
content: '';background: linear-gradient(41deg, rgba(251, 7, 7, 0.33) 0%,rgba(6, 19, 157, 0.31) 44%,rgba(19, 233, 63, 0.56)100%)0 0/50% 100%,url('http://chuangshicdn.data.mvbox.cn/album/22/06/29/22062918314029952954.jpg')0 0/50% 100%;
}
.mplayer::before {
width: var(--ww);
height: 100%;
border-radius: 8px;
opacity: 1;
}
.mplayer::after {
width: 20px;
height: 45px;
top: 25px;
right: -23px;
opacity: 1;
animation: flash var(--time) infinite alternate;
}
@keyframes charging { to { width: 100%; } }
@keyframes flash { from { background: darkgreen; } to { background: red; } }
</style>
<div id="papa">
<div id='dt'><img id="testImg" src="https://pic.imgdb.cn/item/64309c8c0d2dde577781ae06.gif" width="100%" height="100%"></div>
<div id="testbnt">
<div class="mplayer"></div></div>
<divclass="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
</div>
<audio id="aud" src="https://www.qqmc.com/mp3/music269265123.mp3" autoplay loop></audio>
<script>
let mplayer = document.querySelector('.mplayer');
let mState = () => aud.paused
? (mplayer.style.setProperty('--bg', 'gray'), mplayer.style.setProperty('--time','.2s'))
: (mplayer.style.setProperty('--bg', 'darkgreen'), mplayer.style.setProperty('--time','1s'));
mplayer.onclick = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) aud.paused ? aud.play() : aud.pause();
};
mplayer.onmousemove = (e) => {
let x = e.offsetX, w = mplayer.offsetWidth;
if(x > w) mplayer.title = '播放/暂停';
};
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
aud.addEventListener('timeupdate', () => {
mplayer.style.setProperty('--ww', aud.currentTime*mplayer.offsetWidth/aud.duration + 'px');
});
</script>
<style type="text/css">
.lrc{top:500px; left:35%;z-index: 2;
width: 400px;
height: 100px;z-index: 3;
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;
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: 90px;
font-family:悟空大字库;
font-size: 0px;
color: #000078;transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
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: 28px;
color: #ff0000;
font-weight: bold;
}
</style>
<script >var lrc = `我在没你的城市颠沛流离
作词：唐心语
作曲：春妹
演唱：李英
混音：y 爱华
监制：禤瑞伟
制作人：亚伦
出品：亚伦影音工作室
你没说告别也没再联系
莫名其妙消失在我世界里
难道你是想惩罚我一次
才会故意让我找不到你
我想告诉你我还在等你
因为接受不了突然的失去
可不可以给我一点信息
别把消失当作一种游戏
我在没你的城市颠沛流离
寻寻觅觅只为打探你消息
多少风风雨雨多少质疑
多少曲曲折折我都不在意
我在没你的城市颠沛流离
回忆千千万万永远都是你
而你带着承诺带着过去
带着我的真心又去了哪里
我想告诉你我还在等你
因为接受不了突然的失去
可不可以给我一点信息
别把消失当作一种游戏
我在没你的城市颠沛流离
寻寻觅觅只为打探你消息
多少风风雨雨多少质疑
多少曲曲折折我都不在意
我在没你的城市颠沛流离
回忆千千万万永远都是你
而你带着承诺带着过去
带着我的真心又去了哪里
我在没你的城市颠沛流离
寻寻觅觅只为打探你消息
多少风风雨雨多少质疑
多少曲曲折折我都不在意
我在没你的城市颠沛流离
回忆千千万万永远都是你
而你带着承诺带着过去
带着我的真心又去了哪里
带着我的真心又去了哪里
`;
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 = 90;
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 = $("aud").currentTime + turn;
for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray.seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image = document.getElementById("testImg"),
button = document.getElementById("testbnt");
if (image && button) {
button.onclick = function() {
if (this.value == '') {
image.play();
this.value = '.';
} else {
image.stop();
this.value = '';
}
};
}
</script>
这个充电器还带美女的{:4_170:} 欣赏亚伦的精彩制作{:4_199:} 小辣椒 发表于 2023-4-8 22:12
欣赏亚伦的精彩制作
试着加了可控动图！ 欣赏老师佳作！{:4_204:} 这个充电器不能拉进度的？好像无法快进呢。
画面很漂亮，按钮可以控制动图。欣赏亚伦老师好帖{:4_187:} 很好看的充电器，感谢分享，欣赏点赞！{:4_171:}
页:
[1]