css动态边框

news2024/11/16 17:30:31

参考:

Clip-path实现按钮流动边框动画_在线clip-path-CSDN博客

https://www.5axxw.com/questions/simple/9ju5yt#google_vignette

              <div class="bottom-top-item-centent bottom-top-item-left">
                <vue-seamless-scroll :data="listLeftData" :class-option="defaultLeftOption">
                  <ul class="ul-scoll">
                    <li v-for="(item, index) in listLeftData" :key='index'>
                      <span class="title">{{ item.title }}</span>
                      <span class="date">{{ item.time }}</span>
                    </li>
                  </ul>
                </vue-seamless-scroll>
              </div>
            .bottom-top-item-left {
              width: 94%;
              height: 130px;
              overflow: hidden;
              border: 1px solid #283dff;
              // animation: border-flow 2s linear infinite;
              position: relative;
              transition: all .5s;


              .ul-scoll {
                padding: 10px;
                margin: 0 auto;
                border: 2px solid transparent;


                /* 背景不重复 */
                li {
                  list-style: none;
                  display: flex;
                  justify-content: space-between;
                  align-items: center;
                  margin: 4px;
                  padding: 2px;
                  color: #fff;
                  font-size: 14px;
                  // background: rgba(198, 142, 226, 0.2);
                }

                &:last-child {
                  padding: 0;

                  li {
                    &:last-child {
                      // padding: 0 2px;
                      padding-bottom: 0;
                      margin: 0 4px;
                    }

                    &:first-child {
                      margin-top: 0;
                    }
                  }
                }
              }

              &::after,
              &::before {
                content: "";
                position: absolute;
                border: 2px solid rgb(216, 125, 13);
                width: 99%;
                height: 126px;
                // border-radius: 10px;
                /* 简写为 */
                inset: 0px;
                /* 添加动画 */
                animation: pathRotate 3s infinite linear;
              }

              &::before {
                // border-color: rgb(250, 255, 192);
                border-color: #0efcff;
              }

              @keyframes pathRotate {

                0%,
                100% {
                  clip-path: inset(0 0 98% 0);
                  // border-image: linear-gradient(to right, #f0c3e3 0%, #8ec5fc 100%);
                  // border-image-slice: 1;
                }

                25% {
                  clip-path: inset(0 98% 0 0);
                  // border-image: linear-gradient(to right, #8ec5fc 0%, #f0c3e3 100%);
                  // border-image-slice: 1;
                }

                50% {
                  clip-path: inset(98% 0 0 0);
                }

                75% {
                  clip-path: inset(0 0 0 98%);
                }
              }

              &::after {
                animation-delay: -1.5s;
              }

              &:hover {
                filter: brightness(1.5);
              }

            }

            // @keyframes border-flow {
            //   0% {
            //     border-left-color: #000;
            //     border-top-color: #afc;
            //   }

            //   25% {
            //     border-top-color: transparent;
            //     border-right-color: #afc; //#bcf;
            //   }

            //   50% {
            //     border-right-color: transparent;
            //     border-bottom-color: #afc; // pink;
            //   }

            //   75% {
            //     border-bottom-color: transparent;
            //     border-left-color: #afc; // #dcf;
            //   }

            //   100% {
            //     border-left-color: transparent;
            //     border-top-color: #afc; // hotpink;
            //   }
            // }

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2170085.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

稿件生产业务并发竞争场景下的安全性保障

一. 背景 视频业务作为B站内容生态的心脏&#xff0c;承载了海量的视频内容和用户互动。它不仅是用户获取信息、享受娱乐的窗口&#xff0c;更是UP主展示创意、分享知识的舞台。在设计和实现视频系统时&#xff0c;我们致力于平衡用户体验、内容分发的效率&#xff0c;同时确保…

H5支付 两种成熟方案

H5支付&#xff0c;对前端来讲并不算难。主要工作量都在后端&#xff0c;需要对接支付宝API文档配置大量参数与商户信息。 前端需要做的是正常调取支付接口&#xff0c;拿到配置好的支付信息&#xff0c;触发后续流程&#xff0c;再利用本地存储拿支付订单号判断支付结果即可【…

SpringBoot使用EasyPoi根据模板导出word or pdf

1、导出效果 1.1 wrod 1.2 pdf 2、依赖 <!--word--><dependency><groupId>cn.afterturn</groupId><artifactId>easypoi-base</artifactId><version>4.3.0</version></dependency><dependency><groupId>cn.…

leetcode968. 监控二叉树

给定一个二叉树&#xff0c;我们在树的节点上安装摄像头。 节点上的每个摄影头都可以监视其父对象、自身及其直接子对象。 计算监控树的所有节点所需的最小摄像头数量。 示例 1&#xff1a; 输入&#xff1a;[0,0,null,0,0] 输出&#xff1a;1 解释&#xff1a;如图所示&#x…

回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提取特征与原始特征进行融合预测

回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提取特征与原始特征进行融合预测 文章目录 一、基本原理原理流程总结 二、实验结果三、核心代码四、代码获取五、总结 回归预测|基于卷积神经网络-支持向量机的数据回归预测Matlab程序CNN-SVM 卷积提…

有关若依登录过程前端的对应处理学习

导言 在用C#搞完个后端后想用若依的前端做对接&#xff0c;不过很久没搞过若依了&#xff0c;想趁这个二次开发的过程记录熟悉一下登录的过程 过程 验证&#xff0c;在permission.js的路由守卫&#xff0c;这里在用户发起api请求时会验证用户的请求是否有token&#xff0c;对…

网络编程(10)——json序列化

十、day10 今天学习如何使用jsoncpp将json数据解析为c对象&#xff0c;将c对象序列化为json数据。jsoncp经常在网络通信中使用&#xff0c;也就是服务器和客户端的通信一般使用json&#xff08;可视化好&#xff09;&#xff1b;而protobuf一般在服务器之间的通信中使用 json…

