心归云水间
<!DOCTYPE html><html>
<head>
<meta charset="utf-8">
<meta name="referrer" content="never"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<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{margin:130px 0 20px calc(50% - 721px);background:#000 url('https://pic1.imgdb.cn/item/6a301d59b755a1449d6a3b97.jpg') no-repeat center center/cover;width:1280px;height:750px;box-shadow:3px 3px 6px gray;overflow:hidden;position:relative;display:grid;place-items:center;z-index:1;font-family:"ZCOOL KuaiLe","Ma Shan Zheng","Long Cang","华文行楷","SimHei","Arial","sans-serif";user-select:none;--state:running;}
#msvg{position:absolute;cursor:pointer;transition:1.2s;animation:ringRot 3s linear infinite var(--state);z-index:15;right:3%;top:3%;width:120px;height:120px;}
.vid1{position:absolute;z-index:1;left:0%;top:0%;width:100%;height:100%;object-fit:cover;pointer-events:none;object-position:center;mask:linear-gradient(0deg,red 80%,transparent 92%);-webkit-mask:linear-gradient(0deg,red 80%,transparent 92%);}
#fullscreen{border-radius:4px;position:absolute;color:darkgray;padding:4px 8px;z-index:12;font-size:25px;border:none;cursor:pointer;top:25px;left:25px;background:transparent;}
#fullscreen:hover{font-style:italic;}
.song-title{position:absolute;top:60px;left:calc(50%);transform:translateX(-50%);max-width:40%;height:10%;color:#FF1493;font-family:"Ma Shan Zheng",'Microsoft YaHei',"华文新魏",cursive;font-size:5rem;margin-bottom:20px;letter-spacing:6px;z-index:2;transform:perspective(800px) rotateY(0deg);text-shadow:1px 1px 0 #fff,2px 2px 0 #fff,3px 3px 0 #fff;background:none;border:none;box-shadow:none;padding:0;transition:1.2s;filter:url("#turbulence");animation:scale 12s ease infinite alternate var(--state);}
@keyframes ringRot{to{transform:rotate(1turn);filter:hue-rotate(360deg);}}
@keyframes scale{0%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}20%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}40%{transform:translateX(-50%) perspective(800px) rotateY(-25deg) scale(1.2);}60%{transform:translateX(-50%) perspective(800px) rotateY(25deg) scale(1.2);}80%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(1);}100%{transform:translateX(-50%) perspective(800px) rotateY(0deg) scale(0.01);}}
</style>
</head>
<body>
<div id="papa">
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=1389812951.mp3" loop autoplay></audio>
<video class="vid1" src="https://link.hhtjim.com/163/10906989.mp4" preload="auto" autoplay loop playsinline muted></video>
<div id="fullscreen">全屏欣赏</div>
<div class="song-title">心归云水间</div>
<svg id="msvg" width="180" height="180" viewBox="0 0 512 512"><title id="svgtext">暂停</title>
<defs id="defs">
<radialGradient id="grd" cx="55%" cy="45%" r="60%">
<stop offset="0%" stop-color="#00FFFF"></stop>
<stop offset="50%" stop-color="#6495ED"></stop>
<stop offset="100%" stop-color="#7B68EE"></stop>
</radialGradient>
</defs>
</svg>
<svg id="reflect">
<filter id="turbulence" x="0%" y="0%" width="100%" height="100%">
<feTurbulence id="ripples" numOctaves="6" seed="6" baseFrequency="0.02 0.05"></feTurbulence>
<feDisplacementMap scale="8" in="SourceGraphic"></feDisplacementMap>
<animate xlink:href="#ripples" attributeName="baseFrequency" dur="30s" keyTimes="0;0.5;1" values="0.02 0.05;0.04 0.07;0.02 0.05;" repeatCount="indefinite"/>
</filter>
</svg>
</div>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr(msvg);
var d = 'M418.2 177.2c-5.4-1.8-10.8-3.5-16.2-5.1.9-3.7 1.7-7.4 2.5-11.1 12.3-59.6 4.2-107.5-23.1-123.3-26.3-15.1-69.2.6-112.6 38.4-4.3 3.7-8.5 7.6-12.5 11.5-2.7-2.6-5.5-5.2-8.3-7.7-45.5-40.4-91.1-57.4-118.4-41.5-26.2 15.2-34 60.3-23 116.7 1.1 5.6 2.3 11.1 3.7 16.7-6.4 1.8-12.7 3.8-18.6 5.9C38.3 196.2 0 225.4 0 255.6c0 31.2 40.8 62.5 96.3 81.5 4.5 1.5 9 3 13.6 4.3-1.5 6-2.8 11.9-4 18-10.5 55.5-2.3 99.5 23.9 114.6 27 15.6 72.4-.4 116.6-39.1 3.5-3.1 7-6.3 10.5-9.7 4.4 4.3 9 8.4 13.6 12.4 42.8 36.8 85.1 51.7 111.2 36.6 27-15.6 35.8-62.9 24.4-120.5-.9-4.4-1.9-8.9-3-13.5 3.2-.9 6.3-1.9 9.4-2.9 57.7-19.1 99.5-50 99.5-81.7 0-30.3-39.4-59.7-93.8-78.4zM282.9 92.3c37.2-32.4 71.9-45.1 87.7-36 16.9 9.7 23.4 48.9 12.8 100.4-.7 3.4-1.4 6.7-2.3 10-22.2-5-44.7-8.6-67.3-10.6-13-18.6-27.2-36.4-42.6-53.1 3.9-3.7 7.7-7.2 11.7-10.7zM167.2 307.5c5.1 8.7 10.3 17.4 15.8 25.9-15.6-1.7-31.1-4.2-46.4-7.5 4.4-14.4 9.9-29.3 16.3-44.5 4.6 8.8 9.3 17.5 14.3 26.1zm-30.3-120.3c14.4-3.2 29.7-5.8 45.6-7.8-5.3 8.3-10.5 16.8-15.4 25.4-4.9 8.5-9.7 17.2-14.2 26-6.3-14.9-11.6-29.5-16-43.6zm27.4 68.9c6.6-13.8 13.8-27.3 21.4-40.6s15.8-26.2 24.4-38.9c15-1.1 30.3-1.7 45.9-1.7s31 .6 45.9 1.7c8.5 12.6 16.6 25.5 24.3 38.7s14.9 26.7 21.7 40.4c-6.7 13.8-13.9 27.4-21.6 40.8-7.6 13.3-15.7 26.2-24.2 39-14.9 1.1-30.4 1.6-46.1 1.6s-30.9-.5-45.6-1.4c-8.7-12.7-16.9-25.7-24.6-39s-14.8-26.8-21.5-40.6zm180.6 51.2c5.1-8.8 9.9-17.7 14.6-26.7 6.4 14.5 12 29.2 16.9 44.3-15.5 3.5-31.2 6.2-47 8 5.4-8.4 10.5-17 15.5-25.6zm14.4-76.5c-4.7-8.8-9.5-17.6-14.5-26.2-4.9-8.5-10-16.9-15.3-25.2 16.1 2 31.5 4.7 45.9 8-4.6 14.8-10 29.2-16.1 43.4zM256.2 118.3c10.5 11.4 20.4 23.4 29.6 35.8-19.8-.9-39.7-.9-59.5 0 9.8-12.9 19.9-24.9 29.9-35.8zM140.2 57c16.8-9.8 54.1 4.2 93.4 39 2.5 2.2 5 4.6 7.6 7-15.5 16.7-29.8 34.5-42.9 53.1-22.6 2-45 5.5-67.2 10.4-1.3-5.1-2.4-10.3-3.5-15.5-9.4-48.4-3.2-84.9 12.6-94zm-24.5 263.6c-4.2-1.2-8.3-2.5-12.4-3.9-21.3-6.7-45.5-17.3-63-31.2-10.1-7-16.9-17.8-18.8-29.9 0-18.3 31.6-41.7 77.2-57.6 5.7-2 11.5-3.8 17.3-5.5 6.8 21.7 15 43 24.5 63.6-9.6 20.9-17.9 42.5-24.8 64.5zm116.6 98c-16.5 15.1-35.6 27.1-56.4 35.3-11.1 5.3-23.9 5.8-35.3 1.3-15.9-9.2-22.5-44.5-13.5-92 1.1-5.6 2.3-11.2 3.7-16.7 22.4 4.8 45 8.1 67.9 9.8 13.2 18.7 27.7 36.6 43.2 53.4-3.2 3.1-6.4 6.1-9.6 8.9zm24.5-24.3c-10.2-11-20.4-23.2-30.3-36.3 9.6.4 19.5.6 29.5.6 10.3 0 20.4-.2 30.4-.7-9.2 12.7-19.1 24.8-29.6 36.4zm130.7 30c-.9 12.2-6.9 23.6-16.5 31.3-15.9 9.2-49.8-2.8-86.4-34.2-4.2-3.6-8.4-7.5-12.7-11.5 15.3-16.9 29.4-34.8 42.2-53.6 22.9-1.9 45.7-5.4 68.2-10.5 1 4.1 1.9 8.2 2.7 12.2 4.9 21.6 5.7 44.1 2.5 66.3zm18.2-107.5c-2.8.9-5.6 1.8-8.5 2.6-7-21.8-15.6-43.1-25.5-63.8 9.6-20.4 17.7-41.4 24.5-62.9 5.2 1.5 10.2 3.1 15 4.7 46.6 16 79.3 39.8 79.3 58 0 19.6-34.9 44.9-84.8 61.4zm-149.7-15c25.3 0 45.8-20.5 45.8-45.8s-20.5-45.8-45.8-45.8c-25.3 0-45.8 20.5-45.8 45.8s20.5 45.8 45.8 45.8z';
dr.path(d,'url(#grd)').set('fill-rule', 'evenodd');
</script>
<script>
msvg.onclick = () => {
const vid1 = document.querySelector('.vid1');
svgtext.textContent = aud.paused ? "暂停" : "播放";
papa.style.setProperty('--state', aud.paused ? 'running' : 'paused');
if(aud.paused) {
aud.play().catch(()=>{});
vid1.play();
reflect.unpauseAnimations();
} else {
aud.pause();
vid1.pause();
reflect.pauseAnimations();
}
};
let fs = true,fsTimer;
fullscreen.onclick = ()=>{
if(fs){
fullscreen.innerText = '退出全屏';
papa.requestFullscreen();
}else{
fullscreen.innerText = '全屏欣赏';
document.exitFullscreen();
}
fs = !fs;
};
papa.addEventListener('mousemove', () => {
clearTimeout(fsTimer);
fullscreen.style.opacity = '1';
fsTimer = setTimeout(() => fullscreen.style.opacity = '0', 2500);
});
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
if (!aud.paused) aud.pause();
} else {
if (aud.paused && !aud.ended) aud.play().catch(()=>{});
}
});
['contextmenu', 'dragstart', 'selectstart'].forEach(ev =>
papa.addEventListener(ev, (e) => {
e.preventDefault();
})
);
</script>
</body>
</html>
这个播放器好看！ 视频选得漂亮！
页:
[1]