js实现英文单词悬浮变粗渐变效果代码-html代码-BFW代码库

js实现英文单词悬浮变粗渐变效果代码

代码语言：html

所属分类：悬停

代码描述：js实现英文单词悬浮变粗渐变效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开


<!DOCTYPE html>
<html lang="en" >

<head>

  <meta charset="UTF-8">

  
<style>
@import url("https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght@8..144,100;8..144,200;8..144,300;8..144,400;8..144,500;8..144,600;8..144,700;8..144,800;8..144,900;8..144,1000&display=swap");

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

body {
}

.split h2 {
  font-size: 3.5em;
  font-weight: 100;
  text-align: center;
  font-family: "Roboto Flex";
  font-weight: 300;
  font-style: normal;
  font-stretch: 100%;
  line-height: initial;
  font-variation-settings: "opsz" 48, "slnt" 0, "GRAD" 0, "XTRA" 468, "YOPQ" 79,
    "YTAS" 750, "YTDE" -203, "YTFI" 738, "YTLC" 514, "YTUC" 712;
  font-optical-sizing: auto;
}

.split h2 span {
  display: inline-block;
  white-space: break-spaces;
  transition: font-weight 0.2s ease;
  position: relative;
}

.split h2 span::before,
.split h2 span::after {
  content: attr(data-char);
  position: absolute;
  left: 0;
  color: transparent;
}

.split h2 span::after{
  z-index: 2;
  filter: none;
  color: transparent;
   background: linear-gradient(#2cc8f7, #ceff00) 0% 0% / 400% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
</style>



</head>

<body  >
  <div class="split">
  <h2>Hello World I'm a text,<br/> hover me to see the magic </h2>
</div>

  
      <script >
const color = `255 255 255`;

const splitText = () => {
  const split = document.querySelector(".split");
  const textContainer = split.querySelector("h2");
  const text = textContainer.innerHTML;

  textContainer.innerHTML = "";

  const lines = text.split(/<br\s*\/?>/i);

  lines.forEach(line => {
    const lineDiv = document.createElement("div");
    split.querySelector("h2").appendChil.........完整代码请登录后点击上方下载按钮下载查看