紫色 - 音乐沙龙 - 花潮论坛 - Powered by Discuz! Archiver

马黑黑 发表于 2024-3-15 12:06

紫色

本帖最后由马黑黑于 2024-3-16 10:29 编辑 <style>
#papa{
margin: -60px 0 0 calc(50% - 593px);
width: 1024px;
height: 640px;
background: url('https://638183.freep.cn/638183/t24/1/purple.jpg') no-repeat center/cover;
box-shadow: 3px 3px 20px #000;
position: relative;
z-index: 1000;
}
#btnplay {
position: absolute;
left: 10px;
top: 10px;
width: 80px;
height: 80px;
transition: 5s;
cursor: pointer;
opacity: .9;
animation: rot 6s linear infinite var(--state);
}
#papa:fullscreen #btnplay { width: 120px; height: 120px; }
#papa video {
position: absolute;
width: 100%;
height: 100%;
border-radius: 0 50%;
object-fit: cover;
mix-blend-mode: lighten;
opacity: .2;
pointer-events: none;
}
@keyframes rot { to { transform: rotate(360deg); } }
</style>

<div id="papa">
<audio src="https://music.163.com/song/media/outer/url?id=1379294032" autoplay loop></audio>
<video src="https://img3.tukuppt.com/video_show/15653652/01/06/15/615cf6769bff8.mp4" loop muted></video>
<img id="btnplay" src="https://638183.freep.cn/638183/small/purple.png" alt="" title="点击播放" />
</div>

<script>
(function() {
let sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fsgo_hc.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
papa: '#papa',
css: '--bg: transparent; --color: #ccc; bottom: 10px; left: 48%;',
go: {x: true, y: true}
});
})();
</script>

马黑黑 发表于 2024-3-15 12:07

本帖最后由马黑黑于 2024-3-16 10:30 编辑 <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>
<div class='mum'>
<cl-cd data-idx="1"><style></cl-cd>
<cl-cd data-idx="2">#papa {</cl-cd>
<cl-cd data-idx="3">    margin: 20px 0 0 calc(50% - 593px);</cl-cd>
<cl-cd data-idx="4">    width: 1024px;</cl-cd>
<cl-cd data-idx="5">    height: 640px;</cl-cd>
<cl-cd data-idx="6">    background: url('https://638183.freep.cn/638183/t24/1/purple.jpg') no-repeat center/cover;</cl-cd>
<cl-cd data-idx="7">    box-shadow: 3px 3px 20px #000;</cl-cd>
<cl-cd data-idx="8">    position: relative;</cl-cd>
<cl-cd data-idx="9">    z-index: 1000;</cl-cd>
<cl-cd data-idx="10">}</cl-cd>
<cl-cd data-idx="11">#btnplay {</cl-cd>
<cl-cd data-idx="12">    position: absolute;</cl-cd>
<cl-cd data-idx="13">    left: 10px;</cl-cd>
<cl-cd data-idx="14">    top: 10px;</cl-cd>
<cl-cd data-idx="15">    width: 80px;</cl-cd>
<cl-cd data-idx="16">    height: 80px;</cl-cd>
<cl-cd data-idx="17">    transition: 5s;</cl-cd>
<cl-cd data-idx="18">    cursor: pointer;</cl-cd>
<cl-cd data-idx="19">    opacity: .9;</cl-cd>
<cl-cd data-idx="20">    animation: rot 6s linear infinite var(--state);</cl-cd>
<cl-cd data-idx="21">}</cl-cd>
<cl-cd data-idx="22">#papa:fullscreen #btnplay { width: 120px; height: 120px; }</cl-cd>
<cl-cd data-idx="23">#papa video {</cl-cd>
<cl-cd data-idx="24">    position: absolute;</cl-cd>
<cl-cd data-idx="25">    width: 100%;</cl-cd>
<cl-cd data-idx="26">    height: 100%;</cl-cd>
<cl-cd data-idx="27">    border-radius: 0 50%;</cl-cd>
<cl-cd data-idx="28">    object-fit: cover;</cl-cd>
<cl-cd data-idx="29">    mix-blend-mode: lighten;</cl-cd>
<cl-cd data-idx="30">    opacity: .2;</cl-cd>
<cl-cd data-idx="31">    pointer-events: none;</cl-cd>
<cl-cd data-idx="32">}</cl-cd>
<cl-cd data-idx="33">@keyframes rot { to { transform: rotate(360deg); } }</cl-cd>
<cl-cd data-idx="34"></style></cl-cd>
<cl-cd data-idx="35"> </cl-cd>
<cl-cd data-idx="36"><div id="papa"></cl-cd>
<cl-cd data-idx="37">    <audio src="https://music.163.com/song/media/outer/url?id=1379294032" autoplay loop></audio></cl-cd>
<cl-cd data-idx="38">    <video src="https://img3.tukuppt.com/video_show/15653652/01/06/15/615cf6769bff8.mp4" loop muted></video></cl-cd>
<cl-cd data-idx="39">    <img id="btnplay" src="https://638183.freep.cn/638183/small/purple.png" alt="" title="点击播放" /></cl-cd>
<cl-cd data-idx="40"></div></cl-cd>
<cl-cd data-idx="41"> </cl-cd>
<cl-cd data-idx="42"><script></cl-cd>
<cl-cd data-idx="43">(function() {</cl-cd>
<cl-cd data-idx="44">    let sF = document.createElement('script');</cl-cd>
<cl-cd data-idx="45">    sF.src = 'https://638183.freep.cn/638183/web/api/fsgo_hc.js';</cl-cd>
<cl-cd data-idx="46">    sF.charset = 'utf-8';</cl-cd>
<cl-cd data-idx="47">    document.querySelector('body').appendChild(sF);</cl-cd>
<cl-cd data-idx="48">    sF.onload = () => FS({</cl-cd>
<cl-cd data-idx="49">        papa: '#papa',</cl-cd>
<cl-cd data-idx="50">        css: '--bg: transparent; --color: #ccc; bottom: 10px; left: 48%;',</cl-cd>
<cl-cd data-idx="51">        go: {x: true, y: true}</cl-cd>
<cl-cd data-idx="52">    });</cl-cd>
<cl-cd data-idx="53">})();</cl-cd>
<cl-cd data-idx="54"></script></cl-cd>
</div>

 fsgo.ji 使用和配置方法在帖子代码中的 44 ~ 52 行。约定： 
