千年之约（文本动画+帖子CSS样式演示）

马黑黑 发表于 2025-7-28 12:23

马黑黑 发表于 2025-7-28 12:23

本帖最后由马黑黑于 2025-7-28 12:24 编辑

一楼完整代码
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6884745c58cb8da5c8e15350.jpg') no-repeat center/cover; --ma-bg: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
#btnFs { bottom: 20px; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=456510586" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/33/69/62f0d6e506540.mp4" autoplay loop muted></video>
<div id="ma" class="opacity"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);

const txtAr = '千年之约'.split('');
let spans = [];
txtAr.forEach( (t,k) => {
   const s = document.createElement('span');
   s.textContent = t;
   s.className = k === 0 ? 'title-text rotate' : 'title-text';
   s.style.cssText += `right: 50px; top: ${k * 80 + 50}px;`;
   spans.push(s);
   s.onanimationend = () => {
         s.classList.remove('rotate');
         spans[(k+1) % txtAr.length].classList.add('rotate');
   };
   pa.appendChild(s);
});
</script>

马黑黑 发表于 2025-7-28 12:32

tz01.css 是个简单封装的帖子CSS文档，完整代码如下：
#pa {
--state: running;
--offsetX: 0px;
--bg: linear-gradient(45deg, tan, white, tan);
--ma-size: 12%;
--ma-bg: none;
margin: 30px 0;
left: calc(50% - var(--offsetX));
transform: translateX(-50%);
aspect-ratio: 16/9;
width: clamp(600px, 90vw, 1400px);
min-height: 338px;
background: var(--bg);
box-shadow: 2px 2px 8px #000;
overflow: hidden;
z-index: 1;
font-size: 16px;
display: grid;
place-items: center;
position: relative;
}

#ma {
position: absolute;
aspect-ratio: 1/1;
width: var(--ma-size);
background: var(--ma-bg);
cursor: pointer;
animation: rotate 8s linear infinite var(--state);
}

#btnFs {
position: absolute;
padding: 6px 12px;
border: 3px solid gray;
border-radius: 12px;
font-size: 1.2em;
color: silver;
background: rgba(255, 255, 255, .25);
user-select: none;
cursor: pointer;
}

#btnFs:hover {
font-style: italic;
}

.qk-vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mask: radial-gradient(transparent 20%, red);
-webkit-mask: radial-gradient(transparent 20%, red);
opacity: .5;
z-index: 9;
pointer-events: none;
}

.pd-vid {
position: absolute;
width: 100%;
height: 100%;
object-fit: cover;
mask: linear-gradient(45deg,transparent 5%, red 88%, transparent 90%, transparent);
-webkit-mask: linear-gradient(45deg, transparent 5%, red 88%, transparent 90%, transparent);
opacity: 0.5;
z-index: 9;
pointer-events: none;
}

.title-text {
font: bold 60px 'Microsoft YaHei', sans-serif;
color: #eee;
text-shadow: 0 0 1px #000, 2px 2px 6px #333;
position: absolute;
}

.hue-rotate, .invert, .brightness, .grayscale, .opacity, .sepia {
transition: 1s;
}

.hue-rotate:hover {
filter: hue-rotate(300deg);
}

.invert:hover {
filter: invert(180deg);
}

.invert: hover {
filter: invert(1);
}

.brightness:hover {
filter: brightness(2);
}

.grayscale:hover {
filter: grayscale(1);
}

.opacity:hover {
filter: opacity(0.5);
}

.sepia:hover {
filter: sepia(1);
}

.rotate {
animation: rotate 1s linear var(--state);
}

@keyframes rotate {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}可以存为 .css 文档，上传到自己的空间，然后在帖子中引用：

<style>
@import 'css文档路径';
/* 这里参照二楼代码设置相应内容 */
/* 这里是帖子需要的其它CSS样式代码 */
</style>

HTML结构：

<div id="pa">

</div>

其它内容后续讲解

马黑黑 发表于 2025-7-28 12:33

本帖最后由马黑黑于 2025-7-28 13:25 编辑

帖子 #pa 选择器中设置的CSS变量说明：

