每日css

最新推荐文章于 2024-09-05 14:19:06 发布

niuyueyang

最新推荐文章于 2024-09-05 14:19:06 发布

阅读量120

点赞数

分类专栏： css3 文章标签： css3

本文链接：https://blog.csdn.net/qq_33332184/article/details/103327542

版权

css3 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

本文介绍了一种使用 CSS3 实现文字动画效果的方法，通过背景图片和文本结合，创建了一个独特的 HelloCSS3 动画展示。该动画利用了 background-clip 和 animation 属性，实现了背景图片的平滑滚动和文本的渐显效果。

摘要由CSDN通过智能技术生成

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style.css"/>
</head>
<body>
    <ul>
        <li data-text="Hello CSS3">
            Hello CSS3
        </li>
    </ul>
</body>
</html>

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    width: 100%;
    min-height: 100vh;
    background-color: #111;
    display: flex;
    justify-content: center;
    align-items: center;
}
ul li{
    position: relative;
    display: block;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 4em;
    font-weight: 800;
    color: rgba(255,255,255,0.1);
}
ul li:before{
    content:attr(data-text);
    position: absolute;
    left:0;
    top:0;
    background: url("./wave.png") repeat-x;
    -webkit-background-clip: text;
    animation: animate 2s linear infinite;
    transition: 0.5s;
    width:0;
    overflow: hidden;
    white-space: nowrap;
}
ul li:hover:before{
    width:100%;
}
@keyframes animate {
    0%{
        background-position: 0px;
    }
    100%{
        background-position: 200px;
    }
}