css动态边框

参考:

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.rhkb.cn/news/437447.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【算法】链表:206.反转链表(easy)

系列专栏 《分治》 《模拟》 《Linux》 目录 1、题目链接 2、题目介绍 3、解法&#xff08;快慢指针&#xff09; 解题步骤&#xff1a; 关键点&#xff1a; 复杂度分析&#xff1a; 4、代码 1、题目链接 206. 反转链表 - 力扣&#xff08;LeetCode&#xff09; …

如何用JavaScript编写一个简单的计数器

在网页开发中&#xff0c;计数器是一种常见的功能&#xff0c;它可以帮助我们记录点击次数、显示时间等。下面我将介绍如何在HTML页面中使用JavaScript实现一个基本的计数器。如图&#xff1a; 1、 创建HTML结构 首先&#xff0c;我们需要创建一个基础的HTML结构来容纳我们的计…

自动驾驶系列—深度剖析自动驾驶芯片SoC架构:选型指南与应用实战

&#x1f31f;&#x1f31f; 欢迎来到我的技术小筑&#xff0c;一个专为技术探索者打造的交流空间。在这里&#xff0c;我们不仅分享代码的智慧&#xff0c;还探讨技术的深度与广度。无论您是资深开发者还是技术新手&#xff0c;这里都有一片属于您的天空。让我们在知识的海洋中…

物联网将如何影响全球商业?

互联网使人们能够交流&#xff0c;企业能够全天候不间断地跨洋跨洲持续运营。它重塑、颠覆并催生了新的产业&#xff0c;改变了人类与世界互动的方式。互联网曾经仅仅是一种方便、快捷、廉价的向世界各地发送信息的方式&#xff0c;而现在&#xff0c;只需打开或关闭任何连接到…

【C++】树形结构的关联式容器:set、map、multiset、multimap的使用

&#x1f33b;个人主页&#xff1a;路飞雪吖~ ✨专栏&#xff1a;C/C 目录 一、set的简单介绍和使用 &#x1f31f;set的介绍 &#x1f525;注意&#xff1a; &#x1f320;小贴士&#xff1a; &#x1f31f;set的使用 ✨set的构造 ✨set的迭代器 ​编辑 ✨set的容量 …

Html--笔记01:使用软件vscode,简介Html5--基础骨架以及标题、段落、图片标签的使用

一.使用VSC--全称&#xff1a;Visual Studio Code vscode用来写html文件&#xff0c;打开文件夹与创建文件夹&#xff1a;①选择文件夹 ②拖拽文件 生成浏览器的html文件的快捷方式&#xff1a; &#xff01;enter 运行代码到网页的方法&#xff1a; 普通方法&#xff1a…

Vue3实现动态菜单功能

文章目录 0.效果演示1.搭建Vue3项目1.1 vite 脚手架创建 Vue3 项目1.2 设置文件别名1.3 安装配置 element-plus1.4 安装配置路由2.登录页面3.后台管理页面3.1 搭建后台框架3.2 左侧菜单栏3.3 header 用户信息3.4 主要内容3.5 footer4.配置静态路由5.记录激活菜单5.1 el-menu 绑…

yub‘s Algorithmic Adventures_Day3

yub’s Algorithmic Adventures_Day3 有序数组的平方 link&#xff1a;977. 有序数组的平方 - 力扣&#xff08;LeetCode&#xff09; 非递减顺序 一个数列中的元素从左到右依次不减&#xff0c;或者说不降序排列. 比如&#xff1a;1233445&#xff0c;12345. 思路分析 如果…

二分查找算法专题(1)

找往期文章包括但不限于本期文章中不懂的知识点&#xff1a; 个人主页&#xff1a;我要学编程(ಥ_ಥ)-CSDN博客 所属专栏&#xff1a; 优选算法专题 目录 二分查找算法的介绍 704. 二分查找 34. 在排序数组中查找元素的第一个和 最后一个位置 35. 搜索插入位置 69. x的平…

Java网络通信—UDP

0.小记 1.udp通信不需要建立socket管道&#xff0c;一边只管发&#xff0c;一边只管收 2.客户端&#xff1a;将数据&#xff08;byte&#xff09;打包成包裹&#xff08;DatagramPacket&#xff09;&#xff0c;写上地址&#xff08;IP端口&#xff09;&#xff0c;通过快递站&…

