X檔案

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

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

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

马黑黑 · 发表于 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 ... rt=mahei_1699183527，当然，完全可以使用图片。