找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 319|回复: 0

js实现文字渐变色效果。

[复制链接]

25

主题

6

回帖

3956

积分

版主

积分
3956

优秀版主i 认证

发表于 2024-8-17 17:29:52 | 显示全部楼层 |阅读模式
效果如图:
  1. <!DOCTYPE html>
  2. <html>

  3. <head>
  4.   <meta charset="utf-8">
  5.   <meta name="viewport" content="width=device-width">
  6.   <title>www.oklun.com</title>
  7.   <link href="style.css" rel="stylesheet" type="text/css" />
  8. </head>

  9. <body>
  10.   <h2 id="text">【www.oklun.com】渐变文字。</h2>
  11. </body>
  12. <script>

  13.   const titles = document.getElementById('text');
  14.   titles.style.backgroundImage = 'linear-gradient(to right, red, orange, yellow, green, blue, indigo, violet)';
  15.   titles.style.webkitBackgroundClip = 'text';
  16.   titles.style.webkitTextFillColor = 'transparent';

  17. </script>

  18. </html>
复制代码




本帖子中包含更多资源

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

×
享年116.
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

手机版|OK论坛

GMT+8, 2024-12-23 09:13 , Processed in 0.058822 second(s), 21 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表