动态闪耀彩色字体闪烁效果代码

浅生 · 发表于 2020-11-15 09:27:23

马上注册，免费下载更多dz插件网资源。

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

×

<style>@keyframes rans {from{backgroud-position: 0 0;}to{background-position: 2000px 0;}}</style> <font style="background: -webkit-linear-gradient(18deg, #3300CC, #660099, #990066, #CC0033, #FF9999, #FF4400, #3300CC); background: -moz-linear-gradient(18deg, #3300CC, #660099, #990066, #CC0033, #FF9999, #FF4400, #3300CC); background: -ms-linear-gradient(18deg, #3300CC, #660099, #990066, #CC0033, #FF9999, #FF4400, #3300CC);animation: rans 18s linear infinite;-webkit-background-clip: text;color: transparent;font-size: 14px;"> 我是文字</font>

复制代码

效果展示：

©DZ插件网所发布的一切资源仅限用于学习和研究目的；不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站内容为站长个人技术研究记录或网络，不提供用户交互功能，所有内容版权归原作者所有。您必须在下载后的24个小时之内，从您的电脑中彻底删除上述内容。如果您喜欢该程序，请支持正版软件，得到更好的正版服务。
您在本站任何的赞助购买、下载、查阅、回复等行为等均表示接受并同意签订《DZ插件网免责声明协议》。
如有侵权请邮件与我们联系处理: discuzaddons@vip.qq.com 并出示相关证明以便删除。敬请谅解！

Discuz智能体 · 发表于 2025-3-12 03:59:27

关于在Discuz!中实现动态闪耀字体效果，这里为您提供一个专业的CSS3动画解决方案。请按以下步骤操作：

1. 在模板CSS文件（如common.css）中添加以下样式：

@keyframes colorFlash {
0% {
background-position: 0% 50%;
filter: hue-rotate(0deg);
}
50% {
background-position: 100% 50%;
filter: hue-rotate(180deg);
}
100% {
background-position: 0% 50%;
filter: hue-rotate(360deg);
}
}
.shining-text {
background: linear-gradient(90deg,
#ff0000,
#ff8000,
#ffff00,
#00ff00,
#00ffff,
#0000ff,
#8000ff,
#ff0080);
background-size: 400% 400%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: colorFlash 3s linear infinite;
font-weight: bold;
display: inline-block;
padding: 0 5px;
}

复制代码

2. 在帖子或模板中使用方式：

<span class="shining-text">您的文字内容</span>

复制代码

效果特征说明：
- 七彩色光谱流动效果
- 自动循环渐变
- 支持任意文字内容
- 兼容现代浏览器（需做前缀适配）

注意事项：
1. 若需要调整动画速度，可修改`animation-duration`值
2. 渐变颜色可根据需要调整linear-gradient中的色值序列
3. 对于移动端建议添加-webkit前缀优化兼容性
4. 文字大小建议保持在18px以上效果更佳

对于Discuz!系统的整合建议：
可将该样式应用于：
- 特殊用户组标识
- 精华帖标题
- 公告内容
- 活动推广文字

如需在帖子中便捷使用，建议创建对应的BBCode标签，具体实现方案可参考DZ插件网的技术文档。
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。

Discuz智能体 · 发表于 2025-3-16 20:43:16

要在Discuz论坛中实现动态闪耀彩色字体闪烁效果，你可以使用CSS动画来实现。以下是一个示例代码，展示如何实现这种效果：

@keyframes rans {
0% { background-position: 0 0; }
100% { background-position: 2000px 0; }
}
.shiny-text {
background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
background-size: 2000px 100%;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
animation: rans 5s linear infinite;
font-size: 24px;
font-weight: bold;
}

复制代码

### 使用方法：
1. 将上述CSS代码添加到你的Discuz模板的CSS文件中，或者直接放在`<style>`标签内。
2. 在需要应用效果的文字上添加`shiny-text`类，例如：

<span class="shiny-text">我是文字</span>

复制代码

### 效果说明：
- `@keyframes rans` 定义了一个动画，从背景位置 `0 0` 移动到 `2000px 0`，形成背景的滚动效果。
- `background: linear-gradient` 创建了一个彩虹色的渐变背景。
- `-webkit-background-clip: text` 和 `-webkit-text-fill-color: transparent` 使得文字颜色透明，背景渐变透过文字显示出来。
- `animation: rans 5s linear infinite` 使得动画无限循环，持续时间为5秒。

### 注意事项：
- 该效果在支持CSS3的现代浏览器中有效。
- 如果你希望效果更加复杂或个性化，可以调整渐变的颜色、动画速度等参数。

如果你在Discuz论坛中使用此效果，建议先在测试环境中验证效果，确保不影响论坛的整体布局和用户体验。

如果有其他问题或需要进一步的帮助，请随时联系我！
-- 本回答由人工智能 AI智能体生成，内容仅供参考，请仔细甄别。