《千年之约》（学习黑黑《冰封之舞》代码）
<style>
#pa { margin: 30px 0; left: calc(50% - 81px); transform: translateX(-50%); width: clamp(600px, 90vw, 1400px); height: auto; aspect-ratio: 16/9; background: url('https://pic1.imgdb.cn/item/6884745c58cb8da5c8e15350.jpg') no-repeat center/cover; box-shadow: 2px 2px 8px #000; z-index: 1; overflow: hidden; perspective: 800px; display: grid; place-items: center; position: relative; border-radius: 28px; border: thick double #2a2f79; }
#btnFs { top: 20px; right: 40px; color: #bbb; }
#ma { position: absolute; aspect-ratio: 1/1; width: 25%; left: 16%; cursor: pointer; transform-style: preserve-3d; animation: rot 18s linear infinite var(--state); }
#ma:hover .son { filter: hue-rotate(320deg); }
.son { position: absolute; left: 50%; width: 42%; height: 77%; background: url('https://pic1.imgdb.cn/item/6884781d58cb8da5c8e15e84.png') no-repeat center/ 50% 100%; border: 1px solid tan; border-radius: 54% 46% 93% 7% / 93% 41% 59% 7%; transform-origin: 0% 100%; transform: rotateY(var(--a)) rotateX(22deg); box-shadow: inset 0 0 20px #fbbcdd, 1px 1px 8px snow; transition: .75s; }
.son::before { position: absolute; content: ''; left: -100%; top: 100%; width: 100%; height: 100%; background: inherit; border: inherit; border-radius: inherit; box-shadow: inherit; filter: grayscale(1) opacity(0.25); transform: scale(-1, -1); }
.vid {position: absolute; width: 100%; height: 115%; bottom: 0; object-fit: cover; mask: radial-gradient(transparent 20%, red); -webkit-mask: radial-gradient(transparent 20%, red); opacity: .55; pointer-events: none; }
.pTitle { width: 1em; height: 60%; line-height: 2em; color: transparent; font-family: SimHei, NSimSun, 'Microsoft YaHei'; font-size: 40px; font-weight: bold; text-align: center; margin: auto; z-index: 10; position: absolute; left: 46%;top: 20%; writing-mode: vertical-rl; transform: rotateX(20deg) rotateY(35deg) rotateZ(12deg); }
.sp { animation: flashTitle 6s linear infinite var(--state); }
.pTitle span:nth-child(1) { animation-delay: 0s;}
.pTitle span:nth-child(2) {animation-delay: 0.7s; }
.pTitle span:nth-child(3) {animation-delay: 1.4s; }
.pTitle span:nth-child(4) { animation-delay: 2.1s; }
.pTitle span:nth-child(5) { animation-delay: 4.2s; }
@keyframes flashTitle {0%,100% {color: white; text-shadow: 2px 2px 20px coral, 2px 2px 30px Orange, 2px 2px 40px Orange, 2px 2px 50px Orange, 2px 2px 60px Orange, 2px 2px 70px Orange, 2px 2px 80px coral; }
50% { color: transparent; text-shadow: none; } }
@keyframes rot { to { transform: rotateY(360deg); } }
</style>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=456510586" autoplay loop></audio>
<video class="vid" src="https://bpic.588ku.com/video_listen/588ku_video/22/11/05/13/11/58/video6365f09e5b70c.mp4" autoplay loop muted></video>
<video class="vid" src="https://video.699pic.com/videos/48/99/63/a_JQ9bv8G8yWXj1560489963_10s.mp4" autoplay loop muted></video>
<div id="ma"></div>
<div class="pTitle">
<span class="sp">千</span>
<span class="sp">年</span>
<span class="sp">之</span>
<span class="sp">约</span>
<span class="sp"></span>
</div>
</div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
const tt = 10;
for (var i = 0; i < tt; i ++) {
const d = document.createElement('div');
const c1 = Math.random().toString(16).substring(2, 8), c2 = Math.random().toString(16).substring(2, 8);
d.className = 'son';
d.style.cssText += `--a: ${i * 360 / tt}deg;`;
ma.appendChild(d);
}
</script> 将这份情感敬告天地，让千年的爱恋由此展开。
在天地间的两个人影虽然小了点，情感却很浓，在天地间飘荡{:4_173:} 把图形的x也给了个角度，想配合背景图的形状。谢谢黑黑代码@马黑黑 {:4_187:} 去找歌，才头一次听到韩红的这首歌，发现这首歌还很好听，边学习边还听了首好歌呢。{:4_173:} 如梦如幻，美轮美奂，好帖 马黑黑 发表于 2025-7-27 21:54
如梦如幻，美轮美奂，好帖
谢谢黑黑，主要你这个代码效果十分美{:4_187:} 红影 发表于 2025-7-27 22:09
谢谢黑黑，主要你这个代码效果十分美
多重效果融合在一起还是需要一些创造力的 视听盛宴，精彩分享，问好影子{:4_171:} 马黑黑 发表于 2025-7-27 22:20
多重效果融合在一起还是需要一些创造力的
跟着你帖子里的调色方式，调出来的自己还挺喜欢{:4_173:} 杨帆 发表于 2025-7-27 22:38
视听盛宴，精彩分享，问好影子
谢谢杨帆鼓励，我一边做帖子，还听了首喜欢的歌{:4_173:} 红影 发表于 2025-7-27 22:51
谢谢杨帆鼓励，我一边做帖子，还听了首喜欢的歌
挺好，喜上加喜，双丰收{:4_204:} 红影 发表于 2025-7-27 22:50
跟着你帖子里的调色方式，调出来的自己还挺喜欢
很多人认为渐变或图像无法和纯色融合。这是认识误区。颜色要放在后面而不是前面。
很多时候我们会把背景颜色放前面，那是不需要融合的情形，颜色的作用主要是防备将来图片失效了整体显示效果还可以基本保持，或者是为了遮罩需要。 http://mhh.52qingyin.cn/art/bshow.php?st=6&sd=6&art=mahei_1753629420 红玫瑰的倒影做得真美。 这首歌配上这幅画，很融合，韩红的这首歌专为您而唱。太赞了！{:4_187:} 杨帆 发表于 2025-7-27 23:05
挺好，喜上加喜，双丰收
谢谢，还是很开心的{:4_173:} 马黑黑 发表于 2025-7-27 23:15
很多人认为渐变或图像无法和纯色融合。这是认识误区。颜色要放在后面而不是前面。
很多时候我们会把背 ...
是的，以前做底图的时候也是在前面放背景色的，原来放在图像后面就可以融合了{:4_187:} 马黑黑 发表于 2025-7-27 23:19
http://mhh.52qingyin.cn/art/bshow.php?st=6&sd=6&art=mahei_1753629420
被黑黑收录了，真的太荣幸了{:4_187:} 梦油 发表于 2025-7-28 09:59
红玫瑰的倒影做得真美。
那倒影是代码里的，是黑黑设计的{:4_204:} 梦江南 发表于 2025-7-28 10:03
这首歌配上这幅画，很融合，韩红的这首歌专为您而唱。太赞了！
这歌十年前的，我却是刚听到，借做贴的便利听到的{:4_173:}