CSS动画实现字体滚动播放

最新推荐文章于 2024-06-22 16:00:00 发布

mavengo

最新推荐文章于 2024-06-22 16:00:00 发布

阅读量2k

点赞数 3

分类专栏： CSS 文章标签： css html css3

本文链接：https://blog.csdn.net/qq_41872385/article/details/126604547

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

应用场景：

在实际开发过程中，对于一些导航栏的按钮宽度是定死的，但是项目涉及多种语言，每种语言的宽度是不一样的，难免存在文字溢出的情况，通过和产品的沟通，可以将溢出文字单行省略号表示，鼠标上浮时取消省略号，文字匀速滚动显示。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .menuItem {
            position: relative;
            display: inline-block;
            width: 150px;
            height: 50px;
            line-height: 50px;
            overflow: hidden;
            background-color: cadetblue;
            cursor: pointer;
        }

        .menuItem span {
            display: inline-block;
            overflow: hidden;
            white-space: nowrap;
            min-width: 150px;
            width: auto;
            height: 100%;
            text-overflow: ellipsis;
        }

        @keyframes scrollItem {
            from {
                left: 0px;
            }

            to {
                left: -150px;
            }
        }

        .menuItem:hover span {
            position: absolute;
            width: auto;
            text-overflow: unset;
            overflow: visible;
            animation-timing-function: linear;
            animation: scrollItem 3s infinite;
        }
    </style>
</head>

<body>
    <div class="menuItem">
        <span>一级菜单一级菜单一级菜单一级菜单一级菜单一级菜单一级菜单一级菜单一级菜单</span>
    </div>
</body>

</html>

遇到的问题：

动画最终目标写成"right: 0px"将不会有匀速过度的效果。当时考虑的是这种写法可以不用考虑当前文字容器的宽度，但是没有过度效果，只能是将过度效果的长度写死，要是文字溢出的很少的话还是可以考虑这种写法的。

值得注意的是，需要给文字容器添加"min-width: 150px; width: auto;"样式，否则的话没有溢出的文字也会滚动显示。

@keyframes scrollItem {
    from {
            left: 0px;
         }

      to {
            right: 0px;
         }
}

mavengo

关注

3
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
CSS动画实现字体滚动播放

CSS动画实现字体滚动播放
复制链接

扫一扫

专栏目录