论坛 › 欢乐水吧 › X檔案

马黑黑 发表于 2024-7-10 07:24

X檔案

本帖最后由 马黑黑 于 2024-7-10 12:13 编辑 <br /><br /><style>
#mydiv {
        --width: 1024px;
        margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
        width: 1024px;
        height: 640px;
        background:
                linear-gradient(45deg, transparent 48%, rgba(0,128,0,.5) 48%, rgba(0,128,0,.5) 52%, transparent 52%, transparent 0) center/100%,
                linear-gradient(-45deg, transparent 48%, rgba(0,128,0,.5) 48%, rgba(0,128,0,.5) 52%, transparent 52%, transparent 0) center/100%,
                repeating-radial-gradient(circle, rgba(100, 100, 0, .2) 0, rgba(255,255,255,.2) 40%, transparent 60%) center/10% 25%,
                conic-gradient(from 45deg at center, transparent, red, transparent, blue, transparent, green, transparent, purple), #fff;
        border: 1px solid gray;
        z-index: 1;
        overflow: hidden;
        position: relative;
}
#vid {
        position: absolute;
        bottom: 0; width: 100%;
        height: calc(100% + 160px);
        object-fit: conver;
        mix-blend-mode: screen;
        pointer-events: none;
}
#player {
        position: absolute;
        left: calc(50% - 200px);
        top: calc(50% - 200px);       
        width: 400px;
        height: 400px;
        cursor: pointer;
        animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to {transform: rotate(360deg); } }
</style>

<div id="mydiv">
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=562254568" autoplay loop></audio>
        <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0f6b234ec0.mp4" muted autoplay loop></video>
        <svg id="player"><polygon id="poly" points="400.00 200.00, 6.81 251.76, 373.21 100.00, 58.58 341.42, 300.00 26.79, 148.24 393.19, 200.00 0.00, 251.76 393.19, 100.00 26.79, 341.42 341.42, 26.79 100.00, 393.19 251.76, 0.00 200.00, 393.19 148.24, 26.79 300.00, 341.42 58.58, 100.00 373.21, 251.76 6.81, 200.00 400.00, 148.24 6.81, 300.00 373.21, 58.58 58.58, 373.21 300.00, 6.81 148.24" fill="transparent" stroke="darkgreen" stroke-width="2"></polygon></svg>
</div>

<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
        papa: '#mydiv',
        css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
        mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
        player.title = ['暂停','播放'][+aud.paused];
        aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-7-10 07:29

本帖最后由 马黑黑 于 2024-7-10 12:13 编辑

帖子代碼
<style>
#mydiv {
      --width: 1024px;
      margin: 130px 0 30px calc(50% - (var(--width) / 2 + 81px));
      width: 1024px;
      height: 640px;
      background:
                linear-gradient(45deg, transparent 48%, rgba(0,128,0,.5) 48%, rgba(0,128,0,.5) 52%, transparent 52%, transparent 0) center/100%,
                linear-gradient(-45deg, transparent 48%, rgba(0,128,0,.5) 48%, rgba(0,128,0,.5) 52%, transparent 52%, transparent 0) center/100%,
                repeating-radial-gradient(circle, rgba(100, 100, 0, .2) 0, rgba(255,255,255,.2) 40%, transparent 60%) center/10% 25%,
                conic-gradient(from 45deg at center, transparent, red, transparent, blue, transparent, green, transparent, purple), #fff;
      border: 1px solid gray;
      z-index: 1;
      overflow: hidden;
      position: relative;
}
#vid {
      position: absolute;
      bottom: 0; width: 100%;
      height: calc(100% + 160px);
      object-fit: conver;
      mix-blend-mode: screen;
      pointer-events: none;
}
#player {
      position: absolute;
      left: calc(50% - 200px);
      top: calc(50% - 200px);      
      width: 400px;
      height: 400px;
      cursor: pointer;
      animation: rot 8s linear infinite var(--state);
}
@keyframes rot { to {transform: rotate(360deg); } }
</style>

<div id="mydiv">
      <audio id="aud" src="https://music.163.com/song/media/outer/url?id=562254568" autoplay loop></audio>
      <video id="vid" src="https://img.tukuppt.com/video_show/15653652/01/31/09/62d0f6b234ec0.mp4" muted autoplay loop></video>
      <svg id="player"><polygon id="poly" points="400.00 200.00, 6.81 251.76, 373.21 100.00, 58.58 341.42, 300.00 26.79, 148.24 393.19, 200.00 0.00, 251.76 393.19, 100.00 26.79, 341.42 341.42, 26.79 100.00, 393.19 251.76, 0.00 200.00, 393.19 148.24, 26.79 300.00, 341.42 58.58, 100.00 373.21, 251.76 6.81, 200.00 400.00, 148.24 6.81, 300.00 373.21, 58.58 58.58, 373.21 300.00, 6.81 148.24" fill="transparent" stroke="darkgreen" stroke-width="2"></polygon></svg>
