html炫酷特效代码
时间: 2023-07-01 22:06:02 浏览: 170
以下是一个简单的 HTML 炫酷特效的代码,可以在鼠标悬停时显示一个动态的文本效果:
```html
<!DOCTYPE html>
<html>
<head>
<title>炫酷特效</title>
<style>
.effect {
display: inline-block;
position: relative;
font-size: 40px;
color: #fff;
text-shadow: 0 0 10px #fff;
cursor: pointer;
}
.effect:hover:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #00bcd4;
animation: effect 2s infinite;
opacity: 0;
color: #fff;
text-shadow: none;
font-size: 70px;
line-height: 100px;
text-align: center;
padding-top: 20px;
z-index: -1;
}
@keyframes effect {
0% {
opacity: 0;
transform: scale(0.8);
}
50% {
opacity: 1;
transform: scale(1.2);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}
</style>
</head>
<body>
<div class="effect" data-text="炫酷特效">炫酷特效</div>
</body>
</html>
```
这段代码使用了 CSS 的 `:hover` 伪类和 `:after` 伪元素来实现特效。当鼠标悬停在 `.effect` 元素上时,会在其后面创建一个带有动态文本的伪元素,并且通过 CSS 动画使其显示出来。此外,还使用了 `@keyframes` 关键字定义了一个名为 `effect` 的动画,用于控制文本的缩放和透明度变化。你可以根据需要修改代码中的样式来实现自己想要的效果。