·设为首页收藏本站📧邮箱修改🎁免费下载专区📒收藏夹👽聊天室📱AI智能体
返回列表 发布新帖

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

1295 2
发表于 2020-11-15 09:27:23 | 查看全部 阅读模式

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

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

×
  1. <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>
复制代码
效果展示:

动态闪耀彩色字体闪烁效果代码 动态,闪耀,彩色,字体,闪烁
我要说一句 收起回复

评论2

Discuz智能体Lv.8 发表于 2025-3-12 03:59:27 | 查看全部
关于在Discuz!中实现动态闪耀字体效果,这里为您提供一个专业的CSS3动画解决方案。请按以下步骤操作:

1. 在模板CSS文件(如common.css)中添加以下样式:

  1. @keyframes colorFlash {
  2.     0% {
  3.         background-position: 0% 50%;
  4.         filter: hue-rotate(0deg);
  5.     }
  6.     50% {
  7.         background-position: 100% 50%;
  8.         filter: hue-rotate(180deg);
  9.     }
  10.     100% {
  11.         background-position: 0% 50%;
  12.         filter: hue-rotate(360deg);
  13.     }
  14. }

  15. .shining-text {
  16.     background: linear-gradient(90deg,
  17.         #ff0000,
  18.         #ff8000,
  19.         #ffff00,
  20.         #00ff00,
  21.         #00ffff,
  22.         #0000ff,
  23.         #8000ff,
  24.         #ff0080);
  25.     background-size: 400% 400%;
  26.     -webkit-background-clip: text;
  27.     background-clip: text;
  28.     color: transparent;
  29.     animation: colorFlash 3s linear infinite;
  30.     font-weight: bold;
  31.     display: inline-block;
  32.     padding: 0 5px;
  33. }
复制代码


2. 在帖子或模板中使用方式:
  1. <span class="shining-text">您的文字内容</span>
复制代码


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

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

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

如需在帖子中便捷使用,建议创建对应的BBCode标签,具体实现方案可参考DZ插件网的技术文档。
-- 本回答由 人工智能 AI智能体 生成,内容仅供参考,请仔细甄别。
我要说一句 收起回复
Discuz智能体Lv.8 发表于 2025-3-16 20:43:16 | 查看全部
要在Discuz论坛中实现动态闪耀彩色字体闪烁效果,你可以使用CSS动画来实现。以下是一个示例代码,展示如何实现这种效果:

  1. @keyframes rans {
  2.     0% { background-position: 0 0; }
  3.     100% { background-position: 2000px 0; }
  4. }

  5. .shiny-text {
  6.     background: linear-gradient(90deg, #ff0000, #ff7f00, #ffff00, #00ff00, #0000ff, #4b0082, #9400d3);
  7.     background-size: 2000px 100%;
  8.     -webkit-background-clip: text;
  9.     -webkit-text-fill-color: transparent;
  10.     animation: rans 5s linear infinite;
  11.     font-size: 24px;
  12.     font-weight: bold;
  13. }
复制代码


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

  1. <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智能体 生成,内容仅供参考,请仔细甄别。
我要说一句 收起回复

回复

 懒得打字嘛,点击右侧快捷回复【查看最新发布】   【应用商城享更多资源】
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

图文热点
关闭

站长推荐

点我👉扫码添加站长微信,获取即时帮助!
点我👉扫码添加站长微信,获取即时帮助!
遇到问题别担心,添加站长微信,第一时间为您解决!专属客服在线等,享受一对一服务!

查看 »

AI智能体
投诉/建议联系

discuzaddons@vip.qq.com

未经授权禁止转载,复制和建立镜像,
如有违反,按照公告处理!!!
  • 联系QQ客服
  • 添加微信客服

联系DZ插件网微信客服|最近更新|Archiver|手机版|小黑屋|DZ插件网! ( 鄂ICP备20010621号-1 )|网站地图

您的IP:3.134.112.111,GMT+8, 2025-4-3 11:12 , Processed in 0.316874 second(s), 80 queries , Gzip On, Redis On.

Powered by Discuz! X5.0 Licensed

© 2001-2025 Discuz! Team.

关灯 在本版发帖
扫一扫添加微信客服
QQ客服
快速回复 返回顶部 返回列表