[黑师代码】算不算相拥（学习黑师20250808《大雅无曲》图片隐现效果）
本帖最后由 花飞飞 于 2025-8-10 10:00 编辑 <br /><br /><style>@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 0px; left: calc(50% - 91px);width: clamp(600px, 90vw, 1800px); height: auto; aspect-ratio: 18/9;--bg: url('https://642303.freep.cn/642303/tu/20208099ding01.jpg') no-repeat center/cover; --ma-size: 7%; --rot: 0; }
#pa::before { position: absolute; content: url('https://642303.freep.cn/642303/tu/0810gai05.png'); top:1px; transform: rotate(var(--rot)); opacity: 0; transition: 1.6s; }
#pa:hover::before { opacity: .6; }
#ma { bottom: 36%;left:76%; opacity: .3;}
#ma::after { position: absolute; content: '';left: 0; top: 0; right: 0; bottom: 0; background: repeating-conic-gradient(#d59999, transparent, #934e4e 10%), url('https://638183.freep.cn/638183/t22/gif/121.gif'); background-blend-mode: screen; clip-path: url(#svgPath); }
#btnFs { bottom: -120px; color: #eee; }
.mypic {
position: absolute;
left:18%;
top:18%;
cursor: pointer;
mix-blend-mode: Multiply;
z-index: 3;
}
.pd-vid {
position: absolute;
width: 90%;
height:90%;
object-fit: cover;
pointer-events: none;
right:-25%;
bottom:-6%;
mix-blend-mode:soft-light;
-webkit-mask: radial-gradient(circle, cyan, cyan,rgba(0,0,0,.95),transparent, transparent, transparent, transparent, transparent);
z-index: 2;
opacity: .95;
}
</style>
<svg width="0" height="0">
<clipPath id="svgPath" clipPathUnits="objectBoundingBox">
<path d="M1,0.5 Q0.484,0.5,0.879,0.826 Q0.484,0.5,0.574,1 Q0.484,0.5,0.227,0.94 Q0.484,0.5,0,0.674 Q0.484,0.5,0,0.326 Q0.484,0.5,0.227,0.06 Q0.484,0.5,0.574,0 Q0.484,0.5,0.879,0.174 Q0.484,0.5,1,0.5" />
</clipPath>
</svg>
<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=2009565839" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/2269348/00/01/76/5b49bc5427869.mp4" autoplay loop muted></video>
<div id="ma" class="sepia"></div>
</div>
<div class="mypic"><img src="http://kkshan.com/data/attachment/forum/202412/22/185517gclz9lzqcokzqcuz.gif" alt="" /></div>
<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
var clickNum = 0;
const clickCircle = (e, r = 70) => {
var cx = pa.clientWidth / 2 + 20, cy = pa.clientHeight / 2 - 40, px = e.offsetX, py = e.offsetY;
return (cx - px) ** 2 + (cy - py) ** 2 < r ** 2;
};
pa.onmousemove = (e) => pa.style.cursor = clickCircle(e) ? 'pointer' : 'default';
pa.onclick = (e) => {
if (!clickCircle(e)) return;
clickNum ++;
pa.style.setProperty('--rot', clickNum + 'turn');
};
</script> @马黑黑
白老师来瞅瞅，昨天的图片隐现用在人物身上了。。触碰画面会给人物增加色彩
也会转圈{:4_170:} 好看！ 很好看！非常地漂亮{:4_187:}{:4_199:} 好像人物能出现，但不会转圈呢，也真的不应该让人物转圈{:4_173:} 这背景制作十分漂亮，字体设计也十分漂亮，小播用于补充文字效果，十分棒。{:4_199:}
出现的人物和原人物部分重叠，觉得不是很好，可能弄得大点虚点，放在斜上方，作为朦胧的存在？
当然每个人有字的设想，这个还是以飞飞自己的感觉为准{:4_187:} 小九 发表于 2025-8-9 20:12
好看！ 很好看！非常地漂亮
{:4_179:}小九来了，看到你真是开心，抱个哈 红影 发表于 2025-8-9 20:17
好像人物能出现，但不会转圈呢，也真的不应该让人物转圈
就是觉得不能让人转晕了，又想保留这个好玩的效果，
点击范围保留原贴的小猫脸，不太好找。。在左边肩膀{:4_170:} 花飞飞 发表于 2025-8-9 18:43
@马黑黑
白老师来瞅瞅，昨天的图片隐现用在人物身上了。。触碰画面会给人物增加色彩
也会转圈
转圈成功过一次，然后就不行了。另外，套影是不是有点小错位呢 红影 发表于 2025-8-9 20:21
这背景制作十分漂亮，字体设计也十分漂亮，小播用于补充文字效果，十分棒。
出现的人物和原人物 ...
嗯哪，影子很用心在看图，也有创意的想法
我原来也这么想过的，图片整大点虚点，去掉颜色后像剪影一样，试过发现色调不好搭，位置也不好放。。
原图人物色彩单调，就干脆改成给人物添色了。。{:4_204:} 马黑黑 发表于 2025-8-9 21:13
转圈成功过一次，然后就不行了。另外，套影是不是有点小错位呢
你看还错位么？发论坛里就感觉错位了，我加了TOP：2px才感觉不错位的 马黑黑 发表于 2025-8-9 21:13
转圈成功过一次，然后就不行了。另外，套影是不是有点小错位呢
是没摸到机关处{:4_173:} 花飞飞 发表于 2025-8-9 21:16
是没摸到机关处
藏的太深 马黑黑 发表于 2025-8-9 21:17
藏的太深
原来的猫脸位置。我没改
触摸点小了点，但也保证人不会一碰就转晕 花飞飞 发表于 2025-8-9 21:18
原来的猫脸位置。我没改
触摸点小了点，但也保证人不会一碰就转晕
{:4_196:} 马黑黑 发表于 2025-8-9 21:18
还错位么？之前往上，难道我改完又错位了？
还有，手机没办法两个一起缩小~~背景图可以缩放，小图就原大小 花飞飞 发表于 2025-8-9 21:21
还错位么？之前往上，难道我改完又错位了？
还有，手机没办法两个一起缩小~~背景图可以缩放，小图就原大 ...
额，酱紫 马黑黑 发表于 2025-8-9 21:23
额，酱紫
电脑看就好了。。全屏也错位{:4_173:} 花飞飞 发表于 2025-8-9 21:25
电脑看就好了。。全屏也错位
固定帖子宽高才行，这个模版是不固定的 马黑黑 发表于 2025-8-9 21:26
固定帖子宽高才行，这个模版是不固定的
好哒，请之前的模板出马 花飞飞 发表于 2025-8-9 21:29
好哒，请之前的模板出马
其实也有妙法，自己想想也应该能想得出。