爱情故事

杨帆发表于 2026-6-7 22:47

本帖最后由杨帆于 2026-6-7 22:52 编辑 <br /><br /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
<title>冠斑犀鸟的爱情故事</title>
<style>
@import url("https://fonts.googleapis.com/css2?family=Liu+Jian+Mao+Cao&family=Long+Cang&family=Ma+Shan+Zheng&family=ZCOOL+KuaiLe&family=ZCOOL+QingKe+HuangYou&display=swap");
#papa {display: grid; place-items: center; width:1280px; height:780px; margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); position: relative; background:url(https://638183.freep.cn/638183/t24/w8/aj.webp) no-repeat center/cover; box-shadow:4px 4px 16px rgba(0,0,0,0.5); overflow:hidden; border-radius: 20px; z-index:1;}
.vid{position:absolute;z-index:2;inset:0;top:-5%;left:-5%;width:110%;height:110%;object-fit:cover;pointer-events:none;object-position:center;mask: linear-gradient(to left top, red 80%,transparent 95%);-webkit-mask: linear-gradient(to left top, red 80%,transparent 95%);}
#fullscreen {position:absolute;top:3%;right:3%;font:normal 1.3em 'Ma Shan Zheng','楷体', '华文宋体';color:#fff;background: rgba(0,0,0,0.4);backdrop-filter: blur(4px);padding: 6px 14px;border-radius: 40px;cursor:pointer;z-index:98;transition:0.2s;}
#fullscreen:hover {background:#ffb347; color:#1e2a3a; transform: scale(0.96);}
#canvas {position: absolute; left: -3%; top: -5%; width:300px;height:300px;display: block; z-index:3; cursor:pointer; }
</style>
</head>
<body>
<div id="papa">
<canvas id="canvas"width="450" height="450" title = "播放/暂停"></canvas>
<span id="fullscreen">全屏欣赏</span>
<audio id ="aud" src="https://music.163.com/song/media/outer/url?id=1499250295.mp3" autoplay loop></audio>
<audio class ="aud" src="https://alicdn-data.mvbox.cn/live/vp/03/9a4139c15a7edefca0f77bfba8d4fab7.mp4" autoplay loop></audio>
<video class="vid" src="https://alicdn-data.mvbox.cn/live/vp/03/9a4139c15a7edefca0f77bfba8d4fab7.mp4" autoplay loop preload="auto" playsinline muted></video>
</div>
<script>
const auds = document.querySelectorAll('.aud');
const vids = document.querySelectorAll('video');
const audio = document.getElementById("aud");
let fsTimer;
const fullscreenBtn = document.getElementById('fullscreen');
const papaDiv = document.getElementById('papa');
fullscreenBtn.onclick = () => {
if (!document.fullscreenElement) {
papaDiv.requestFullscreen().catch(err => console.log);
fullscreenBtn.innerText = '退出全屏';
} else {
document.exitFullscreen();
fullscreenBtn.innerText = '全屏欣赏';
}
};
papaDiv.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreenBtn.style.opacity = '1';
fsTimer = setTimeout(() => { fullscreenBtn.style.opacity = '0'; }, 2500);
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!audio.paused) audio.pause();
auds.forEach(a => a.pause());
vids.forEach(v => v.pause());
} else {
if (audio.paused && !audio.ended) audio.play().catch(()=>{});
auds.forEach(a => a.play().catch(()=>{}));
vids.forEach(v => v.play().catch(()=>{}));
}
});
['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
papaDiv.addEventListener(ev, (e) => { e.preventDefault(); })
);
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
const w = canvas.width;
const h = canvas.height;
let angle = 0;
let animationId = null;
let isPlaying = false;
var radgrad2 = ctx.createRadialGradient(200, 200, 200, 200, 200, 50);
radgrad2.addColorStop(0, "#FF5F98");
radgrad2.addColorStop(0.75, "#FF0188");
radgrad2.addColorStop(1, "rgba(255,215,0,0.5)");
var starPath = new Path2D("M400.00 200.00,L75.30 356.37,L155.50 5.01,L380.19 286.78,L19.81 286.78,L244.50 5.01,L324.70 356.37,L0.00 200.00,L324.70 43.63,L244.50 394.99,L19.81 113.22,L380.19 113.22,L155.50 394.99,L75.30 43.63");
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(200, 200);
ctx.rotate(angle);
ctx.scale(0.5, 0.5);
ctx.translate(-200, -200);
ctx.fillStyle = radgrad2;
ctx.fill(starPath);
ctx.strokeStyle = 'GreenYellow';
ctx.lineWidth = 5;
ctx.stroke(starPath);
ctx.restore();
angle -= 0.02;
ctx.save();
ctx.font = 'bold 45px Long Cang, Ma Shan Zheng,微软雅黑';
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
const text = '爱情故事';
ctx.shadowColor = 'rgba(0,0,0,0.5)';
ctx.shadowBlur = 8;
ctx.shadowOffsetX = 4;
ctx.shadowOffsetY = 4;
ctx.strokeStyle = '#ffeaa7';
ctx.lineWidth = 5;
ctx.strokeText(text, w/2-30, h/2-30);
const grad = ctx.createLinearGradient(120, 0, 480, 0);
grad.addColorStop(0, '#d63031');
grad.addColorStop(0.5, '#fd79a8');
grad.addColorStop(1, '#6c5ce7');
ctx.fillStyle = grad;
ctx.fillText(text, w/2-30, h/2-30);
ctx.shadowBlur = 0;
ctx.restore();
animationId = requestAnimationFrame(draw);
}
draw();
function stopAnimation() {
cancelAnimationFrame(animationId);
animationId = null;
}
function togglePlayPause() {
if (isPlaying) {
audio.pause();
auds.forEach(a => a.pause());
vids.forEach(v => v.pause());
stopAnimation();
} else {
audio.play().catch(()=>{});
auds.forEach(a => a.play().catch(()=>{}));
vids.forEach(v => v.play().catch(()=>{}));
if (!animationId) draw();
}
isPlaying = !isPlaying;
}
canvas.addEventListener('click', function(e) {
e.stopPropagation();
togglePlayPause();
});
togglePlayPause();
</script>
</body>
</html>

