CSS3文字闪烁效果
作者：庄泽峰 / 2023-12-25 10:15
Hello，GPT，请你用html5+CSS3来实现： 动感有创意的文字“Hello, GPT”。以下是一个使用HTML5和CSS3实现动感有创意的文字“Hello, GPT”的示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Hello, GPT</title>
<style>
@keyframes neon {
0% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #8cffa9, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #8cffa9;
}
20% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de;
}
40% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px ##8cffa9, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #8cffa9;
}
60% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de;
}
80% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #8cffa9, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #ff00de;
}
100% {
text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #ff00de, 0 0 40px #ff00de, 0 0 50px #ff00de, 0 0 60px #8cffa9;
}
}
body {
background-color: #000;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
h1 {
font-family: 'Arial', sans-serif;
font-size: 72px;
color: #8cffa9;
animation: neon 1.5s infinite alternate;
}
</style>
</head>
<body>
<h1>Hello, GPT</h1>
</body>
</html>
将上述代码保存为一个HTML文件，然后在浏览器中打开该文件，你将看到一个动感有创意的“Hello, GPT”文字效果。文字会以霓虹灯效果闪烁，并且有彩色的阴影。你可以根据需要调整CSS样式来改变文字的颜色、大小和动画效果。
