心中有海（学习黑师桃心形剪切效果）
<style>#papa {
margin: 0 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: tan url('https://pic.imgdb.cn/item/644e15620d2dde5777cc3642.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;
}
#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: 600px;
height: 600px;
right: 30px;
top: 3px;
z-index: 5;
background:url('') no-repeat center/cover;
transform: rotate( -180deg);
clip-path: polygon(50.00% 71.21%, 50.01% 71.44%, 50.09% 72.14%, 50.31% 73.27%, 50.72% 74.78%, 51.39% 76.60%, 52.35% 78.64%, 53.63% 80.81%, 55.26% 83.01%, 57.24% 85.13%, 59.56% 87.09%, 62.19% 88.77%, 65.10% 90.12%, 68.23% 91.05%, 71.53% 91.52%, 74.92% 91.49%, 78.33% 90.96%, 81.67% 89.92%, 84.86% 88.40%, 87.82% 86.43%, 90.48% 84.06%, 92.76% 81.35%, 94.60% 78.35%, 95.95% 75.12%, 96.78% 71.74%, 97.06% 68.26%, 96.78% 64.74%, 95.95% 61.21%, 94.60% 57.71%, 92.76% 54.28%, 90.48% 50.91%, 87.82% 47.64%, 84.86% 44.45%, 81.67% 41.34%, 78.33% 38.31%, 74.92% 35.36%, 71.53% 32.46%, 68.23% 29.64%, 65.10% 26.87%, 62.19% 24.18%, 59.56% 21.58%, 57.24% 19.09%, 55.26% 16.74%, 53.63% 14.54%, 52.35% 12.55%, 51.39% 10.79%, 50.72% 9.29%, 50.31% 8.09%, 50.09% 7.21%, 50.01% 6.68%, 50.00% 6.50%, 49.99% 6.68%, 49.91% 7.21%, 49.69% 8.09%, 49.28% 9.29%, 48.61% 10.79%, 47.65% 12.55%, 46.37% 14.54%, 44.74% 16.74%, 42.76% 19.09%, 40.44% 21.58%, 37.81% 24.18%, 34.90% 26.87%, 31.77% 29.64%, 28.47% 32.46%, 25.08% 35.36%, 21.67% 38.31%, 18.33% 41.34%, 15.14% 44.45%, 12.18% 47.64%, 9.52% 50.91%, 7.24% 54.28%, 5.40% 57.71%, 4.05% 61.21%, 3.22% 64.74%, 2.94% 68.26%, 3.22% 71.74%, 4.05% 75.12%, 5.40% 78.35%, 7.24% 81.35%, 9.52% 84.06%, 12.18% 86.43%, 15.14% 88.40%, 18.33% 89.92%, 21.67% 90.96%, 25.08% 91.49%, 28.47% 91.52%, 31.77% 91.05%, 34.90% 90.12%, 37.81% 88.77%, 40.44% 87.09%, 42.76% 85.13%, 44.74% 83.01%, 46.37% 80.81%, 47.65% 78.64%, 48.61% 76.60%, 49.28% 74.78%, 49.69% 73.27%, 49.91% 72.14%, 49.99% 71.44%, 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 grid="1" id="mplayer">:doodle { @size: 160px; cursor: pointer; left: 50px; top: 5px; opacity: .96;z-index: 4;}clip-path: @shape(points: 178;rotate: -90;scale: .25;move: 0 4.5;x: 3.4129*sin(2t)/cos(t)*cos(2t);y: cos(t)*(2.4 - sin(x^x*1.5)););background: linear-gradient(DeepSkyBlue,RoyalBlue,MediumPurple);animation: rot 1s infinite alternate linear var(--state); @keyframes rot { to { transform: rotate(6deg); } }</css-doodle><div class="mybox"><video id="vid1" src="https://img.tukuppt.com/video_show/2269348/00/01/46/5b436b6912cd6.mp4" autoplay="" loop="" muted=""></video></div><div id="lrc" data-lrc="HUACHAO">HUACHAO</div><video id="vid2" src="https://img.tukuppt.com/video_show/2269348/00/14/14/5e1bbec819c90.mp4" autoplay="" loop="" muted=""></video></div><audio id="aud" src="https://music.163.com/song/media/outer/url?id=115857" 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> 醉美水芙蓉 发表于 2023-6-24 17:43
欣赏月儿美贴！
{:4_187:}谢谢水芙蓉支持哦 月月这个心超级大的，效果特别棒{:4_178:} 看见大心的路径都这么多数据，小辣椒不会只能过几天 抄作业了{:4_189:}
月月学霸的{:4_170:} 吃饭去了，回见 这些动态效果，带给人很奇妙的感受，那个播放器按钮和心形都很奇特，很有想象力。月儿的小脑袋太灵了{:4_199:} 心中的宇宙 制作的精美，欣赏点赞！{:4_178:} 来欣赏学霸的精彩之作了{:4_187:} 看点多多，越看越美啊{:4_178:}{:4_199:} 小辣椒 发表于 2023-6-24 18:40
月月这个心超级大的，效果特别棒
歌名是心中有宇宙啊，得大些{:4_170:} 小辣椒 发表于 2023-6-24 18:41
看见大心的路径都这么多数据，小辣椒不会只能过几天 抄作业了
月月学霸的
这个是直接抄黑黑桃心形五楼的代码做的 贴子，数据是自动生成的{:4_173:} 小辣椒 发表于 2023-6-24 18:42
吃饭去了，回见
好的小辣椒，回见哦 红影 发表于 2023-6-24 19:08
这些动态效果，带给人很奇妙的感受，那个播放器按钮和心形都很奇特，很有想象力。月儿的小脑袋太灵了{:4_19 ...
谢谢影子鼓励，桃心形剪出来挺漂亮，就试了这个贴子{:4_170:} 马黑黑 发表于 2023-6-24 19:34
心中的宇宙
这歌头一回听，搜一下还真有{:4_173:} 梦缘 发表于 2023-6-24 20:31
制作的精美，欣赏点赞！
感谢梦缘支持鼓励{:4_187:} 千羽 发表于 2023-6-24 20:45
来欣赏学霸的精彩之作了
{:4_170:}千羽大帅你来了，过来给我瞧瞧 千羽 发表于 2023-6-24 20:47
看点多多，越看越美啊
美得很，千羽你赔我 {:4_170:}