--state: running / paused;

   帖子关键帧动画开关。启用关键帧动画的元素，对应CSS选择器的 animation 属性加入变量 var(--state)，将能通过此变量利用其它途径（例如JS中导入了 fullscreen.js 或其它有音视频联动管理功能的模块，或自行编写管理机制）实现开或关。默认设置为 running，帖子中如果没有必要可以不设置此变量。animation属性示例代码：

   animation: rotate 10s linear infinite var(--state);

--offsetX: 81px;

   帖子水平方向偏移量。此变量转为 discuz! 论坛设计，通常，d论坛发帖的位置水平方向上都有所偏移，宽幅帖子想要水平居中需要做一些处理，本论坛当前的水平方向偏移量为 81px。不需要设置偏移量时可不要此变量，或设置为 0 或 0px。

--bg: url('图片地址') no-repeat center/cover

   帖子背景图片，就像 background 属性一样写代码，可以是图片、渐变或颜色，也可以是组合背景。

--ma-size: 200px / 10%；

   帖子预留子元素 id="ma" 标签对应CSS样式 #ma 所需的宽高尺寸，可以是 px 或其它实体距离单位，也可以是百分比（基于帖子容器宽度）。不设置默认为 12%，即帖子渲染出来的宽度的百分之十二。

--ma-bg: url('图片地址') no-repeat center/cover

   原理同前面的 --bg 变量，不同的是它针对 id="ma" 预留标签，此标签建议用了做小播或小播容器。

马黑黑 发表于 2025-7-28 12:33

本帖最后由马黑黑于 2025-7-28 13:51 编辑

几个预留选择器

一、#ma

   上一楼已经提到。给它加个背景图，它就可以是小播了，自带了 animation 属性。可能只需要在帖子CSS中左下定位即设置left、top或right、bottom属性。当然，要使用 #ma，需要在 HTML 代码中在帖子容器内加入 <div id="ma"></div>。

   它可以是容器，这时，无需设置 --ma-bg 变量，而是给它塞子元素，这些子元素在它内部构图。

二、#btnFs

   全屏切换安全样式。配套 fullscreen.js 时只需在帖子CSS代码中设置位置（left、top 或 right、bottom）；

三、.qk-vid

   淡化视频中心区域，对千库视频等Logo在中央的视频特别好使。启用它，可在 video 标签加 class="qk-vid"。

四、.pd-vid

   淡化左下角和右上角区域（特别针对右上角），对于国宝视频而言应该很管用。同样地，启用它，需要 video 标签加入 class="pd-vid"。

   视频标签都设置了透明度，如需更改，可在帖子CSS代码中加对应标签，例如：.qk-vid { opacity: 1; }

五、.title-text

   这个是专做帖子标题用的，对应HTML标签加入 class="title-text" 即可。需要更改样式的，在帖子代码中加入同名选择器，例如：

   .title-text { color: red; font-size: 100px; }

六、.rotate

   这个选择器主要是运行关键帧动画 rotate，1秒转一圈，只转一次，参与音频联动管理。

七、系列 :hover 标签

   就这几个：.hue-rotate, .invert, .brightness, .grayscale, .opacity, .sepia，都是使用 CSS filter 的函数名来命名，transition 属性全部设为 1s。二楼帖子代码中的 <div id="ma" class="opacity"></div> 就是一个明显的应用范例。

八、还有一个关键帧动画，@keyframes rotate {}，简单的旋转动画。需要复杂动画的，可在帖子CSS代码中设计，同名的话则符合引入的CSS设置，不同名的话需要运行动画的标签其对应选择器要加入自己命名的关键帧动画名称。

马黑黑 发表于 2025-7-28 12:33

本帖最后由马黑黑于 2025-7-28 14:01 编辑

最后给一个使用 tz01.css 最简单的帖子代码示例：
<style>
@import 'https://638183.freep.cn/638183/web/css/tz01.css';
#pa { --offsetX: 81px; --bg: url('https://pic1.imgdb.cn/item/6884745c58cb8da5c8e15350.jpg') no-repeat center/cover; --ma-bg: url('https://638183.freep.cn/638183/small/780.webp') no-repeat center/cover; }
#btnFs { bottom: 20px; }
.title-text { right: 20px; top: 30px; font-size: 30px; writing-mode: vertical-rl; }
</style>

