蔡依林·心型圈
本帖最后由 马黑黑 于 2024-11-25 12:43 编辑 <br /><br /><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://638183.freep.cn/638183/t24/webp2/cyl.webp') no-repeat center/ cover; }
#player { cursor: pointer; transition: .7s; animation: flash .5s linear infinite var(--state); }
#player:hover { opacity: .6; }
#prog { bottom: 20px; width: 280px; --bg1: white; --bg2: lightblue; --color: white; }
#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
#lrc { top: 30px; color: lightblue; --bg: linear-gradient(rgba(0,250,250,.05),rgba(0,250,250,.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=209722"></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?v=1';
var dr = Dr.dr('msvg');
dr.symbol('sy1', '-200 -200 400 400');
dr.path('M0 -100 C350 -300,100 0,0 180 C-100 0,-350 -300,0 -100', 'fuchsia').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>
本帖最后由 马黑黑 于 2024-11-25 12:45 编辑 <br /><br /><h2>帖子代码</h2>
<div id="hEdiv"><pre id="hEpre">
<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://638183.freep.cn/638183/t24/webp2/cyl.webp') no-repeat center/ cover; }
#player { cursor: pointer; transition: .7s; animation: flash .5s linear infinite var(--state); }
#player:hover { opacity: .6; }
#prog { bottom: 20px; width: 280px; --bg1: white; --bg2: lightblue; --color: white; }
#prog::before { width: 100%; height: 40px; left: 0; top: -30px; }
#lrc { top: 30px; color: lightblue; --bg: linear-gradient(rgba(0,250,250,.05),rgba(0,250,250,.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=209722"></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 C350 -300,100 0,0 180 C-100 0,-350 -300,0 -100', 'fuchsia').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>
</pre></div>
<script type="module">
import hlight from 'https://638183.freep.cn/638183/web/mod/helight.js';
hlight.hl(hEdiv, hEpre);
</script> 关于svg动画：
心形小图案自左上小部分向右上、大部分向右下做非直线运动。实现方法是综合性的——
（一）CSS动画 @keyframes move 选择器中设计运动为先旋转（rotate）一定角度再往右平移（translate），这会令元素做弧线运动，代码在第 13 行；
（二）svg内部子元素的运动缺省默认以svg画布左上角（0，0）为原点，要让子元素以自身中心为运动原点，需要在CSS中设置相关属性，transform-box、transform-origin，代码在第 12 行，对实例化标签 use 所做的设置（心形图标都是use标签呈现出来的）；
（三）运动需要错落有致，心型图案不同同步，否则没有美感，这需要几方配合：一是 animation 属性设计了几个CSS变量（代码第 12 行）、动画 move 也同样设计有CSS变量（代码第 13 行），然后在JS中每一个实例化心型图标使用 style 方式给出这些变量具体的随机值（代码第 37 行）；
（四）播放控制器也是实例化 symbol 模板的产品，它略大一些，运行一个闪烁动画，就不跟其他心型图标乱跑了，它得专注，坚守工位，不过它也有一定的自由度，试试切换全屏/正常显示模式看看……这是 transition 属性的效果。
另外，全屏对 transform 的 translate 考验人，因为 translate 接受的平移距离得使用实体单位（px），因此需要放置一个元素尺寸观察器 resizeObserver，它在观察元素尺寸变化时，任何被观察对象的尺寸改动都会同步修改 translate 所需的平移距离，同时设置播放控制器的位置，观察的对象是帖子容器 mama，代码在98 - 102 行。
还有，第 100 行，svgdr 修改的是播放控制器的 x、y 属性。注意，dr.sets({...}) 的上文在第 39 行，这是 dr 最后一次静态作画，第 100 行是基于它所返回的最后一个元素对象。 如果看不到心型图案，原因可能是JS资源最近有更新。请硬刷新本页面（Ctrl + F5），再软刷新（F5） 新创作层出不穷！{:4_208:} 蔡依林的歌曲我听得不是很多，TA有小天后的称呼的。 欣赏老师精美的新作：蔡依林·心型圈。学习了！{:4_187:} 马老师辛苦了，谢谢老师深度分享
如果歌词不限于花潮格式，就更趋完美{:4_191:} 四个插件排列得整整齐齐，为完整音画作品保驾护航。。。全面又美观。。赞叹。。{:4_199:} 感觉这个贴子下了大功夫。。
无论是画面、还是歌曲到代码，都顶级。。综合性好强啊。。 马黑黑 发表于 2024-11-25 13:09
关于svg动画：
心形小图案自左上小部分向右上、大部分向右下做非直线运动。实现方法是综合性的——
所以这里的动态变化更加丰富，可以角度加平移，还有延迟的设置及显示时间，保证错落下降，美感十足。。
这里'sy1', -100, 100, size, size)可以用size{:4_173:}
长宽都同时调用上面size的计算，所以心型大小也随机。。
反正看了就是开眼界 马黑黑 发表于 2024-11-25 13:09
关于svg动画：
心形小图案自左上小部分向右上、大部分向右下做非直线运动。实现方法是综合性的——
试了一下全屏切正常，那个漂亮的小播按纽还真会从远处跑回它的岗位。。
这跟之前有阵子七彩色的贴子全屏时小播回跑类似。。好玩得很。。
原来是98-102代码实现的，正瞅着这段面生。。{:4_170:}
触碰小播时有点点透明度变化，这里到是不太明显。 这才是音画贴子中的顶配吧，好象之前还说错了。。{:4_173:}
这个画面还是要夸一个，
不得不说这个视频的舞台效果，清晰度都比熊猫好。。
氛围感很强，舞台效果聚光灯下，这个万众瞩目的焦点。。
歌曲好听，歌词感人。。。深情款款。。 先去看了全屏下的小播可以自动归位，很有趣。感谢去学习这个新功能{:4_187:} 红影 发表于 2024-11-25 20:44
先去看了全屏下的小播可以自动归位，很有趣。感谢去学习这个新功能
学习需要感谢{:4_170:} 愤怒的葡萄 发表于 2024-11-25 13:53
蔡依林的歌曲我听得不是很多，TA有小天后的称呼的。
曾经火了很长时间 梦江南 发表于 2024-11-25 17:33
欣赏老师精美的新作：蔡依林·心型圈。学习了！
{:4_190:} 花飞飞 发表于 2024-11-25 20:43
这才是音画贴子中的顶配吧，好象之前还说错了。。
这个画面还是要夸一个，
不得不说这个视频的 ...
这歌其实很老了，当时很多人都被 love love love 迷住了忽略了很多 花飞飞 发表于 2024-11-25 20:39
试了一下全屏切正常，那个漂亮的小播按纽还真会从远处跑回它的岗位。。
这跟之前有阵子七彩色的贴子全屏 ...
这个观察者api特管用 花飞飞 发表于 2024-11-25 20:33
所以这里的动态变化更加丰富，可以角度加平移，还有延迟的设置及显示时间，保证错落下降，美感十足。。
...
设计其实还算简单，实现过程略显复杂