C# 委托(Delegate)二

一.委托的多播&#xff08;Multicasting of a Delegate&#xff09;&#xff1a; 委托对象&#xff0c;使用 "" 运算符进行合并&#xff0c;一个合并委托调用它所合并的两个委托。使用"-" 运算符从合并的委托中移除组件委托。 注&#xff1a;只有相同类型…

使用 Napkins.dev 将草图转换为应用程序

在现代前端开发中&#xff0c;快速将设计草图转换为实际的应用程序代码是一个巨大的优势。Napkins.dev 是一个利用人工智能将网站设计草图转换成实际应用程序的平台。本文将介绍如何使用 Napkins.dev 进行这一过程。 什么是 Napkins.dev&#xff1f; Napkins.dev 是一个开源平…

机器学习-TopicModel

概率图模型基础概率潜在语义分析&#xff08;PLSA&#xff09;LDA 概率图模型基础 猜球游戏 有两个信封&#xff0c;其中一个装有一个红球&#xff0c;一个黑球。另一个信封有两个黑球。 。 假设红球价值100元&#xff0c;黑球价值1元。 你随机从其中拿起一个信封&#xff0c;从…

Linux高阶IO之select多路转接

文章目录 select多路转接timeoutfd_set返回值执行过程总结 select多路转接 多路转接有三种方案,分别是select,poll和epoll,我们都会讲解和介绍 select的函数原型是这样的 他一共有五个参数,但是可以分为三组 nfds:需要监视的最大的文件描述符值1readfds:可读文件描述符集合 …

C#邮件发送:实现自动化邮件通知完整指南!

C#邮件发送性能怎么优化&#xff1f;使用C#发送邮件的设置步骤&#xff1f; 无论是用于客户服务、内部沟通还是项目管理&#xff0c;自动化邮件通知都能显著提高效率和响应速度。AokSend将详细介绍如何使用C#邮件发送功能来实现自动化邮件通知系统。 C#邮件发送&#xff1a;配…

二、词法分析,《编译原理》(本科教学版),第2版

文章目录 一、词法分析器1.1 词法分析器的作用1.2 词法分析器的设计方法1.3Antlr 词法分析器生成器1.3.1 环境准备1.3.2 词法分析器自动生成初体验&#xff08;需了解少许正则表达式概念&#xff09;1.3.2.1 创建工程1.3.2.2 空白符逻辑1.3.2.3 实现INT类型1.3.2.4 实现单行注释…

ClkLog常见问题-埋点集成篇Sec. 2

本篇将继续解答ClkLog使用过程中【埋点集成】阶段的常见问题。 1.【埋点集成】 问&#xff1a;receiver数据接收是不是一定要有ssl证书&#xff1f; 答&#xff1a;不是。 2.【埋点集成】 问&#xff1a;接收服务地址从哪里获取&#xff1f; 答&#xff1a;接收服务地址参考&am…

死磕P7: JVM垃圾回收那点事,轻松拿捏不是事儿(一)

这是「死磕P7」系列第 003 篇文章&#xff0c;欢迎大家来跟我一起 死磕 100 天&#xff0c;争取在 2025 年来临之际&#xff0c;给自己一个交代。 上两篇介绍了 JVM 内存区域划分&#xff0c;简单记忆一下就可以了&#xff0c;后面再不断深入吧。 死磕P7: JVM内存划分必知必会…

Spring邮件发送:配置与发送邮件详细步骤?

Spring邮件发送教程指南&#xff1f;怎么用Spring邮件发送服务&#xff1f; Spring框架提供了强大的邮件发送支持&#xff0c;使得开发者能够轻松地在应用程序中集成邮件发送功能。AokSend将详细介绍如何在Spring应用中配置和发送邮件&#xff0c;帮助开发者快速掌握这一关键技…

浙大数据结构:06-图2 Saving James Bond - Easy Version

这道题是稍复杂版的dfs或bfs&#xff0c;此处我采用bfs实现 机翻&#xff1a; 1、条件准备 n为鳄鱼数量&#xff0c;jump为跳一次最大距离。 eyu数组对存每条鳄鱼的坐标位置&#xff0c;visit数组判断该鳄鱼是否走过&#xff0c;isalive判断到达该鳄鱼时能否逃离。 #includ…

探索图像生成大模型Imagen:原理、比较与应用

目录 目录 1. 引言 2. 图像生成模型的发展背景 2.1 生成对抗网络&#xff08;GAN&#xff09; 2.2 变分自编码器&#xff08;VAE&#xff09; 2.3 自回归模型 2.4 扩散模型 3. Imagen简介 3.1 模型架构 3.2 关键技术 3.3 训练数据与方法 4. Imagen与其他模型的比较 …

ArcGIS Pro高级地图可视化—双变量符号地图

ArcGIS Pro高级地图可视化 ——双变量符号地图 1 背景 “我不是双变量&#xff0c;但我很好奇。”出自2013 年南卡罗来纳州格林维尔举行的 NACIS 会议上&#xff0c;双变量地图随着这句俏皮的话便跳跃在人们的视角下&#xff0c;在讨论二元映射之后&#xff0c;它不仅恰逢其…

AOT源码解析4.5-AOT整体结构

论文阅读 papergithub论文阅读笔记AOT源码解析1-数据集处理AOT源码解析2-encoderdecoderAOT源码解析3-模型训练AOT源码解析4.1-model主体AOT源码解析4.2-model主体AOT源码解析4.3-model主体AOT源码解析4.4-model主体AOT源码解析4.5-model主体 4.1~4.4小节详细讲解了ref_imgs相…