CSS3发光文字字体切换特效

最新推荐文章于 2024-05-14 14:41:52 发布

千秋TʌT

最新推荐文章于 2024-05-14 14:41:52 发布

阅读量187

点赞数

分类专栏： html5 文章标签： html5 css Powered by 金山文档

本文链接：https://blog.csdn.net/weixin_53666393/article/details/129453753

版权

html5 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

index.html代码

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CSS3发光文字字体切换特效 - 站长素材</title>

<link href="https://fonts.googleapis.com/css2?family=Kirang+Haerang&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Rye&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Amatic+SC:wght@700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Fredericka+the+Great&display=swap" rel="stylesheet">

<link rel="stylesheet" href="css/style.css">

</head>
<body>

<div class="container">
  <h2 class="loki">
    <p class="letter">L</p>
    <p class="letter">O</p>
    <p class="letter">v</p>
    <p class="letter">E</p>
  </h2>
</div>

<script  src="js/script.js"></script>

</body>
</html>

css代码

html {
  font-family: 100%;
  box-sizing: border-box;
}

*, *::before, *::after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

body {
  height: 100vh;
  width: 100%;
  font-family: "Indie Flower", cursive;
  background-color: #121212;
  color: #ffffffda;
}

img {
  display: block;
}

.container {
  height: 100%;
  width: 100%;
  display: grid;
  place-content: center;
  background-image: url("../img/daf.png");
  background-size: cover;
}

.loki {
  font-size: 7rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 30rem;
}
.loki .letter {
  text-shadow: 0 0 0.4em #ffffffda, 0 0 0.5em #ffffffda, 0 0 0.25em #ffffffda;
  mix-blend-mode: screen;
}

JavaScript 代码

const fonts = [
  'Kirang Haerang',
  'Indie Flower',
  'Rye',
   'Amatic SC',
  'Bangers',
  'Fredericka the Great'
];

const letters = document.querySelectorAll('.letter');

let count=0;

const rollIntro = () => {
  letters.forEach(letter => {
    
  let randomFontIndex = Math.floor(Math.random() * fonts.length);
    let randomFont = fonts[randomFontIndex];
  
 letter.style.fontFamily=randomFont;
});
}

let introAnimation = setInterval(function() {
  rollIntro();
  if(count>15)
    clearInterval(introAnimation);
  count++;
},350);

适用浏览器：Chrome、FireFox、360、搜狗、Opera、傲游. 不支持Windows版Safari、IE8及以下浏览器。

底图：