</div>

<script>
var sF = document.createElement('script');
sF.src = 'https://638183.freep.cn/638183/web/api/fullscreen.js';
sF.charset = 'utf-8';
document.querySelector('body').appendChild(sF);
sF.onload = () => FS({
      papa: '#mydiv',
      css: 'bottom: 20px; left: 50%; transform: translate(-50%); --color: lightblue; --fsBg: transparent;',
});
var mState = () => {
      mydiv.style.setProperty('--state',['running','paused'][+aud.paused]);
      player.title = ['暂停','播放'][+aud.paused];
      aud.paused ? vid.pause() : vid.play();
};
aud.oncanplay = aud.onplaying = aud.onpause = () => mState();
player.onclick = () => aud.paused ? aud.play() : aud.pause();
</script>

马黑黑 发表于 2024-7-10 07:39

为了方便学习研究，CSS代码基本分行写。本帖：

（一）以多个渐变背景构建帖子图案，帖子主元素背景没有用到物理图片。没有使用图片时，帖子主元素需要设置背景色，否则可能会呈现一定程度的透明、帖子底部的东东可能会春光乍泄 。

【重要技巧】背景颜色的设置必须放在所有渐变图案之后，也就是放在最后面，否则所设置的背景颜色相当于没有设置。这是 background 的层级权重问题：放在后面的背景（或颜色）层级最高（顶层）。代码在第 11 行， #fff 就是背景颜色设置。

（二）播放控制器直接使用 svg 制作，绘制一个多边形。多边形的数据可以在线生成：http://mhh.52qingyin.cn/art/show.php?st=5&sd=5&art=mahei_1699183527，当然，完全可以使用图片。

南无月 发表于 2024-7-10 08:58

我是来看代码的，顺便领红包{:4_174:}

梦油 发表于 2024-7-10 09:02

俺不懂代码，可领红包挺积极。{:5_117:}

南无月 发表于 2024-7-10 09:06

这个帖子把渐变用到极致～
两个45的渐变，整出了最大的X……
重复径向渐变同心圆铺满背景，
锥形渐变，红蓝绿紫用透明度隔开～给背景统一上色～
{:4_170:}
渐变大集合

南无月 发表于 2024-7-10 09:07

马黑黑 发表于 2024-7-10 07:39
为了方便学习研究，CSS代码基本分行写。本帖：

（一）以多个渐变背景构建帖子图案，帖子主元素背景没有 ...

这个重要技巧记下，有机会再体会感受一下

南无月 发表于 2024-7-10 09:12

标题吸睛，标题党～
视频烘托气氛～
音乐好听～{:4_199:}

南无月 发表于 2024-7-10 09:12

这一贴100块

红影 发表于 2024-7-10 09:25

南无月 发表于 2024-7-10 09:06
这个帖子把渐变用到极致～
两个45的渐变，整出了最大的X……
重复径向渐变同心圆铺满背景，


刚想说这个呢，帖子背景把所有的渐变类型都用上了，太厉害了{:4_199:}

红影 发表于 2024-7-10 09:27

“repeating-radial-gradient(circle, rgba(100, 100, 0, 36) 0,。。。。。。”
这句里的36没看懂，记得这个数值范围不是0-1么{:4_173:}

红影 发表于 2024-7-10 09:27

这帖子音乐还是高品质音乐呢，好听{:4_187:}

红影 发表于 2024-7-10 09:29

这个帖子里的视频也选得好。我记得也总在熊猫里转悠，咋没看到过这么惊艳的效果啊。
黑黑厉害{:4_199:}

红影 发表于 2024-7-10 09:33

回帖奖励的设置也让人开心，就跟那个小品一锤子80块的感觉一样，那个小品里大锤砸墙的时候边砸边喊80,80,80，咱这帖子里回复一个楼层100，可以边回复边喊100,100,100，，，，，{:4_170:}{:4_182:}

梦江南 发表于 2024-7-10 09:55

顶帖还可以奖励100元，这个好啊！

梦江南 发表于 2024-7-10 09:56

看不懂也得看，多看总会有所收获。

朵拉 发表于 2024-7-10 10:36

漂亮漂亮~~

朵拉 发表于 2024-7-10 10:36

炫酷炫酷~~

朵拉 发表于 2024-7-10 10:36

精彩精彩~~

朵拉 发表于 2024-7-10 10:37

老师腻害~~

查看完整版本: X檔案