css文字渐渐出来的效果
时间: 2023-07-25 12:17:13 浏览: 85
你可以通过CSS中的动画属性来实现文字渐渐出来的效果。以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>CSS Text Fade In</title>
<style>
.fade-in {
opacity: 0;
animation: fadeIn 2s ease-in-out forwards;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
</style>
</head>
<body>
<h1 class="fade-in">Hello World!</h1>
</body>
</html>
```
在这个示例中,我们使用了`opacity`属性来设置元素的透明度,并使用了`animation`属性来定义一个名为`fadeIn`的动画。该动画将元素的透明度从0渐变为1,持续时间为2秒,速度变化为“ease-in-out”,并保持在最终状态(即透明度为1)。
接下来,我们将`.fade-in`类应用到一个`<h1>`元素上,以使其在页面加载时以渐隐渐现的方式出现。
你可以根据自己的需求修改动画的属性和持续时间,以实现不同的效果。
阅读全文