当前位置: 首页 > news >正文

vue 流光边框矩形圆形容器

实现流光边框一般是用渐变背景加动画实现,然后使用内部盒子遮挡内部空间,达到边框流光的效果

思路:背景渐变+旋转动画

功能:

  • 自定义渐变(是否渐变<不渐变没有流光效果>,渐变颜色,渐变角度,渐变宽度)
  • 自定义动画时间

1 基础实现

<template><Box> 测试 </Box>
</template>
<script setup lang="ts">
import Box from "./Box.vue";
</script>
<style scoped></style>
<template><div class="box"><div class="content"><slot></slot></div></div>
</template>
<script setup lang="ts"></script>
<style scoped lang="scss">
.box {display: flex;justify-content: center;align-items: center;text-align: center;position: relative;width: 100%;height: 100%;padding: 5px;border-radius: 10px;overflow: hidden;&:before {content: "";background-image: linear-gradient(120deg, #5ddcff, #3c67e3 40%, #4e00c2);position: absolute;z-index: 0;padding-left: 130%;padding-bottom: 130%;animation: rotate 8s linear infinite;}.content {height: 100%;width: 100%;display: flex;align-items: center;padding: 24px 20px;background: #f1d674;z-index: 2;border-radius: 6px;}
}
@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
</style>

动图(略)

2 封装组件

2.1 圆形边框

使用mask属性,使得中间部分背景不被遮挡

<template><div class="box" :style="{ width: width + 'px', height: height + 'px' }"><slot></slot></div>
</template>
<script setup lang="ts">
const props = defineProps({width: {type: Number, //容器宽default: 100,},height: {type: Number, //容器高default: 100,},colors: {//颜色数组type: Array,default: () => [{color: "#64dcfd",width: 0,},{color: "#406cf1",width: 100,},{color: "#4501ac",width: 101,},],},angle: {//渐变角度type: Number,default: 120,},borderWidth: {//流光边框宽度type: Number,default: 10,},gradient: {//是否渐变type: Boolean,default: true,},duration: {//动画时间type: String,default: "5s",},
});const background = computed(() => {const positions = [];const colorsCopy = JSON.parse(JSON.stringify(props.colors));colorsCopy.forEach((s, index) => {const sum = colorsCopy.slice(0, index).reduce((a, b) => a + b.width, 0);if (!props.gradient) {positions.push(sum);}positions.push(sum + s.width);});return `linear-gradient(${props.angle}deg, ${colorsCopy.map((s, index) => {if (!props.gradient) {return `${s.color} ${positions[index]}px, ${s.color} ${positions[2 * index + 1]}px`;}return `${s.color} ${positions[index]}px`;}).join(",")})`;
});const borderLR = computed(() => {return props.width / 2 - props.borderWidth + "px";
});
const borderLRShink = computed(() => {return props.width / 2 - props.borderWidth - 1 + "px";
});
</script>
<style scoped lang="scss">
.box {display: flex;justify-content: center;align-items: center;position: relative;width: 100%;height: 100%;border-radius: 50%;overflow: hidden;&:before {content: "";background-image: v-bind(background);position: absolute;width: 100%;height: 100%;border-radius: 50%;animation: rotate v-bind(duration) linear infinite;mask: radial-gradient(transparent,transparent v-bind(borderLRShink),#000 v-bind(borderLR));-webkit-mask: radial-gradient(transparent,transparent v-bind(borderLRShink),#000 v-bind(borderLR));}
}
@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
</style>

​​​​​​​

2.2 矩形边框

使用伪元素,自定义中间部分背景

<template><div class="box" :style="{ width: width + 'px', height: height + 'px' }"><slot></slot></div>
</template>
<script setup lang="ts">
const props = defineProps({width: {type: Number, //容器宽default: 100,},height: {type: Number, //容器高default: 100,},colors: {//颜色数组type: Array,default: () => [{color: "#64dcfd",width: 0,},{color: "#406cf1",width: 100,},{color: "#4501ac",width: 101,},],},angle: {//渐变角度type: Number,default: 120,},borderWidth: {//左右流光边框宽度type: [Array, Number],default: [20, 5],},gradient: {//是否渐变type: Boolean,default: true,},duration: {//动画时间type: String,default: "5s",},innerBackground: {//内部背景type: String,default: "#FFF",},
});const background = computed(() => {const positions = [];const colorsCopy = JSON.parse(JSON.stringify(props.colors));colorsCopy.forEach((s, index) => {const sum = colorsCopy.slice(0, index).reduce((a, b) => a + b.width, 0);if (!props.gradient) {positions.push(sum);}positions.push(sum + s.width);});return `linear-gradient(${props.angle}deg, ${colorsCopy.map((s, index) => {if (!props.gradient) {return `${s.color} ${positions[index]}px, ${s.color} ${positions[2 * index + 1]}px`;}return `${s.color} ${positions[index]}px`;}).join(",")})`;
});const innerWidth = computed(() => {let doubleBorderWidth = 0;if (Array.isArray(props.borderWidth)) {if (props.borderWidth.length === 2) {doubleBorderWidth = props.borderWidth[1] * 2;} else if (props.borderWidth.length === 1) {doubleBorderWidth = props.borderWidth[0] * 2;}} else {doubleBorderWidth = props.borderWidth * 2;}return props.width - doubleBorderWidth + "px";
});
const innerheight = computed(() => {let doubleBorderWidth = 0;if (Array.isArray(props.borderWidth)) {if (props.borderWidth.length === 2) {doubleBorderWidth = props.borderWidth[0] * 2;} else if (props.borderWidth.length === 1) {doubleBorderWidth = props.borderWidth[0] * 2;}} else {doubleBorderWidth = props.borderWidth * 2;}return props.height - doubleBorderWidth + "px";
});
const colorSize = computed(() => {return (Math.ceil(Math.sqrt(props.width * props.width + props.height * props.height)) + "px");
});
</script>
<style scoped lang="scss">
.box {display: flex;justify-content: center;align-items: center;position: relative;width: 100%;height: 100%;overflow: hidden;&:before {content: "";background-image: v-bind(background);position: absolute;width: v-bind(colorSize);height: v-bind(colorSize);animation: rotate v-bind(duration) linear infinite;}&:after {content: "";background: v-bind(innerBackground);position: absolute;z-index: 1;width: v-bind(innerWidth);height: v-bind(innerheight);}
}
@keyframes rotate {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}
}
</style>

相关文章:

vue 流光边框矩形圆形容器

实现流光边框一般是用渐变背景加动画实现&#xff0c;然后使用内部盒子遮挡内部空间&#xff0c;达到边框流光的效果 思路&#xff1a;背景渐变旋转动画 功能&#xff1a; 自定义渐变&#xff08;是否渐变<不渐变没有流光效果>&#xff0c;渐变颜色&#xff0c;渐变角…...

明理信息科技打造专属个人或企业知识付费平台,核心功能设计

在当今信息爆炸的时代&#xff0c;知识管理已经成为了每个人必须面对的问题。然而&#xff0c;市面上的知识付费平台大多数都是通用的&#xff0c;无法满足个性化需求。 因此&#xff0c;明理信息科技提供了一款专属定制的适合个人的知识付费平台。核心产品能力如下&#xff1…...

超结MOS/低压MOS在5G基站电源上的应用-REASUNOS瑞森半导体

一、前言 5G基站是5G网络的核心设备&#xff0c;实现有线通信网络与无线终端之间的无线信号传输&#xff0c;5G基站主要分为宏基站和小基站。5G基站由于通信设备功耗大&#xff0c;采用由电源插座、交直流配电、防雷器、整流模块和监控模块组成的电气柜。所以顾名思义&#xf…...

字节8年经验之谈 —— 如何从0开始做自动化测试?

自动化测试是使用软件工具在应用程序上自动运行测试的过程&#xff0c;无需任何人为干预。这可以通过减少手动测试的需要来保存时间并提高软件开发过程的效率。由于人为错误或不一致性&#xff0c;手动测试可能容易出错&#xff0c;这可能导致错误未被检测到。自动化测试通过提…...

深入探索Zookeeper的ZAB协议:分布式系统的核心解析

引言 自我进入软件开发领域以来&#xff0c;我一直对分布式系统充满着浓厚的兴趣。在这个领域中&#xff0c;Zookeeper无疑是一个备受关注的重要组件。作为一名资深的Java工程师&#xff0c;我有幸深入探索过Zookeeper的许多方面&#xff0c;其中最让我着迷的部分莫过于其核心机…...

安捷伦Agilent 34970A数据采集

易学易用 从34972A简化的配置到内置的图形Web界面&#xff0c;我们都投入了非常多的时间和精力&#xff0c;以帮助您节约宝贵的时间。一些非常简单的东西,例如模块上螺旋型端子连接器内置热电偶参考结、包括众多实例和提示的完整用户文档&#xff0c;以及使您能够在开机数分钟后…...

Apache Flume(5):多个agent模型

可以将多个Flume agent 程序连接在一起&#xff0c;其中一个agent的sink将数据发送到另一个agent的source。Avro文件格式是使用Flume通过网络发送数据的标准方法。 从多个Web服务器收集日志&#xff0c;发送到一个或多个集中处理的agent&#xff0c;之后再发往日志存储中心&…...

如何在Ubuntu系统中安装VNC并结合内网穿透实现远程访问桌面

文章目录 前言1. ubuntu安装VNC2. 设置vnc开机启动3. windows 安装VNC viewer连接工具4. 内网穿透4.1 安装cpolar【支持使用一键脚本命令安装】4.2 创建隧道映射4.3 测试公网远程访问 5. 配置固定TCP地址5.1 保留一个固定的公网TCP端口地址5.2 配置固定公网TCP端口地址5.3 测试…...

JaCoCo 统计度量

1、JaCoCo: 一个判断算2个Branch&#xff0c;最后一个括号算一行 2、IDEA&#xff1a;一个判断算一个Branch&#xff0c;最后一个括号不算一行...

我们经常使用的AI技术

窄人工智能 Narrow AI 窄人工智能主要集中于处理相对单一的任务&#xff0c;可以理解&#xff0c;科学家在研究如何模拟人类智能时&#xff0c;一种思路就是我们是不是可以先分别模拟人的不同能力&#xff0c;例如我们的视觉能力&#xff0c;文字识别能力等等。所以就演化出针…...

静态路由及动态路由

文章目录 静态路由及动态路由一、静态路由基础1. 静态路由配置2. 负载分担3. 路由备份4. 缺省路由5. 静态路由实操 二、RIP 动态路由协议1. RIP 协议概述2. RIP 协议版本对比2.1 有类路由及无类路由 3. RIP 路由协议原理4. RIP 计时器5. 度量值6. 收敛7. 示例 静态路由及动态路…...

MySQL——表的增删查改

目录 一.Create&#xff08;创建&#xff09; 1.单行数据 全列插入 2.多行数据 指定列插入 3.插入否则更新 4. 替换 二.Retrieve&#xff08;读取&#xff09; 1. select 列 查询 2.where 条件 3.结果排序 4.筛选分页结果 三.Update &#xff08;修改&#xff09;…...

javascript_1

3) string ⭐️ js 字符串三种写法 let a "hello"; // 双引号 let b "world"; // 单引号 let c hello; // 反引号 html 代码如下&#xff0c;用 java 和 js 中的字符串如何表示&#xff1f; <a href"1.html">超链接</a> …...

【ranger】CDP环境 更新 ranger 权限策略会发生低概率丢失权限策略的解决方法

一、问题描述&#xff1a; 我们的 kafka 服务在更新&#xff08;添加&#xff09; ranger 权限时&#xff0c;会有极低的概率导致 MM2 同步服务报错&#xff0c;报错内容 Not Authorized。但是查看 ranger 权限是赋予的&#xff0c;并且很早配置的权限策略也会报错。 相关组件…...

Python安装及配置

一、前置说明 Python的安装有两种方式&#xff1a;1. 访问Python官方网站下载安装&#xff1b;2. 使用Python的开源发行版进行安装。 Anaconda 是一个用于科学计算、数据分析和机器学习的开源发行版&#xff0c;它包含了许多常用的科学计算和数据分析库。Anaconda 不仅仅是 P…...

Instagram 外贸产品推广技巧

在Instagram上&#xff0c;外贸业务有许多独特的机会来展示其产品并吸引国际买家。成功的外贸产品推广要求细致的策略、引人入胜的创意内容和有针对性的市场洞察。下面的小节将详细解析如何在Instagram上进行外贸产品的有效推广。 1.创意与视觉呈现 Instagram是一个基于图片和…...

5款实用的小工具,让你的日常生活多姿多彩

​ 简单而小巧的工具&#xff0c;经常能在日常中悄然发挥极大的作用。这五款小工具可能成为你生活中不可或缺的一部分。 1.网络浏览器——Brave ​ Brave是一款基于Chromium内核的开源网络浏览器&#xff0c;它可以阻止网站的广告和跟踪程序&#xff0c;保护您的隐私和安全。…...

【改进YOLOv8】磁瓦缺陷分类系统:改进LSKNet骨干网络的YOLOv8

1.研究背景与意义 项目参考AAAI Association for the Advancement of Artificial Intelligence 研究背景与意义 近年来&#xff0c;随着智能制造产业的不断发展&#xff0c;基于人工智能与机器视觉的自动化产品缺陷检测技术在各行各业中得到了广泛应用。磁瓦作为永磁电机的主…...

Linux-VRRP

这里写自定义目录标题 一、VRRP简介1.1 什么是VRRP&#xff1f;1.2 keepalived是什么&#xff1f; 二、配置过程2.1 试验模型2.2. Keepalived监控和维护VRRP集群的步骤 一、VRRP简介 1.1 什么是VRRP&#xff1f; VRRP&#xff08;Virtual Router Redundancy Protocol&#xff…...

使用Axure的中继器的交互动作解决增删改查h

&#x1f3ac; 艳艳耶✌️&#xff1a;个人主页 &#x1f525; 个人专栏 &#xff1a;《产品经理如何画泳道图&流程图》 ⛺️ 越努力 &#xff0c;越幸运 目录 一、中继器的交互 1、什么是中继器的交互 2、Axure中继器的交互 3、如何使用中继器&#xff1f; 二…...

Docker 离线安装指南

参考文章 1、确认操作系统类型及内核版本 Docker依赖于Linux内核的一些特性&#xff0c;不同版本的Docker对内核版本有不同要求。例如&#xff0c;Docker 17.06及之后的版本通常需要Linux内核3.10及以上版本&#xff0c;Docker17.09及更高版本对应Linux内核4.9.x及更高版本。…...

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

rknn优化教程(二)

文章目录 1. 前述2. 三方库的封装2.1 xrepo中的库2.2 xrepo之外的库2.2.1 opencv2.2.2 rknnrt2.2.3 spdlog 3. rknn_engine库 1. 前述 OK&#xff0c;开始写第二篇的内容了。这篇博客主要能写一下&#xff1a; 如何给一些三方库按照xmake方式进行封装&#xff0c;供调用如何按…...

Python:操作 Excel 折叠

💖亲爱的技术爱好者们,热烈欢迎来到 Kant2048 的博客!我是 Thomas Kant,很开心能在CSDN上与你们相遇~💖 本博客的精华专栏: 【自动化测试】 【测试经验】 【人工智能】 【Python】 Python 操作 Excel 系列 读取单元格数据按行写入设置行高和列宽自动调整行高和列宽水平…...

通过Wrangler CLI在worker中创建数据库和表

官方使用文档&#xff1a;Getting started Cloudflare D1 docs 创建数据库 在命令行中执行完成之后&#xff0c;会在本地和远程创建数据库&#xff1a; npx wranglerlatest d1 create prod-d1-tutorial 在cf中就可以看到数据库&#xff1a; 现在&#xff0c;您的Cloudfla…...

PPT|230页| 制造集团企业供应链端到端的数字化解决方案:从需求到结算的全链路业务闭环构建

制造业采购供应链管理是企业运营的核心环节&#xff0c;供应链协同管理在供应链上下游企业之间建立紧密的合作关系&#xff0c;通过信息共享、资源整合、业务协同等方式&#xff0c;实现供应链的全面管理和优化&#xff0c;提高供应链的效率和透明度&#xff0c;降低供应链的成…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

测试markdown--肇兴

day1&#xff1a; 1、去程&#xff1a;7:04 --11:32高铁 高铁右转上售票大厅2楼&#xff0c;穿过候车厅下一楼&#xff0c;上大巴车 &#xffe5;10/人 **2、到达&#xff1a;**12点多到达寨子&#xff0c;买门票&#xff0c;美团/抖音&#xff1a;&#xffe5;78人 3、中饭&a…...

使用van-uploader 的UI组件,结合vue2如何实现图片上传组件的封装

以下是基于 vant-ui&#xff08;适配 Vue2 版本 &#xff09;实现截图中照片上传预览、删除功能&#xff0c;并封装成可复用组件的完整代码&#xff0c;包含样式和逻辑实现&#xff0c;可直接在 Vue2 项目中使用&#xff1a; 1. 封装的图片上传组件 ImageUploader.vue <te…...

学习STC51单片机31(芯片为STC89C52RCRC)OLED显示屏1

每日一言 生活的美好&#xff0c;总是藏在那些你咬牙坚持的日子里。 硬件&#xff1a;OLED 以后要用到OLED的时候找到这个文件 OLED的设备地址 SSD1306"SSD" 是品牌缩写&#xff0c;"1306" 是产品编号。 驱动 OLED 屏幕的 IIC 总线数据传输格式 示意图 …...