<div id="pa">
<audio id="aud" src="https://music.163.com/song/media/outer/url?id=456510586" autoplay loop></audio>
<video class="pd-vid" src="https://img.tukuppt.com/video_show/15653652/01/33/69/62f0d6e506540.mp4" autoplay loop muted></video>
<div class="title-text">千年之约</div>
<div id="ma" class="opacity"></div>
</div>

<script type="module">
import { FS } from 'https://638183.freep.cn/638183/web/js/fullscreen.js';
FS(pa, ma);
</script>

杨帆发表于 2025-7-28 13:38

构思新颖，效果惊艳！谢谢马老师经典讲授和精彩分享{:4_190:}

马黑黑 发表于 2025-7-28 19:31

杨帆发表于 2025-7-28 13:38
构思新颖，效果惊艳！谢谢马老师经典讲授和精彩分享

{:4_191:}

樵歌发表于 2025-7-28 19:52

声音貌似从遥远的宇宙中来，那画面效果惊人

红影发表于 2025-7-28 19:57

这个带CSS封装的，真好。不但封装了旋转标题字，还有那么多可用的选项，比如使用不同地方的视频，就可以选择一下就行了，真方便。还有小播的鼠标触碰的变化，居然封了那么多，可以随意选用了呢{:4_199:}

马黑黑 发表于 2025-7-28 20:02

红影发表于 2025-7-28 19:57
这个带CSS封装的，真好。不但封装了旋转标题字，还有那么多可用的选项，比如使用不同地方的视频，就可以选 ...

国宝那个视频还是封装得不太理想

马黑黑 发表于 2025-7-28 20:02

樵歌发表于 2025-7-28 19:52
声音貌似从遥远的宇宙中来，那画面效果惊人

这是 @影子的作品

红影发表于 2025-7-28 20:09

马黑黑发表于 2025-7-28 12:32
tz01.css 是个简单封装的帖子CSS文档，完整代码如下：
可以存为 .css 文档，上传到自己的空间，然后在帖子 ...

选 .qk-vid就是千库视频，.pd-vid 就是熊猫视频了。在哪找的视频到了帖子里就选哪个。真好。
还有这个.hue-rotate, .invert, .brightness, .grayscale, .opacity, .sepia。。。其实鼠标触碰也就这么些个改变，这里可以任意选了。{:4_199:}

红影发表于 2025-7-28 20:10

在这个帖子里徜徉真好，一边学习一边再多听几遍歌儿，还真挺喜欢这首歌呢{:4_187:}

马黑黑 发表于 2025-7-28 20:12

红影发表于 2025-7-28 20:10
在这个帖子里徜徉真好，一边学习一边再多听几遍歌儿，还真挺喜欢这首歌呢

曲子深情而悠长，百听不厌。你的配色也非常出色。

马黑黑 发表于 2025-7-28 20:13

红影发表于 2025-7-28 20:09
选 .qk-vid就是千库视频，.pd-vid 就是熊猫视频了。在哪找的视频到了帖子里就选哪个。真好。
还有这个 ...

对的

红影发表于 2025-7-28 22:34

马黑黑发表于 2025-7-28 20:02
国宝那个视频还是封装得不太理想

这里用的就是国宝的啊，没什么问题啊{:4_187:}

马黑黑 发表于 2025-7-28 22:38

红影发表于 2025-7-28 22:34
这里用的就是国宝的啊，没什么问题啊

这是因为视频恰好和背景相当配套{:4_170:}

红影发表于 2025-7-28 22:39

马黑黑发表于 2025-7-28 20:12
曲子深情而悠长，百听不厌。你的配色也非常出色。

嗯嗯，曲子好听。配色我一直觉得自己不行，这些可能碰巧了{:4_173:}

红影发表于 2025-7-28 22:39

马黑黑发表于 2025-7-28 20:13
对的

这些封装的东西特别好{:4_199:}

页: [1] 2 3 4 5

花潮论坛's Archiver

千年之约（文本动画+帖子CSS样式演示）