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及以下浏览器。
底图:
效果图: