AI 助理
备案控制台
开发者社区 云原生 文章 正文

CSS实现流光线条效果

2023-06-25 1835
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 最近做了一个纯`css`实现的流光效果，在做这个需求之前在网上找了很多示例效果，结果都不能达到我想要的效果，于是自己动手实现了下面这样的。

最近做了一个纯css实现的流光效果，在做这个需求之前在网上找了很多示例效果，结果都不能达到我想要的效果，于是自己动手实现了下面这样的。

image.png

网上冲浪

在做这个之前就肯定是先百度，有好用的就直接复制就好了，但是网上的没有我这个光边，还有直来直去的，不能达到像我这样四面环绕的效果。

直来直去的就是只有像我这样一条边的，四面环绕的没有光边就是去掉我的光边，就是没有我这种带光边的，然后看了一下他们实现的代码，外层容器加了overflow:hidden，这样光边肯定是不能要的了。

直来直去

image.png

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        html,
        body {
    
    
            margin: 0;
            padding: 0;
        }

        body {
    
    
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #282c34;
        }

        .container {
    
    
            background: #0e96e7;
            width: 400px;
            height: 4px;
            position: relative;
            overflow: hidden;
        }

        .container::before {
    
    
            content: '';
            position: absolute;
            height: 4px;
            width: 80px;
            background: linear-gradient(to right, transparent, #fff);
            animation: left_to_right 4s 0s infinite;
        }

        @keyframes left_to_right {
    
    
            0% {
    
    
                left: -80px;
            }

            100% {
    
    
                left: calc(100% + 80px);
            }
        }
    </style>
</head>
<body>
<div class="container"></div>
</body>
</html>

四面环绕没有光边

image.png

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #282c34;
        }

        .container {
            width: 400px;
            height: 400px;
            position: relative;
            overflow: hidden;
        }

        .container::before {
            content: '';
            display: block;
            width: calc(100% - 8px);
            height: calc(100% - 8px);
            border: 4px solid #0e96e7;
        }

        .line-top {
            position: absolute;
            width: 80px;
            height: 4px;
            top: 0;
            left: 0;
            background: linear-gradient(to right, #0e96e7, #fff);
            animation: left_to_right 4s 0s linear infinite;
        }

        .line-right {
            position: absolute;
            width: 4px;
            height: 80px;
            top: -80px;
            right: 0;
            background: linear-gradient(#0e96e7, #fff);
            animation: top_to_bottom 4s 3s linear infinite;
        }

        .line-bottom {
            position: absolute;
            width: 80px;
            height: 4px;
            bottom: 0;
            right: -80px;
            background: linear-gradient(to left, #0e96e7, #fff);
            animation: right_to_left 4s 6s linear infinite;
        }

        .line-left {
            position: absolute;
            width: 4px;
            height: 80px;
            bottom: -80px;
            left: 0;
            background: linear-gradient(to top, #0e96e7, #fff);
            animation: bottom_to_top 4s 9s linear infinite;
        }

        @keyframes left_to_right {
            0% {
                left: -80px;
            }


            100% {
                left: calc(100% + 80px);
            }
        }

        @keyframes top_to_bottom {
            0% {
                top: -80px;
            }

            100% {
                top: calc(100% + 80px);
            }
        }

        @keyframes right_to_left {
            0% {
                right: -80px;
            }

            100% {
                right: calc(100% + 80px);
            }
        }

        @keyframes bottom_to_top {
            0% {
                bottom: -80px;
            }

            100% {
                bottom: calc(100% + 80px);
            }

        }

    </style>
</head>
<body>
<div class="container">
    <span class="line-top"></span>
    <span class="line-right"></span>
    <span class="line-bottom"></span>
    <span class="line-left"></span>
</div>
</body>
</html>

上面的代码就不分解了，基本上长得都一样，看懂一个就都懂了，四周环绕就是直来直去的加强版。

实现光边

实现光边很简单，移除overflow:hidden，然后加上box-shadow是不是就好了？

image.png

上面为了演示效果，故意弄歪了，可以看到不加overflow:hidden的问题一下就出来了，然后box-shadow的效果也不是很好，颜色没法过渡，和主模块的过渡也很僵硬。

处理溢出

内容溢出？假如我没有内容是不是就不会溢出了呢？那就修改动画吧。

image.png

这里长度400px，之前的动画4s执行完成，也就是每秒走100px，滑块长度是80px，这样不好计算，直接把动画改成5s，每秒走80px，然后掐头去尾巴，动画部分修改如下

@keyframes left_to_right {
    0% {
        left: 0;
        width: 0;
    }

    20% {
        left: 0;
        width: 80px;
    }

    80% {
        left: calc(100% - 80px);
        width: 80px;
    }

    100% {
        left: calc(100%);
        width: 0;
    }
}

完成一面，其他的面就都差不多了，这里的具体实现就不细细展开了，文尾会上完整代码，接下来是处理光边

处理光边

  • 思路1clip-path

光边使用box-shadow无法用渐变，形状也不可控，这里是不是可以直接使用clip-path来实现自定义的形状，然后再使用渐变色来做平滑过渡，最后再使用filter: blur高斯模糊来模拟光边？

说干就干，奈何自己太菜，svg的path没研究明白，后面精进吧，不上代码了，这条路断了。

  • 思路2阉割

退而求次吧，直接高斯模糊吧，形状就将就一下吧，直接加上伪类。

.line::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    height: 20px;
    width: 100%;
    background: linear-gradient(to right, transparent, #0e96e7, #fff);
    filter: blur(4px);
    border-radius: 0 10px 10px 0;/*这里实现一个圆头效果*/
}

image.png

效果看上去还可以，好了，开始四周环绕了，直接上代码吧

<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>

    <style>

        html,
        body {
            margin: 0;
            padding: 0;
        }

        body {
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #282c34;
        }

        .container {
            width: 400px;
            height: 400px;
            position: relative;
            border: 1px solid #0e96e7;
        }

        .line-top {
            position: absolute;
            width: 80px;
            height: 1px;
            top: -1px;
            left: 0;
            background: linear-gradient(to right, #0e96e7, #fff);
            border-radius: 50%;
            animation: left_to_right 4s 0s linear infinite;
        }

        .line-top::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 11px;
            background: linear-gradient(to right, transparent, #0e96e7, #fff);
            left: 0;
            top: -5px;
            filter: blur(4px);
            z-index: -1;
        }

        .line-right {
            position: absolute;
            width: 1px;
            height: 0;
            top: 0;
            right: -1px;
            background: linear-gradient(#0e96e7, #fff);
            animation: top_to_bottom 4s 3s linear infinite;
        }

        .line-right::before {
            content: "";
            position: absolute;
            width: 11px;
            height: 100%;
            background: linear-gradient(to bottom, transparent, #0e96e7, #fff);
            left: -5px;
            top: 0;
            filter: blur(4px);
            z-index: -1;
        }

        .line-bottom {
            position: absolute;
            width: 0;
            height: 1px;
            bottom: -1px;
            right: 0;
            background: linear-gradient(to left, #0e96e7, #fff);
            border-radius: 50%;
            animation: right_to_left 4s 6s linear infinite;
        }

        .line-bottom::before {
            content: "";
            position: absolute;
            width: 100%;
            height: 11px;
            background: linear-gradient(to left, transparent, #0e96e7, #fff);
            left: 0;
            top: -5px;
            filter: blur(4px);
            z-index: -1;
        }

        .line-left {
            position: absolute;
            width: 1px;
            height: 0;
            bottom: 0;
            left: -1px;
            background: linear-gradient(to top, #0e96e7, #fff);
            animation: bottom_to_top 4s 9s linear infinite;
        }

        .line-left::before {
            content: "";
            position: absolute;
            width: 11px;
            height: 100%;
            background: linear-gradient(to top, transparent, #0e96e7, #fff);
            left: -5px;
            top: 0;
            filter: blur(4px);
            z-index: -1;
        }


        @keyframes left_to_right {
            0% {
                width: 0;
                left: 0;
            }

            25% {
                left: 0;
                width: 80px;
            }

            75% {
                left: calc(100% - 80px);
                width: 80px;
            }

            100% {
                left: 100%;
                width: 0;
            }
        }

        @keyframes top_to_bottom {
            0% {
                top: 0;
                height: 0;
            }

            25% {
                top: 0;
                height: 80px;
            }

            75% {
                top: calc(100% - 80px);
                height: 80px;
            }

            100% {
                top: 100%;
                height: 0;
            }
        }

        @keyframes right_to_left {
            0% {
                right: 0;
            }

            25% {
                width: 80px;
                right: 0;
            }

            75% {
                width: 80px;
                right: calc(100% - 80px);
            }

            100% {
                right: 100%;
                width: 0;
            }
        }

        @keyframes bottom_to_top {
            0% {
                bottom: 0;
            }

            25% {
                bottom: 0;
                height: 80px;
            }

            75% {
                height: 80px;
                bottom: calc(100% - 80px);
            }


            100% {
                bottom: 100%;
                height: 0;
            }

        }

    </style>
</head>
<body>
<div class="container">
    <span class="line-top"></span>
    <span class="line-right"></span>
    <span class="line-bottom"></span>
    <span class="line-left"></span>

</div>
</body>
</html>

image.png

这里还有bug，就是转场的时候，白色一直都在，因为颜色是过渡的，这个颜色就一直都在，有一个思路就是把内容全都变成伪类，内容大小不变，外层框框overflow:hidden，动态大小，转场的时候把内容挤消失，这里就懒得实现了。

文章标签：
前端开发
容器
田八
目录
相关文章
游客fz577umxdejsg
|
3月前
|
前端开发 容器
边框线条的魔法：CSS动画效果，让网页设计流动起来！
边框线条的魔法：CSS动画效果，让网页设计流动起来！
游客fz577umxdejsg
373 0
游客fz577umxdejsg
|
3月前
|
前端开发
CSS流光文字效果：打造网页上的霓虹灯效果！
CSS流光文字效果：打造网页上的霓虹灯效果！
游客fz577umxdejsg
67 0
写代码的大学生
|
5月前
|
前端开发
css动画效果（边框流光闪烁阴影效果）
css动画效果（边框流光闪烁阴影效果）
写代码的大学生
182 1
破浪前进
|
6月前
|
前端开发
css流光效果简单版
css流光效果简单版
破浪前进
96 0
祈澈菇凉
|
前端开发
CSS实现中间粗两头细的线条
CSS实现中间粗两头细的线条
祈澈菇凉
90 1
破浪前进
|
前端开发
css流光效果简单版
css流光效果简单版
破浪前进
186 0
DCodes
|
前端开发
css实现画面转场以及边框线条动画
css实现画面转场以及边框线条动画
DCodes
246 0
MiyueFE
|
前端开发 JavaScript
CSS进阶向--纯css实现流光边框（二）
CSS进阶向--纯css实现流光边框（二）
MiyueFE
2313 1
CSS进阶向--纯css实现流光边框（二）
MiyueFE
|
前端开发 JavaScript 程序员
CSS进阶向--纯css实现流光边框
CSS进阶向--纯css实现流光边框
MiyueFE
2004 0
游客6w5iiviqxobva
|
前端开发
好看的css预加载旋转动画 与 流光字体
好看的css预加载旋转动画 与 流光字体
游客6w5iiviqxobva
183 0
好看的css预加载旋转动画 与 流光字体

热门文章

最新文章

  • 1
    CSS 居中方法总结
  • 2
    纯CSS3实现宽屏二级下拉菜单
  • 3
    CSS3实现多样的边框效果
  • 4
    CSS3-实现单选框radio的小动画
  • 5
    使用 CSS3 实现 3D 图片滑块效果【附源码下载】
  • 6
    CSS3实现时间轴效果
  • 7
    【HTML+CSS+JS】前端三剑客实现3D旋转照片墙
  • 8
    05.javascript访问CSS
  • 9
    CSS3中的选择器
  • 10
    Css:背景色透明，内容不透明之终极方法！兼容所有浏览器
  • 1
    使用CSS中的cursor属性值，常用的可设置参数，以及其他16中参数值的使用场景和示例代码
    72
  • 2
    技术心得：xpath、CSS定位方法
    46
  • 3
    【UI】 elementui的dialog弹窗打开时CSS的BUG | 滚动条消失bug
    162
  • 4
    CSS【详解】对齐 （含文本垂直对齐，文本水平对齐、单行文本垂直居中、多行文本垂直居中、6 种方案块级元素水平垂直居中 、7 种方案图片水平垂直居中、文本自适应对齐、图标和文本对齐，图片和文本对齐等）
    76
  • 5
    CSS【详解】布局 display （ 含 flex 布局，grid 布局，table 布局，float 布局，响应式布局 等）
    142
  • 6
    CSS【详解】定位 position （静态定位 static -- 文档流排布 、相对定位 relative、绝对定位 absolute、固定定位 fixed、黏性定位 sticky）
    51
  • 7
    CSS【详解】长度单位 （ px，%，em，rem，vw，vh，vmin，vmax，ex，ch ）
    74
  • 8
    CSS 【详解】样式选择器（含ID、类、标签、通配、属性、伪类、伪元素、Content属性、子代、后代、兄弟、相邻兄弟、交集、并集等选择器）
    159
  • 9
    使用HTML和CSS创建响应式表格
    165
  • 10
    常见的css优化方案都有那些
    51

    • 相关课程

    更多
  • CSS 快速掌握
  • 零基础学前端HTML+CSS
  • 前端开发CSS基础

    • 相关电子书

    更多
  • 零基础CSS入门教程
  • 低代码开发师（初级）实战教程
  • 阿里巴巴DevOps 最佳实践手册

    • 相关实验场景

    更多
  • CSS基础教程
  • 前端开发基础3：CSS3常见显示属性
    • 下一篇
    阿里云OSS设置跨域访问