使用CSS和Javascript的文本悬停效果

七夏（UID：1） · 发表于 2024-10-17 21:07:26

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

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

×

使用CSS和Javascript的文本悬停效果

本节主要使用HTML+CSS+JAVASCRIPT实现一个鼠标移入文本文字颜色逐个改变的效果。

演示效果

HTML

<!doctype html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <title>使用CSS和Javascript的文本悬停效果</title>
  <link rel='stylesheet' href='style.css'>
</head>
<body>

<h2 class='text'>Text Hover Effects</h2>

<script src='script.js'></script>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css?family=Poppins:700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Poppins, sans-serif;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background: #222;
}
h2 {
  position: relative;
  font-size: 3em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 700;
}
h2 span {
  color: #555;
  transition: 0.25s;
}
h2:hover span {
  color: #0f0;
  text-shadow: 0 0 5px #0f0, 0 0 15px #0f0, 0 0 30px #0f0;
}

JAVASCRIPT

let text = document.querySelector('.text')
text.innerHTML = text.innerText.split('').map((letters, i) => {
  return `<span style='transition-delay: ${i * 40}ms; filter: hue-rotate(${i * 30}deg)'>${letters}</span>`
}).join('')

使用CSS和Javascript的文本悬停效果

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

使用CSS和Javascript的文本悬停效果

演示效果

HTML

CSS

JAVASCRIPT

快速回帖

分享帝

龙年限定

关于楼主

商务推广