CSS实现鼠标滑入文字渐入动画效果

最新推荐文章于 2024-10-07 23:36:42 发布

过路云野

最新推荐文章于 2024-10-07 23:36:42 发布

阅读量855

点赞数 1

分类专栏： CSS案例大全文章标签： css 前端

本文链接：https://blog.csdn.net/qq_44577699/article/details/132879390

版权

CSS案例大全专栏收录该内容

4 篇文章 0 订阅

订阅专栏

我们创建了一个名为 container 的容器，用于包含要显示的文本。我们将其宽度设置为500px，并使用 margin: 50px auto 将其水平居中。

然后，我们创建了一个名为 text 的元素，用于显示要渐入的文本。我们将其字体大小设置为30px、字体加粗、颜色为黑色，并将其初始透明度设置为0。我们还使用 transition 属性设置了透明度变化的过渡效果。

接下来，我们在 text 元素中使用了多个 span 元素，每个 span 元素包含一个字母。我们将每个 span 元素的初始透明度设置为0，并使用 transition 属性设置了透明度变化的过渡效果。

然后，我们使用 :hover 伪类选择器来定义鼠标滑入时的样式。当鼠标滑入 text 元素时，我们将其透明度设置为1，使其逐渐渐入。当鼠标滑入 span 元素时，我们将其透明度设置为1，使其逐个渐入。

最后，我们将 text 元素放置在 container 容器中，并在其中添加了一个包含多个 span 元素的文本，用于展示逐个渐入的效果

代码如下：

<!DOCTYPE html>
<html>
<head>
    <style>
        .container {
            width: 500px;
            margin: 100px auto;
            text-align: center;
			border: 1px solid gray;
			border-radius: 30px;
        }

        .text {
            font-size: 50px;
            font-weight: bold;
            color: deepskyblue;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .text span {
            display: inline-block;
            opacity: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .text:hover span {
            opacity: 1;
        }

        .text:hover {
            opacity: 1;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="text">
            <span>H</span><span>e</span><span>l</span><span>l</span><span>o</span>
        </div>
    </div>
</body>
</html>