惜别的海岸 (并四版) - 龙飘飘[根据黑老师代码改编]
本帖最后由 亚伦影音工作室 于 2022-8-25 14:20 编辑 <br /><br /><style>#papa { left: -214px; 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}
#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 { to { transform: rotate(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','惜别的海岸 (并四版) - 龙飘飘'],
['23.00','苦涩的海风'],
['26.00','阵阵吹送'],
['28.00','海面一片朦胧'],
['30.00','何处有你影踪'],
['34.00','远处汽笛声声'],
['36.00','夹着海浪声'],
['39.00','催老我美丽的人生'],
['44.00','想起过去的岁月里'],
['47.00','在这残旧的海岸上'],
['49.00','和你朝朝暮暮'],
['51.00','看日落又日升'],
['55.00','虽然你已不在我身边'],
['61.00','对你的情意永在我心田'],
['65.00','此情此景旧日的爱'],
['71.00','只有挥手说再见'],
['87.00','苦涩的海风阵阵吹送'],
['92.00','海面一片朦胧'],
['94.00','何处有你影踪'],
['98.00','远处汽笛声声'],
['101.00','夹着海浪声'],
['103.00','催老我美丽的人生'],
['108.00','想起过去的岁月里'],
['111.00','在这长久的海岸上'],
['113.00','和你朝朝暮暮'],
['115.00','看日落又日升'],
['119.00','虽然你已不在我身边'],
['125.00','对你的情意永在我心田'],
['129.00','此情此景 旧日的爱'],
['135.00','只有挥手说再见'],
['162.00','想起过去的岁月里'],
['164.00','在这残旧的海岸上'],
['167.00','和你朝朝暮暮'],
['169.00','看日落又日升'],
['173.00','虽然你已不在我身边'],
['178.00','对你的情意永在我心田'],
['183.00','此情此景旧日的爱'],
['188.00','只有挥手说再见'],
['216.00','苦涩的海风'],
['218.00','阵阵吹送'],
['220.00','海面一片朦胧'],
['223.00','何处有你影踪'],
['226.00','远处汽笛声声'],
['229.00','夹着海浪声'],
['231.00','催老我美丽的人生'],
['237.00','想起过去的岁月里'],
['239.00','在这残旧的海岸上'],
['242.00','和你朝朝暮暮'],
['244.00','看日落又日升'],
['248.00','虽然你已不在我身边'],
['253.00','对你的情意永在我心田'],
['258.00','此情此景旧日的爱'],
['263.00','只有挥手说再见'],
['280.00','苦涩的海风阵阵吹送'],
['285.00','海面一片朦胧'],
['287.00','何处有你影踪'],
['291.00','远处汽笛声声'],
['293.00','夹着海浪声'],
['295.00','催老我美丽的人生'],
['301.00','想起过去的岁月里'],
['303.00','在这长久的海岸上'],
['306.00','和你朝朝暮暮'],
['308.00','看日落又日升'],
['312.00','虽然你已不在我身边'],
['318.00','对你的情意永在我心田'],
['322.00','此情此景 旧日的爱'],
['328.00','只有挥手说再见'],
['354.00','想起过去的岁月里'],
['357.00','在这残旧的海岸上'],
['360.00','和你朝朝暮暮'],
['361.00','看日落又日升'],
['366.00','虽然你已不在我身边'],
['371.00','对你的情意永在我心田'],
['375.00','此情此景旧日的爱'],
['381.00','只有挥手说再见']
];
mypic.src = 'https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/56aeb15645eff80748aa71c3982414af.jpg';
mypic.onload = () => draw();
aud.src = 'https://www.qqmc.com/mp3/music51676447.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 = 8;
ctx.shadowOffsetY = 5;
ctx.shadowBlur = 8;
ctx.shadowColor = '#fff000';
ctx.font = 'bold 40px sans-serif ';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
for(j = 0; j < 80; j ++) {
ctx.fillStyle = 'hsla(' + num(0,360) + ', 100%, 40%, 0.75)';
let r = num(10, 3), 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.strokeText('惜别的海岸', canv.width / 3 + 355, canv.height / 10);
}
</script>
这个小圆点运用的漂亮，欣赏精彩制作{:4_199:} 漂亮的彩色球球，欣赏亚伦老师精美制作{:4_187:}
页:
[1]