【网络安全】Cookie与ID未强绑定导致账户接管

未经许可,不得转载。 文章目录 前言正文前言 DigiLocker 是一项在线服务,旨在为公民提供一个安全的数字平台,用于存储和访问重要的文档,如 Aadhaar 卡、PAN 卡和成绩单等。DigiLocker 通过多因素身份验证(MFA)来保护用户账户安全,通常包括 6 位数的安全 PIN 和一次性密…

大数据开发--1.2 Linux介绍及虚拟机网络配置

目录 一. 计算机入门知识介绍 软件和硬件的概述 硬件 软件 操作系统概述 简单介绍 常见的系统操作 学习Linux系统 二. Linux系统介绍 简单介绍 发行版介绍 常用的发行版 三. Linux系统的安装和体验 Linux系统的安装 介绍 虚拟机原理 常见的虚拟机软件 体验Li…

[Linux] Linux 的进程如何调度——Linux的 O(1)进程调度算法

标题&#xff1a;[Linux] Linux 的进程如何调度——优先级与进程调度 个人主页水墨不写bug 目录 一、前言 二、将要出现的概念 1.进程调度队列 2.位图 3.进程的优先级 三、Linux进程的调度过程 1.活动队列&#xff08;*active指向的队列&#xff09; 2.过期队列&#…

openKylin--安装 .net6.0

编辑profile文件 cd .. //切换到根目录 cd /etc //切换到etc目录 vim profile //b编辑profile文件 1. 按→键移动到文件末尾 2. 按Insert键进入编辑模式 3. 按Enter另起一行开始编辑 export DOTNET_ROOT/home/dotnetexport PATH$PATH:/home/dotnet 可以通过右键--粘贴 的…

模拟实战数据落地:MSsql通过存储过程获得销售数据视图

话不多说 目标需求:通过传递参数(查询条件及查询时间)调用存储过程获得销售数据视图,并且在视图中有时间字段供后续引用,实现数据对接获取任务 最终结果如图: 实现以上结果步骤如下: 1)建立users表和orders表分别代表用户及订单,其中订单中用户id与用户表中用户id关联,并随机…

LLM - 使用 vLLM 部署 Qwen2-VL 多模态大模型 (配置 FlashAttention) 教程

欢迎关注我的CSDN:https://spike.blog.csdn.net/ 本文地址:https://spike.blog.csdn.net/article/details/142528967 免责声明:本文来源于个人知识与公开资料,仅用于学术交流,欢迎讨论,不支持转载。 vLLM 用于 大语言模型(LLM) 的推理和服务,具有多项优化技术,包括先进…

VMware ESXi Centos7网卡名称 ens192 变更eth0

1.在 /etc/sysconfig/network-scirpts/ 文件夹下 创建一个ifcfg-eth0的文件&#xff0c; 最简单的方式是 mv ifcfg-ens192 ifcfg-eth0 然后 vi ifcfg-eth0 把DEVICE改成 DEVICEeth0 wq! 保存 2. vi /etc/sysconfig/grub # 在位置添加 net.ifnames0 biosdevname0 参数 完…

java基础 day1

学习视频链接 人机交互的小故事 微软和乔布斯借鉴了施乐实现了如今的图形化界面 图形化界面对于用户来说&#xff0c;操作更加容易上手&#xff0c;但是也存在一些问题。使用图形化界面需要加载许多图片&#xff0c;所以消耗内存&#xff1b;此外运行的速度没有命令行快 Wi…

【iOS】计算器的仿写

计算器 文章目录 计算器前言简单的四则运算UI界面事件的逻辑小结 前言 笔者应组内要求&#xff0c;简单实现了一个可以完成简单四则运算的计算器程序。UI界面则是通过最近学习的Masonry库来实现的&#xff0c;而简单的四则运算内容则是通过栈来实现一个简单的四则运算。 简单…

QSqlDatabase在多线程中的使用

Qt中多线程使用数据库_qt数据库管理类支持多数据库,多线程-CSDN博客 1. 代码&#xff1a; #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QPushButton> #include <QSqlDatabase> #include <QSqlQuery> #include <QSqlError>…