家乡的绿
本帖最后由 马黑黑 于 2024-4-10 21:52 编辑 <br /><br /><style>#papa { margin: 20px 0 20px calc(50% - 730.5px); width: 1299px; height: 727px; background: #f1f1f1 url('https://638183.freep.cn/638183/t24/1/u05.jpg') no-repeat center/cover; box-shadow: 3px 4px 8px #000; overflow: hidden; z-index: 1; position: relative; --x: 0; --y: 0; }
#papa:hover #mplay { opacity: .7; }
#mplay { position: absolute; width: 120px; height: 120px; left: var(--x); top: var(--y); border: 1px solid #eee; border-radius: 50%; background: url('https://638183.freep.cn/638183/t24/1/u05.jpg') no-repeat -10px -10px; opacity: 0; cursor: pointer; transition: 1s; animation: rot 5s linear infinite var(--state); }
#vid { position: absolute; left: 0; bottom: 0;width: 100%; height: calc(100% + 70px); object-fit: cover; mix-blend-mode: screen; pointer-events: none; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=28699996" loop autoplay></audio>
<video id="vid" src="https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7a50c397ff.mp4" loop muted></video>
<div id="mplay"></div>
</div>
<script>
papa.onmousemove = (e) => {
if(e.target.id === 'mplay') return;
var x = e.offsetX, y = e.offsetY;
if(x < 60) x = 60;
if(x > papa.offsetWidth - 60) x = papa.offsetWidth - 60;
if(y < 60) y = 60;
if(y > papa.offsetHeight - 60) y = papa.offsetHeight - 60;
papa.style.setProperty('--x', `${x - 60}px`);
papa.style.setProperty('--y', `${y - 60}px`);
mplay.style.backgroundPosition = `-${x - 60}px -${y - 60}px`;
};
mplay.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.onplaying = aud.onpause = () => mState();
var mState = () => aud.paused ?
(papa.style.setProperty('--state', 'paused'), vid.pause()) :
(papa.style.setProperty('--state', 'running'), vid.play());
</script>
本帖最后由 马黑黑 于 2024-4-10 21:54 编辑 <br /><br /><style>
.mum { position: relative; margin: 0; padding: 10px; font: normal 16px/20px Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; color: black; background: rgba(240, 240, 240,.95); box-shadow: 2px 2px 4px gray; border: thick groove lightblue; border-radius: 6px; }
.mum ::selection { background-color: rgba(0,100,100,.35); }
.mum div { margin: 0; padding: 0; }
.mum cl-cd { display: block; position: relative; margin: 0 0 0 50px; padding: 0 0 0 10px; white-space: pre-wrap; overflow-wrap: break-word; border-left: 1px solid silver; }
.mum cl-cd::before { position: absolute; content: attr(data-idx); width: 50px; color: gray; text-align: right; transform: translate(-70px); }
.tRed { color: red; }
.tBlue { color: blue; }
.tGreen { color: green; }
.tDarkRed { color: darkred; }
.tMagenta { color: magenta; }
</style>
<h2>帖子代码</h2>
<p>【说明】小播就地取材，对帖子尺寸依赖性高：要求帖子宽高和图片实际高宽相一致。<br><br></p>
<div class='mum'>
<cl-cd data-idx="1"><<span class="tDarkRed">style</span>></cl-cd>
<cl-cd data-idx="2"> #papa { <span class="tBlue">margin:</span> 20px 0 20px calc(50% - 730.5px); <span class="tBlue">width:</span> 1299px; <span class="tBlue">height:</span> 727px; <span class="tBlue">background:</span> #f1f1f1 url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/u05.jpg'</span>) no-repeat center/cover; <span class="tBlue">box-shadow:</span> 3px 4px 8px #000; <span class="tBlue">overflow:</span> hidden; <span class="tBlue">z-index:</span> 1; <span class="tBlue">position:</span> relative; <span class="tBlue">--x:</span> 0; <span class="tBlue">--y:</span> 0; }</cl-cd>
<cl-cd data-idx="3"> #<span class="tBlue">papa:</span>hover #mplay { <span class="tBlue">opacity:</span> .7; }</cl-cd>
<cl-cd data-idx="4"> #mplay { <span class="tBlue">position:</span> absolute; <span class="tBlue">width:</span> 120px; <span class="tBlue">height:</span> 120px; <span class="tBlue">left:</span> <span class="tBlue">var</span>(--x); <span class="tBlue">top:</span> <span class="tBlue">var</span>(--y); <span class="tBlue">border:</span> 1px solid #eee; <span class="tBlue">border-radius:</span> 50%; <span class="tBlue">background:</span> url(<span class="tMagenta">'https://638183.freep.cn/638183/t24/1/u05.jpg'</span>) no-repeat -10px -10px; <span class="tBlue">opacity:</span> 0; <span class="tBlue">cursor:</span> pointer; <span class="tBlue">transition:</span> 1s; <span class="tBlue">animation:</span> rot 5s linear infinite <span class="tBlue">var</span>(--state); }</cl-cd>
<cl-cd data-idx="5"> #vid { <span class="tBlue">position:</span> absolute; <span class="tBlue">left:</span> 0; <span class="tBlue">bottom:</span> 0;<span class="tBlue">width:</span> 100%; <span class="tBlue">height:</span> calc(100% + 70px); <span class="tBlue">object-fit:</span> cover; <span class="tBlue">mix-blend-mode:</span> screen; <span class="tBlue">pointer-events:</span> none; }</cl-cd>
<cl-cd data-idx="6"> @keyframes rot { to { <span class="tBlue">transform:</span> rotate(360deg); } }</cl-cd>
<cl-cd data-idx="7"><<span class="tDarkRed">/style</span>></cl-cd>
<cl-cd data-idx="8"> </cl-cd>
<cl-cd data-idx="9"><<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"papa"</span>></cl-cd>
<cl-cd data-idx="10"> <<span class="tDarkRed">audio</span> <span class="tRed">id</span>=<span class="tMagenta">"aud"</span> src=<span class="tMagenta">"https://music.163.com/song/media/outer/url?<span class="tRed">id</span>=28699996"</span> loop autoplay><<span class="tDarkRed">/audio</span>></cl-cd>
<cl-cd data-idx="11"> <<span class="tDarkRed">video</span> <span class="tRed">id</span>=<span class="tMagenta">"vid"</span> src=<span class="tMagenta">"https://img.tukuppt.com/video_show/2418175/00/18/94/5ef7a50c397ff.mp4"</span> loop muted><<span class="tDarkRed">/video</span>></cl-cd>
<cl-cd data-idx="12"> <<span class="tDarkRed">div</span> <span class="tRed">id</span>=<span class="tMagenta">"mplay"</span>><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="13"><<span class="tDarkRed">/div</span>></cl-cd>
<cl-cd data-idx="14"> </cl-cd>
<cl-cd data-idx="15"><<span class="tDarkRed">script</span>></cl-cd>
<cl-cd data-idx="16"> papa.onmousemove = (e) => {</cl-cd>
<cl-cd data-idx="17"> <span class="tBlue">if</span>(e.target.<span class="tRed">id</span> === <span class="tMagenta">'mplay'</span>) <span class="tBlue">return</span>;</cl-cd>
<cl-cd data-idx="18"> <span class="tBlue">var</span> x = e.offsetX, y = e.offsetY;</cl-cd>
<cl-cd data-idx="19"> <span class="tBlue">if</span>(x < 60) x = 60;</cl-cd>
<cl-cd data-idx="20"> <span class="tBlue">if</span>(x > papa.offsetWidth - 60) x = papa.offsetWidth - 60;</cl-cd>
<cl-cd data-idx="21"> <span class="tBlue">if</span>(y < 60) y = 60;</cl-cd>
<cl-cd data-idx="22"> <span class="tBlue">if</span>(y > papa.offsetHeight - 60) y = papa.offsetHeight - 60;</cl-cd>
<cl-cd data-idx="23"> papa.style.setProperty(<span class="tMagenta">'--x'</span>, `${x - 60}px`);</cl-cd>
<cl-cd data-idx="24"> papa.style.setProperty(<span class="tMagenta">'--y'</span>, `${y - 60}px`);</cl-cd>
<cl-cd data-idx="25"> mplay.style.backgroundPosition = `-${x - 60}px -${y - 60}px`;</cl-cd>
<cl-cd data-idx="26"> };</cl-cd>
<cl-cd data-idx="27"> </cl-cd>
<cl-cd data-idx="28"> mplay.onclick = () => aud.paused ? aud.play() : aud.pause();</cl-cd>
<cl-cd data-idx="29"> </cl-cd>
<cl-cd data-idx="30"> aud.onplaying = aud.onpause = () => mState();</cl-cd>
<cl-cd data-idx="31"> </cl-cd>
<cl-cd data-idx="32"> <span class="tBlue">var</span> mState = () => aud.paused ?</cl-cd>
<cl-cd data-idx="33"> (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'paused'</span>), vid.pause()) :</cl-cd>
<cl-cd data-idx="34"> (papa.style.setProperty(<span class="tMagenta">'--state'</span>, <span class="tMagenta">'running'</span>), vid.play());</cl-cd>
<cl-cd data-idx="35"><<span class="tDarkRed">/script</span>></cl-cd>
</div> 老师用的视频全部都是无透明度设置，平常的一张风影图立刻显得晶莹透亮。。 小播跟放大镜出现方式有点像，鼠标移到贴子上才看到小播，移开就隐身了。。{:4_173:} 小播移到哪里，里面也显示背景图片的对应位置，这一点也跟放大镜比较像。。{:4_199:} 南无月 发表于 2024-4-10 19:06
小播跟放大镜出现方式有点像，鼠标移到贴子上才看到小播，移开就隐身了。。
完全不是一个机制哦。帖子使用元素的background属性做成 南无月 发表于 2024-4-10 19:05
老师用的视频全部都是无透明度设置，平常的一张风影图立刻显得晶莹透亮。。
纯色背景的最好，如果没有，多换几个滤镜看看效果，必要时加上opacity属性 马黑黑 发表于 2024-4-10 19:09
完全不是一个机制哦。帖子使用元素的background属性做成
{:4_170:}
不是那就更好了。。。我没看代码。。
因为刚看那个放大镜的时候，把这个图放进去试了一下。。 马黑黑 发表于 2024-4-10 19:10
纯色背景的最好，如果没有，多换几个滤镜看看效果，必要时加上opacity属性
好哒。。。
主要是看你很少用opacity属性。{:4_173:}
我是逢贴必用。。 南无月 发表于 2024-4-10 19:13
好哒。。。
主要是看你很少用opacity属性。
我是逢贴必用。。
用用无妨 南无月 发表于 2024-4-10 19:11
不是那就更好了。。。我没看代码。。
因为刚看那个放大镜的时候，把这个图放进去试了一下。 ...
也行 南无月 发表于 2024-4-10 19:08
小播移到哪里，里面也显示背景图片的对应位置，这一点也跟放大镜比较像。。
对，小播就地取材 马黑黑 发表于 2024-4-10 19:14
用用无妨
{:4_199:}很好用的。 马黑黑 发表于 2024-4-10 19:14
也行
这个风景图片 变小了很多，没有铺满之前的漫画美女画布 马黑黑 发表于 2024-4-10 19:14
对，小播就地取材
我移到天空，小播突然就变成了天空位置在转动。。就觉得十分好玩。。 播放器按钮直接就地取材呢，这个思路很别致{:4_199:} 按钮里的图图少许有些错位，是因为xy都减了60的缘故吧。这样好，否则就是原位置图的转动了，错位一下可以不重叠，但又和原图相关{:4_187:} 红影 发表于 2024-4-10 19:39
按钮里的图图少许有些错位，是因为xy都减了60的缘故吧。这样好，否则就是原位置图的转动了，错位一下可以不 ...
其实不错位哦，这是旋转造成的错觉。不信你可以将代码存为本地HTML文档，不让小播旋转。
红影 发表于 2024-4-10 19:36
播放器按钮直接就地取材呢，这个思路很别致
这是容易想到的 南无月 发表于 2024-4-10 19:28
这个风景图片 变小了很多，没有铺满之前的漫画美女画布
它本身就是1200的宽度，放那里的话就是600的宽度