HTML5文字动画特效展示

作者：System 时间：2024年08月19日分类：所有,html5 字数：1010




<!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 属性，可以控制滚动的速度和方向。

HTML5文字动画特效展示

评论已关闭

推荐阅读