你是我心口医不好的伤-赵洋
本帖最后由 亚伦影音工作室 于 2022-9-2 15:18 编辑 <br /><br /><style>#papa { left: -234px; width: 1024px; height: 600px; display: grid; place-items: center;box-shadow: 3px 3px 0px #000;position: relative; z-index: 3; }
#disc { position: absolute; width: 80px; height: 80px; left: 30px; bottom: 30px; background: url(http://pan.yinhuabbs.cn/view.php/a60d7a6c4172d96080d4e23d80d9af48.png)0 0/100% 100%,conic-gradient(red,orange,yellow,green,teal,blue,#ff0000);border:2px solid #000000; mask: radial-gradient(transparent 7px,#red 0);-webkit-mask: radial-gradient
(transparent 7px,red 0); border-radius: 50%; cursor: pointer; animation: rot 4s linear infinite; z-index: 20;text-shadow: 1px 1px 2px #ffffff;transform: rotateX(45deg) rotateY(-20deg) rotate(0deg);}
#lrcbox { position: absolute; left: 0px; top:500px;width: 960px; height: 100px; font-family:悟空大字库; font-size: 40px;color: #ff0000; filter:drop-shadow(#ffffff 1px 0 0)drop-shadow(#ffffff 0 1px 0)drop-shadow(#ffffff -1px 0 0) drop-shadow(#ffffff 0 -1px0);overflow: hidden;text-align: center;;z-index: 10; }
#canv { margin: auto; display: block; position: relative; border: 1px solid; }
@keyframes rot {0% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(0deg);}
100% {transform: rotateX(45deg) rotateY(-20deg) rotateZ(360deg);}
}
</style>
<style type="text/css">.items{position: absolute; left: 20px; top:0px;animation: slider 5s linear infinite ;z-index: 10; }
@keyframes slider {from {opacity: 1;filter:hue-rotate(360deg)contrast(120%)brightness(100%);}
to {opacity: 1;filter:hue-rotate(0deg)contrast(140%)brightness(100%);}}
</style>
<div id="papa" >
<div class="items" ><divid="lrcbox" ></div></div>
<canvas id="canv"></canvas>
<span id="disc"></span>
</div>
<script>
let ctx = canv.getContext('2d'), mypic = new Image(), aud = new Audio();
let w = canv.width = papa.offsetWidth, h = canv.height = papa.offsetHeight;
let num = (x,y) => Math.floor(Math.random() * (x - y + 1) + y);
let lrcAr = [
['1.00','你是我心口医不好的伤-赵洋'],
['6.00','出品人：亚伦'],
['8.00','出品: 亚伦影音工作室'],
['12.00','冰冷的房间空空又荡荡'],
['17.00','只听到钟声嘀嗒作响'],
['21.00','你的模样不能忘不敢想'],
['26.00','我一人睡着我们两人的床'],
['31.00','想你的夜晚孤独又漫长'],
['36.00','寂寞忧伤我一个人扛'],
['40.00','我和你的爱就这样散场'],
['45.00','却怎么也学不会把你遗忘'],
['49.00','你是我心口医不好的伤'],
['54.00','多少次尝试着去原谅'],
['59.00','你对我承诺过的地老天荒'],
['64.00','如今看来只是你美丽的谎'],
['69.00','你是我心口医不好的伤'],
['73.00','我只能默默眼含泪光'],
['78.00','曾以为我们的爱会不一样'],
['83.00','现在想想是多么可悲多么的荒唐'],
['113.00','想你的夜晚孤独又漫长'],
['118.00','寂寞忧伤我一个人扛'],
['122.00','我和你的爱就这样散场'],
['126.00','却怎么也学不会把你遗忘'],
['131.00','你是我心口医不好的伤'],
['136.00','多少次尝试着去原谅'],
['141.00','你对我承诺过的地老天荒'],
['146.00','如今看来只是你美丽的谎'],
['150.00','你是我心口医不好的伤'],
['155.00','我只能默默眼含泪光'],
['160.00','曾以为我们的爱会不一样'],
['165.00','现在想想是多么可悲多么的荒唐'],
['174.00','你是我心口医不好的伤'],
['179.00','多少次尝试着去原谅'],
['184.00','你对我承诺过的地老天荒'],
['189.00','如今看来只是你美丽的谎'],
['192.00','你是我心口医不好的伤'],
['198.00','我只能默默眼含泪光'],
['203.00','曾以为我们的爱会不一样'],
['208.00','现在想想是多么可悲多么的荒唐']
];
mypic.src = 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/17a51793950de9850165769bf779d7f2.jpg?x-oss-process=image%2fresize%2cm_lfit%2cw_1920%2ch_1080';
mypic.onload = () => draw();
aud.src = 'https://www.qqmc.com/mp3/music236291758.mp3';
aud.loop = true;
aud.autoplay = true;
disc.style.animationPlayState = aud.paused ? 'paused' : 'running';
disc.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', () => disc.style.animationPlayState = 'running');
aud.addEventListener('pause', () => disc.style.animationPlayState = 'paused');
aud.addEventListener('timeupdate', () => draw());
aud.addEventListener('timeupdate',function(){
let tt = aud.currentTime;
for(j=0; j<lrcAr.length; j++){
if(tt >= lrcAr) lrcbox.innerHTML = lrcAr;
}
});
function draw() {
ctx.clearRect(0, 0, canv.width, canv.height);
ctx.drawImage(mypic, 0, 0, w, h);
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.shadowBlur = 8;
ctx.shadowColor = 'rgba(153, 204, 255)';
ctx.font = 'normal 40px sans-serif ';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for(j = 0; j < 400; j ++) {
ctx.fillStyle = 'hsla(' + num(0, 360) + ', 100%, 60%, 1)';
let r = num(1.2, 0.5), x = num(r, canv.width - r), y = num(r, canv.height - r);
ctx.beginPath();
ctx.arc(x, y, r, 0, Math.PI * 2);
ctx.fill();
}
ctx.strokeStyle = 'hsl(' + num(0, 360) + ', 100%, ' + num(20, 80) + '%)';
ctx.beginPath();
ctx.fillText('你是我心口医不好的伤-赵洋', canv.width / 30 + 355, canv.height / 20);
}
</script> 我单位的网有限制，听不了歌。先来占位献花，给亚伦老师点赞{:4_187:} 欣赏好听的音乐，问好老师！{:4_171:} 不错，好听。 歌词同步很漂亮，歌曲和图图也很相符，欣赏{:4_187:} 制作真棒，欣赏
页:
[1]