非有非空 (DJ默涵版)
本帖最后由 醉美水芙蓉 于 2023-6-25 17:52 编辑 <br /><br /><style>#papa {margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://pic.imgdb.cn/item/64959c381ddac507cc1a9a83.jpg')no-repeat center / cover; ;
box-shadow: 0 0 8px #000;
display: grid;
place-items: center;
position: relative;
overflow: hidden;
--state: paused;
}
#vid1 {
position: absolute;
width: 600px;
height: 130%;
border-radius: 2%;
opacity: .96;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
transform: rotate(180deg);
}
#vid2 {
position: absolute;
width: 1400px;
height: 100%;
border-radius: 2%;
object-fit: cover;
pointer-events: none;
mix-blend-mode: screen;
z-index: 2;
}
.mybox {
position: absolute;
width: 350px;
height: 350px;
right: 30px;
top: -30px;
z-index: 5;
background:url('') no-repeat center/cover;
transform: rotate( -180deg);
clip-path: polygon(50.00% 71.21%, 50.00% 71.27%, 50.01% 71.44%, 50.04% 71.74%, 50.09% 72.14%, 50.18% 72.66%, 50.31% 73.27%, 50.49% 73.99%, 50.72% 74.78%, 51.02% 75.66%, 51.39% 76.60%, 51.83% 77.60%, 52.35% 78.64%, 52.95% 79.72%, 53.63% 80.81%, 54.40% 81.91%, 55.26% 83.01%, 56.21% 84.09%, 57.24% 85.13%, 58.36% 86.14%, 59.56% 87.09%, 60.83% 87.97%, 62.19% 88.77%, 63.61% 89.49%, 65.10% 90.12%, 66.64% 90.64%, 68.23% 91.05%, 69.86% 91.34%, 71.53% 91.52%, 73.22% 91.57%, 74.92% 91.49%, 76.62% 91.29%, 78.33% 90.96%, 80.01% 90.50%, 81.67% 89.92%, 83.29% 89.22%, 84.86% 88.40%, 86.38% 87.47%, 87.82% 86.43%, 89.20% 85.29%, 90.48% 84.06%, 91.67% 82.74%, 92.76% 81.35%, 93.74% 79.88%, 94.60% 78.35%, 95.34% 76.76%, 95.95% 75.12%, 96.44% 73.45%, 96.78% 71.74%, 96.99% 70.01%, 97.06% 68.26%, 96.99% 66.50%, 96.78% 64.74%, 96.44% 62.97%, 95.95% 61.21%, 95.34% 59.45%, 94.60% 57.71%, 93.74% 55.99%, 92.76% 54.28%, 91.67% 52.58%, 90.48% 50.91%, 89.20% 49.27%, 87.82% 47.64%, 86.38% 46.03%, 84.86% 44.45%, 83.29% 42.88%, 81.67% 41.34%, 80.01% 39.82%, 78.33% 38.31%, 76.62% 36.83%, 74.92% 35.36%, 73.22% 33.90%, 71.53% 32.46%, 69.86% 31.04%, 68.23% 29.64%, 66.64% 28.25%, 65.10% 26.87%, 63.61% 25.52%, 62.19% 24.18%, 60.83% 22.87%, 59.56% 21.58%, 58.36% 20.32%, 57.24% 19.09%, 56.21% 17.90%, 55.26% 16.74%, 54.40% 15.62%, 53.63% 14.54%, 52.95% 13.52%, 52.35% 12.55%, 51.83% 11.64%, 51.39% 10.79%, 51.02% 10.00%, 50.72% 9.29%, 50.49% 8.65%, 50.31% 8.09%, 50.18% 7.61%, 50.09% 7.21%, 50.04% 6.90%, 50.01% 6.68%, 50.00% 6.54%, 50.00% 6.50%, 50.00% 6.54%, 49.99% 6.68%, 49.96% 6.90%, 49.91% 7.21%, 49.82% 7.61%, 49.69% 8.09%, 49.51% 8.65%, 49.28% 9.29%, 48.98% 10.00%, 48.61% 10.79%, 48.17% 11.64%, 47.65% 12.55%, 47.05% 13.52%, 46.37% 14.54%, 45.60% 15.62%, 44.74% 16.74%, 43.79% 17.90%, 42.76% 19.09%, 41.64% 20.32%, 40.44% 21.58%, 39.17% 22.87%, 37.81% 24.18%, 36.39% 25.52%, 34.90% 26.87%, 33.36% 28.25%, 31.77% 29.64%, 30.14% 31.04%, 28.47% 32.46%, 26.78% 33.90%, 25.08% 35.36%, 23.38% 36.83%, 21.67% 38.31%, 19.99% 39.82%, 18.33% 41.34%, 16.71% 42.88%, 15.14% 44.45%, 13.62% 46.03%, 12.18% 47.64%, 10.80% 49.27%, 9.52% 50.91%, 8.33% 52.58%, 7.24% 54.28%, 6.26% 55.99%, 5.40% 57.71%, 4.66% 59.45%, 4.05% 61.21%, 3.56% 62.97%, 3.22% 64.74%, 3.01% 66.50%, 2.94% 68.26%, 3.01% 70.01%, 3.22% 71.74%, 3.56% 73.45%, 4.05% 75.12%, 4.66% 76.76%, 5.40% 78.35%, 6.26% 79.88%, 7.24% 81.35%, 8.33% 82.74%, 9.52% 84.06%, 10.80% 85.29%, 12.18% 86.43%, 13.62% 87.47%, 15.14% 88.40%, 16.71% 89.22%, 18.33% 89.92%, 19.99% 90.50%, 21.67% 90.96%, 23.38% 91.29%, 25.08% 91.49%, 26.78% 91.57%, 28.47% 91.52%, 30.14% 91.34%, 31.77% 91.05%, 33.36% 90.64%, 34.90% 90.12%, 36.39% 89.49%, 37.81% 88.77%, 39.17% 87.97%, 40.44% 87.09%, 41.64% 86.14%, 42.76% 85.13%, 43.79% 84.09%, 44.74% 83.01%, 45.60% 81.91%, 46.37% 80.81%, 47.05% 79.72%, 47.65% 78.64%, 48.17% 77.60%, 48.61% 76.60%, 48.98% 75.66%, 49.28% 74.78%, 49.51% 73.99%, 49.69% 73.27%, 49.82% 72.66%, 49.91% 72.14%, 49.96% 71.74%, 49.99% 71.44%, 50.00% 71.27%, 50.00% 71.21%);
}
#lrc {--motion: cover2;--tt: 2s;--bg: linear-gradient(180deg, hsla(60, 50%, 50%, .45), hsla(80, 70%, 50%, .6));position: absolute;left: 50%;bottom: 20px;transform: translate(-50%);font: bold 2em sans-serif;color: hsl(0, 10%, 90%);white-space: pre;-webkit-background-clip: text;filter: drop-shadow(1px 1px 2px hsla(0, 0%, 0%, .95));}
#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: CornflowerBlue;overflow: hidden;white-space: pre;background: var(--bg);filter: inherit;-webkit-background-clip: text;animation: var(--motion) var(--tt) linear forwards var(--state);}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
@keyframes rot { to { transform: rotate(360deg); } }
css-doodle { position: absolute; }</style><div id="papa"><css-doodle id="mplayer">
:doodle { @size: 160px; left: 50px; top: 5px;animation: rot 6s infinite linear var(--state); cursor: pointer; }
background: rgba(255,100,0,.7);
clip-path: @shape(
points: 300;
scale: .25;
x: 2 * cos(t) + cos(8t);
y: 2 * sin(t) - sin(8t);
);
</css-doodle><div class="mybox"><video id="vid1" src="https://img.tukuppt.com/video_show/2405811/00/02/05/5b4f95c2beae1.mp4" autoplay="" loop="" muted=""></video></div><div id="lrc" data-lrc="HUACHAO">HUACHAO</div><video id="vid2" src="https://img.tukuppt.com/video_show/2475824/00/01/98/5b4f6ad8c202a.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="https://www.qqmc.com/mp3/music270414021.mp3" autoplay="autoplay" loop="loop"></audio><script>(function() {
let mKey = 0, mFlag = true, slip = 0;
let lrcAr = [
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
,
];
let script = document.createElement('script');
script.src = 'https://638183.freep.cn/638183/web/api/css-doodle.js';
document.body.appendChild(script);
let mState = () => aud.paused ? (papa.style.setProperty('--state','paused'), vid1.pause(), vid2.pause()) : (papa.style.setProperty('--state','running'),vid1.play(), vid2.play());
aud.addEventListener('play', mState, false);
aud.addEventListener('pause', mState, false);
mplayer.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('seeked', () => calcKey());
let showLrc = (time) => {let name = mFlag ? 'cover1' : 'cover2';lrc.innerHTML = lrcAr;lrc.dataset.lrc = lrcAr.replace(/<br>/, 'n');lrc.style.setProperty('--motion', name);lrc.style.setProperty('--tt', time + 's');papa.style.setProperty('--state', 'running');mKey += 1;mFlag = !mFlag;};let calcKey = () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime <= lrcAr) {mKey = j - 1;break;}}if (mKey < 0) mKey = 0;if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;let time = lrcAr - (aud.currentTime - lrcAr);showLrc(time);};
aud.addEventListener('timeupdate', () => {for (j = 0; j < lrcAr.length; j++) {if (aud.currentTime >= lrcAr) {cKey = j;if (mKey === j) showLrc(lrcAr);else continue;}}});
})();</script>
这个是真漂亮，心形里给了个十分靓眼的视频，歌曲欢快，节奏感极强，好听{:4_187:} 南无月 发表于 2023-6-24 22:19
这个是真漂亮，心形里给了个十分靓眼的视频，歌曲欢快，节奏感极强，好听
这个跟着你学得呢！你的播放器挺多的！ 欣赏聆听! 这个心形剪裁也做得很漂亮呢。歌曲好听，制作美妙。欣赏水芙蓉美女好帖{:4_187:} 镂空，视频以心形出现。
这个实现法，也可以不用镂空，直接用polygon裁剪视频 红影 发表于 2023-6-24 23:23
这个心形剪裁也做得很漂亮呢。歌曲好听，制作美妙。欣赏水芙蓉美女好帖
谢谢红影美女点评！ 马黑黑 发表于 2023-6-24 23:38
镂空，视频以心形出现。
这个实现法，也可以不用镂空，直接用polygon裁剪视频
还没有学会呢？黑黑老师这个视频是倒的，如何调过来？ 醉美水芙蓉 发表于 2023-6-25 06:39
还没有学会呢？黑黑老师这个视频是倒的，如何调过来？
你是有canvas画布还原视频的，canvas也是一个HTML元素，你要旋转它，就用 transform: rotate(xxdeg); ，例如你要旋转180度：
transform: rotate(180deg); 马黑黑 发表于 2023-6-25 07:46
你是有canvas画布还原视频的，canvas也是一个HTML元素，你要旋转它，就用 transform: rotate(xxdeg); ， ...
那这样是不是只能跟着心形图形旋转了？ 醉美水芙蓉 发表于 2023-6-25 11:49
那这样是不是只能跟着心形图形旋转了？
你试试看才知道 醉美水芙蓉 发表于 2023-6-25 06:37
谢谢红影美女点评！
客气了，这个制作真漂亮{:4_187:} 醉美水芙蓉 发表于 2023-6-24 22:37
这个跟着你学得呢！你的播放器挺多的！
小播都是从我发的素材网站里找的，代码替换就有了{:4_187:} 南无月 发表于 2023-6-25 17:32
小播都是从我发的素材网站里找的，代码替换就有了
哪一个我怎么没有看到呢？ 醉美水芙蓉 发表于 2023-6-25 17:43
哪一个我怎么没有看到呢？
https://www.huachaowang.com/forum.php?mod=viewthread&tid=69063&extra=page%3D2
这里第一个网站，图案
https://css-doodle.com/shapes/#collection css-doodle图案网站
小播代码：
clip-path: @shape( fill-rule: evenodd; split: 200; scale: .45; x: cos(2t) + cos(π - 5t); y: sin(2t) + sin(π - 5t); ); 进去后直接点最大的那个图案，就看到集子了 马黑黑 发表于 2023-6-25 07:46
你是有canvas画布还原视频的，canvas也是一个HTML元素，你要旋转它，就用 transform: rotate(xxdeg); ， ...
谢谢黑黑老师瞎折腾成功了！ 南无月 发表于 2023-6-25 17:49
进去后直接点最大的那个图案，就看到集子了
谢谢月儿！真的有好多！ 醉美水芙蓉 发表于 2023-6-25 17:54
谢谢黑黑老师瞎折腾成功了！
尝试总会有所收获 醉美水芙蓉 发表于 2023-6-25 17:55
谢谢月儿！真的有好多！
不客气，玩得开心哈{:4_187:}
页:
[1]
2