sh.376 2024-08-26 21:31 采纳率: 0%
浏览 4

#html #css遇到的问题

我想实现第二张图片的效果，但是中间那条竖线不知道咋去处理，就是漂浮过后那条竖线占满了一整行了，没漂之前是不占一行的，我想实现漂浮后竖线不占满一行的效果，咋办啊？

            <title>a</title>        
        尚品汇欢迎您         免费注册    

img

img

  • 写回答

3条回答 默认 最新

  • 吃不了席 2024-08-26 21:32
    关注

    以下回复参考：皆我百晓生、券券喵儿等免费微信小程序作答:

    要实现漂浮后竖线不占满一行的效果，可以使用CSS的伪元素::before或::after来创建一个浮动的竖线。以下是一个示例代码：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container {
            position: relative;
            overflow: hidden;
        }

        .text {
            display: inline-block;
            position: relative;
            z-index: 1;
        }

        .text::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 100%;
            background-color: black;
            z-index: -1;
            animation: float 2s infinite;
        }

        @keyframes float {
            0% { transform: translateY(0); }
            50% { transform: translateY(-100%); }
            100% { transform: translateY(0); }
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="text">xxx欢迎您</span>
        <span class="text">免费注册</span>
    </div>
</body>
</html>

    在这个示例中，我们创建了一个名为.container的容器，将文本包裹在其中。然后，我们使用.text类为文本添加了相对定位和z-index属性，以便在文本上方显示浮动的竖线。接下来，我们使用::before伪元素创建了一个绝对定位的竖线，并为其添加了动画效果，使其在垂直方向上来回浮动。最后，我们使用@keyframes定义了动画的关键帧，使竖线在2秒内完成一次完整的上下浮动。

    评论

报告相同问题？

问题事件

  • 创建了问题 8月26日

悬赏问题

  • ¥15 网友们我该怎么办啊，急
  • ¥15 混合键合键合机对准标识
  • ¥100 现在不懂的是如何将当前的相机中的照片,作为纹理贴图,映射到扫描出的模型上
  • ¥15 目标跟踪，计算机视觉
  • ¥15 魔霸ROG7 pro,win11.息屏后会显示黑屏,如图，如何解决？(关键词-重新启动)
  • ¥15 有没有人知道这是哪里出了问题啊？要怎么改呀？
  • ¥200 C++表格文件处理-悬赏
  • ¥15 Windows Server2016本地登录失败
  • ¥15 复合卡卡号轨道写入芯片卡
  • ¥20 基于MATLAB的TDOA