一、帖子容器要有id，并按 49 行配置id标识符：papa: '#papa'； 
二、播放器按钮要有id，且id名只能是 btnplay（看 39 行）； 
三、50 行是全屏按钮的 CSS 设置，可以不设置，如果不设置，删掉这一行，如果设置，四个值最好一同存在； 
四、51 行是 go 对象设置，用于设置播放按钮跟随，若不需要某一个方向的，将相应值改为 false 即可。 
本论坛下，全屏时，播放器相应鼠标悬停有瑕疵，在我的网站其表现完美，大家可以去看看： 
<a href="http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1710473894" target="_blank">http://mhh.52qingyin.cn/art/bshow.php?st=3&sd=3&art=mahei_1710473894</a> 
此外，我专门在 Discuss! X3.4 下测试过，插件也表现完美。在此论坛为何如此，暂时找不出原因。

樵歌发表于 2024-3-15 12:50

紫色戴表爱情{:4_172:}

马黑黑 发表于 2024-3-15 12:58

本帖最后由马黑黑于 2024-3-15 13:05 编辑

{:4_189:}

马黑黑 发表于 2024-3-15 13:06

樵歌发表于 2024-3-15 12:50
紫色戴表爱情

你确认？

朵拉发表于 2024-3-15 15:41

本帖最后由朵拉于 2024-3-15 17:03 编辑

花儿滑动流畅，手机上看效果不明显~~{:4_190:}

朵拉发表于 2024-3-15 15:46

本帖最后由朵拉于 2024-3-15 17:02 编辑

大胆猜测背景图图和效果视频属于暖色调，如果背景图换成冷色调，不知道什么效果~~

小辣椒 发表于 2024-3-15 16:57

播放器这里是有点不一样，我现在是电脑进来的，加分后花朵按钮溜下面去了，全屏以后关了全屏也是溜下面去了，随你链接进去看的没有这个问题

小辣椒 发表于 2024-3-15 16:59

非常漂亮的色彩{:4_178:}

小辣椒 发表于 2024-3-15 17:00

黑黑的视频背景总加的那么的好看{:4_199:}

马黑黑 发表于 2024-3-15 17:52

小辣椒发表于 2024-3-15 17:00
黑黑的视频背景总加的那么的好看
这个太耀眼，不宜就看， @樵歌还说这个是戴了手表的爱 {:4_170:}

南无月 发表于 2024-3-15 18:00

这个全屏时悬停有瑕疵……
我试了半天，是不是指鼠标指挥的时候小花没有跑到鼠标跟前有点距离。。
反正也向鼠标跑去了，距离产生美，也挺不错哈。。。{:4_173:}

南无月 发表于 2024-3-15 18:02

fsgo.js插件完美，老师辛苦啦，又整一个封起来的。。又方便又顺手。。。{:4_199:}

全屏下小花也有缩放效果，中午的时候还没发现。。

马黑黑 发表于 2024-3-15 20:40

南无月发表于 2024-3-15 18:02
fsgo.js插件完美，老师辛苦啦，又整一个封起来的。。又方便又顺手。。。

全屏下小花也有缩放效 ...

全屏下这里有点问题

马黑黑 发表于 2024-3-15 20:42

南无月发表于 2024-3-15 18:00
这个全屏时悬停有瑕疵……
我试了半天，是不是指鼠标指挥的时候小花没有跑到鼠标跟前有点距离。。
反正也 ...

这是个问题。就是在这个版本的论坛程序里出的问题

红影发表于 2024-3-15 21:03

真漂亮。这个好，还能自己决定要限制哪个方向呢{:4_199:}

红影发表于 2024-3-15 21:04

又是个漂亮的封装效果，黑黑真是大神，带来完整的美妙七彩色{:4_199:}

马黑黑 发表于 2024-3-15 22:54

红影发表于 2024-3-15 21:04
又是个漂亮的封装效果，黑黑真是大神，带来完整的美妙七彩色

这个现在在花潮表现不理想

马黑黑 发表于 2024-3-16 10:32

红影发表于 2024-3-15 21:03
真漂亮。这个好，还能自己决定要限制哪个方向呢

刚刚专门做了一个针对花潮的插件。硬刷新后，本帖的全屏模式下小播鼠标跟随已经正常。

小辣椒 发表于 2024-3-16 15:14

马黑黑发表于 2024-3-16 10:32
刚刚专门做了一个针对花潮的插件。硬刷新后，本帖的全屏模式下小播鼠标跟随已经正常。

黑黑我刚试了一下，退出全屏，小波会溜出画面在下面了

页: [1] 2 3 4 5 6 7

花潮论坛's Archiver

紫色