偶然~ 发表于 2026-6-7 23:39

来欣赏杨帆老师制作的精品佳作！

偶然~ 发表于 2026-6-7 23:39

音画太棒了！

偶然~ 发表于 2026-6-7 23:39

视频唯美

偶然~ 发表于 2026-6-7 23:39

制作大气磅礴

偶然~ 发表于 2026-6-7 23:39

音画合一，音乐与画面结合完美

偶然~ 发表于 2026-6-7 23:39

玫瑰花☆╮╮芍药花☆╮╰☆☆╮合欢花花～【*偶然献花给你啦】

偶然~ 发表于 2026-6-7 23:39

期待杨帆老师佳作频出！

偶然~ 发表于 2026-6-7 23:39

感谢杨帆老师带来的精彩，辛苦了！祝你开心幸福、阖家安康！

梦江南 发表于 2026-6-8 07:41

欣赏杨帆的精彩动画科普，这是什么鸟啊？{:4_187:}

红影发表于 2026-6-8 10:11

彼此最深的信任，把性命交付对方。只为了让后代有更安全的生存环境。
欣赏杨帆好帖{:4_199:}

杨帆发表于 2026-6-8 13:22

偶然~ 发表于 2026-6-7 23:39
来欣赏杨帆老师制作的精品佳作！

欢迎欣赏，感谢鼓励，祝偶然~兄弟爱情、事业双丰收{:4_190:}

杨帆发表于 2026-6-8 13:25

梦江南发表于 2026-6-8 07:41
欣赏杨帆的精彩动画科普，这是什么鸟啊？

冠斑犀鸟呀，谢谢鼓励，祝江南开心天天{:4_204:}

杨帆发表于 2026-6-8 13:28

红影发表于 2026-6-8 10:11
彼此最深的信任，把性命交付对方。只为了让后代有更安全的生存环境。
欣赏杨帆好帖

尝试以canvas绘图作小播，谢谢鼓励，祝影子开心幸福{:4_204:}

偶然~ 发表于 2026-6-8 14:02

杨帆发表于 2026-6-8 13:22
欢迎欣赏，感谢鼓励，祝偶然~兄弟爱情、事业双丰收

祝君康健胜春松，岁月悠长笑意浓。
百病不侵身似铁，千忧尽散气如虹。
心宽自有长生诀，体泰何须不老翁。
快乐随身行四海，平安一路伴从容。

红影发表于 2026-6-8 14:58

杨帆发表于 2026-6-8 13:28
尝试以canvas绘图作小播，谢谢鼓励，祝影子开心幸福

嗯嗯，这小播漂亮，视频里的那对鸟儿更感人{:4_187:}

霜染枫丹 发表于 2026-6-8 19:59

很有特点的佳作，欣赏赞佩~~{:4_204:}{:4_190:}

杨帆发表于 2026-6-8 21:34

霜染枫丹发表于 2026-6-8 19:59
很有特点的佳作，欣赏赞佩~~

这是我以前录的一个微信小视频，感觉文案写的不错，视频拍摄不易，主题也挺好，就选做素材了，谢谢枫丹老师鼓励，祝开心幸福{:4_204:}

雨季工作室 发表于 2026-6-10 09:12

欣赏了，问好杨帆老师！

杨帆发表于 2026-6-10 12:45

雨季工作室发表于 2026-6-10 09:12
欣赏了，问好杨帆老师！

问好雨季，谢谢鼓励，祝兄弟开心{:4_190:}

页: [1]

花潮论坛's Archiver

爱情故事