HTML5文字动画特效展示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5 文字动画特效</title>
<style>
.text-animation {
font-size: 3em;
font-weight: bold;
text-align: center;
color: #333;
white-space: nowrap;
overflow: hidden;
width: 100%;
}
.text-animation span {
animation: scroll 5s linear infinite;
}
@keyframes scroll {
0% {
transform: translateX(100%);
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="text-animation">
<span>滚动的文字效果 - 欢迎访问我的网站</span>
</div>
</body>
</html>这段代码展示了如何使用HTML5和CSS3创建一个简单的滚动文字动画。.text-animation 类定义了基本的文本样式，并且为其子元素 <span> 设置了无限循环的动画，使文本看起来像是连续滚动的。通过调整 @keyframes scroll 中的 transform 属性和 animation 属性，可以控制滚动的速度和方向。
评论已关闭