相伴 （学习黑黑老师的心形代码）
<style>
@import 'https://638183.freep.cn/638183/web/css/audlrc.css';
#mama { margin: 30px 0 30px calc(50% - 681px); width: 1200px; height: 720px; background: black url('https://pic.imgdb.cn/item/67553f33d0e0a243d4dfe340.jpg') no-repeat center/ cover; }
#player { cursor: pointer; transition: .7s; animation: flash .5s linear infinite var(--state); }
#player:hover { opacity: .4; }
#prog { bottom: 20px; width: 280px; --bg1:Orange; --bg2:Crimson; --color: Orange; }
#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
#lrc { top: 30px; color: Orange; --bg: linear-gradient(rgba(255,255,0),rgba(0,200,50,.75)); }
#vid { position: absolute; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; -webkit-mask: radial-gradient(transparent 20%, red); pointer-events: none; }
svg { position: absolute; }
#fsbtn { position: absolute; bottom: 20px; right: 30%; color: lightblue; padding: 2px 6px; border: 2px solid lightblue; border-radius: 8px; user-select: none; cursor: pointer; transition: .5s; z-index: 9; }
use { transform-box: fill-box; transform-origin: center; animation: move var(--dur) var(--delay) linear infinite var(--state); }
@keyframes move { to { transform: rotate(var(--deg)) translate(var(--xx)); } }
@keyframes flash { to { filter: hue-rotate(360deg); } }
</style>
<div id="mama" class="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2133203610.mp3"></audio>
<video id="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/03/02/45/46/video6362bada8cb97.mp4" autoplay loop muted></video>
<span id="fsbtn" class="fsbtn"></span>
<svg id="msvg" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"></svg>
<div id="lrc" class="lrc" data-lrc="HCPlayer">HCPlayer</div>
<div id="prog" class="prog" data-tt="00:00 00:00"></div>
</div>
<script type="module">
import fscreen from 'https://638183.freep.cn/638183/web/mod/fscreen.js';
import { Aud } from 'https://638183.freep.cn/638183/web/mod/audlrc.js';
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = Dr.dr('msvg');
dr.symbol('sy1', '-200 -200 400 400');
dr.path('M0 -100 C250 -200,100 0,0 180 C-100 0,-250 -200,0 -100', 'DarkOrange').addTo('sy1');
var all = 20;
Array.from({length: all}).forEach(() => {
var size= Math.random() * 30 + 20;
dr.use('sy1', -100, 100, size, size).style(`filter: hue-rotate(${360 * Math.random()}deg); --delay: ${Math.random() * -12}s; --dur: ${Math.random() * 8 + 10}s; --deg: ${100 - Math.random() * 120}deg;`);
});
dr.use('#sy1', 550, 580, 100, 100).id('player');
var lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
var mDatas = { pa: mama, btn: player, prog: prog, lrc: lrc, lrcAr: lrcAr };
var audio = new Aud(mDatas);
audio.play();
fscreen.fs('mama', 'fsbtn');
var resizeObserver = new ResizeObserver(() => {
msvg.style.setProperty('--xx', mama.clientWidth + 100 + 'px');
dr.sets({x: mama.clientWidth / 2 - 50, y: mama.clientHeight - 140});
});
resizeObserver.observe(mama);
</script>
这是11月27日做的，不好意思。 https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif 梦江南 发表于 2024-12-10 10:28
这是11月27日做的，不好意思。
做帖只是生活调剂不能当任务看。 起个网名好难 发表于 2024-12-10 10:38
谢谢老师支持，问好！ 起个网名好难 发表于 2024-12-10 10:39
做帖只是生活调剂不能当任务看。
从现在起要慢慢做了，不能当任务做了。 梦江南 发表于 2024-12-10 11:33
从现在起要慢慢做了，不能当任务做了。
欣赏为主，点几个赞就够了。 可爱的一对老人，童话小说一样美 起个网名好难 发表于 2024-12-10 11:45
欣赏为主，点几个赞就够了。
嗯，知道了。 世外桃源 发表于 2024-12-10 13:06
可爱的一对老人，童话小说一样美
谢谢世外桃源元老分享支持。
这让我想到了金婚。 愤怒的葡萄 发表于 2024-12-10 13:42
这让我想到了金婚。
一对夫妻要走到金婚也不是容易的。
谢谢愤怒的葡萄分享。
梦江南 发表于 2024-12-10 13:46
一对夫妻要走到金婚也不是容易的。
谢谢愤怒的葡萄分享。
我爸爸妈妈离金婚还有四五年的时间，两人是在79年结婚的。 很温暖的画面。才发现这个效果手机看也很完美。
我很少手机来论坛，今天在现场，下一个会还有点空档。就来看看，感觉帖子很漂亮啊{:4_187:} 江南真不容易，欣赏好帖。{:4_187:}
身体没问题吧，你的健康是更重要的事{:4_185:} 愤怒的葡萄 发表于 2024-12-10 13:51
我爸爸妈妈离金婚还有四五年的时间，两人是在79年结婚的。
到时候你就要给爸妈庆祝庆祝。五十年不容易啊！ 红影 发表于 2024-12-10 14:06
很温暖的画面。才发现这个效果手机看也很完美。
我很少手机来论坛，今天在现场，下一个会还有点空档。就来 ...
问好影子，这是11月27日做的，今天才发，不好意思。{:4_204:} 梦江南 发表于 2024-12-10 14:12
到时候你就要给爸妈庆祝庆祝。五十年不容易啊！
TA们夫妻感情是很好的，虽然我爸爸事业上不是很成功的，一辈子没赚到大钱，但是在我有记忆之后，TA们没有吵过架。我爸爸很迁就我妈妈的，在我们镇上我爸爸妈妈人设形象是很好的。我们家在镇上叔叔阿姨眼里我们家算是好人家的。 红影 发表于 2024-12-10 14:07
江南真不容易，欣赏好帖。
身体没问题吧，你的健康是更重要的事
血压不高，就没事了。医嘱就是叫我不要紧张。 红影 发表于 2024-12-10 14:06
很温暖的画面。才发现这个效果手机看也很完美。
我很少手机来论坛，今天在现场，下一个会还有点空档。就来 ...
这个帖子制作得挺漂亮的，我现在很少来论坛了。
花潮论坛是一个很安静的网络港湾，一个很宁静的桃花源，我有时候偶尔会来论坛看看帖子的，只是来得很少了。