CSS实现围绕按钮边框转圈的光线效果

news2024/11/25 2:49:20

CSS实现围绕按钮边框转圈的光线效果,可以自由改变按钮的光线渐变颜色和按钮边框颜色,背景色等。

效果图:

实现完整代码:

<template>
	<view class="btnBlock">
		<view class="btnBian">

		</view>
		<view class="btn">诊疗之旅</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
			};
		},
		methods: {
		}
	};
</script>

<style scoped>
	.btnBlock {
		position: relative;
		overflow: hidden;
		height: 100rpx;
		width: 200rpx;
		margin: 50rpx;
		background-color: rgba(255, 105, 180, 0.2);
		border-radius: 3px;
	}

	.btnBian {
		height: 200rpx;
		width: 200rpx;
		border-radius: 3px;
		animation: border-line 3s infinite linear;
		z-index: 3;
		transform-origin: 0 0;
		top: 50%;
		left: 50%;
		content: '';
		background: linear-gradient(to bottom, #ffaa7f, #ff5500);
		position: absolute;

	}
	@keyframes border-line {
		to {
			transform: rotate(1turn);
		}
	}

	.btn {
		z-index: 4;
		height: 90rpx;
		width: 190rpx;
		margin: 2px;
		border-radius: 3px;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		overflow: hidden;
		background-color: #10647F;
		color:#fff;
	}

</style>

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

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

相关文章

MySQL MHA 高可用

目录 1 MySQL MHA 1.1 什么是 MHA 1.2 MHA 的组成 1.3 MHA 的特点 2 搭建 MySQL MHA 2.1 Master、Slave1、Slave2 节点上安装 mysql5.7 2.2 修改 Master、Slave1、Slave2 节点的主机名 2.3 修改 Master、Slave1、Slave2 节点的 Mysql主配置文件/etc/my.cnf 2.4 在 Mast…

现代架构设计:构建可伸缩、高性能的分布式系统

文章目录 第1节&#xff1a;引言第2节&#xff1a;架构设计的关键原则2.1 微服务架构2.2 异步通信2.3 数据分区和复制2.4 负载均衡 第3节&#xff1a;代码示例3.1 创建产品服务3.2 创建消息队列3.3 创建产品更新服务 第4节&#xff1a;性能优化和监控4.1 建立性能基准4.2 水平扩…

国内大语言模型的相对比较:ChatGLM2-6B、BAICHUAN2-7B、通义千问-6B、ChatGPT3.5

一、 前言 国产大模型有很多&#xff0c;比如文心一言、通义千问、星火、MOSS 和 ChatGLM 等等&#xff0c;但现在明确可以部署在本地并且开放 api 的只有 MOOS 和 ChatGLM。MOOS 由于需要的 GPU 显存过大&#xff08;不量化的情况下需要80GB&#xff0c;多轮对话还是会爆显存…

Spring整合RabbitMQ——生产者(利用配置类)

1.生产者配置步骤 2.引入依赖 3.编写配置 配置RabbitMQ的基本信息&#xff0c;用来创建连接工厂的 编写启动类 编写配置类 4. 编写测试类

C#(CSharp)入门教程

目录 C#的第一个程序 变量 折叠代码 变量类型和声明变量 获取变量类型所占内存空间&#xff08;sizeof&#xff09; 常量 转义字符 隐式转换 显示转换 异常捕获 运算符 算术运算符 布尔逻辑运算符 关系运算符 位运算符 其他运算符 字符串拼接 …

unity lua开发体系搭建

在前面的文章里面我们已经介绍了怎么样在unity里面配置lua的开发环境&#xff0c;我们可以通过C#代码装载lua的脚本并执行相应的处理&#xff0c;这次我们一步步搭建下lua的开发体系。 1.基于c#体系所有的类都继承MonoBehaviour在这里lua环境下我们也需要创建一个类似于这个类的…

Stm32_标准库_呼吸灯_按键控制

Stm32按键和输出差不多 PA1为LED供给正电&#xff0c;PB5放置按键&#xff0c;按键一端接PB5,另一端接负极 void Key_Init(void){RCC_APB2PeriphClockCmd(RCC_APB2Periph_GPIOB, ENABLE); //APB2总线连接着GPIOBGPIO_InitStructur.GPIO_Mode GPIO_Mode_IPU;GPIO_InitStructur.…

@vitejs/plugin-legacy 为你的 Vite 项目提供对旧版浏览器的支持

vitejs/plugin-legacy 是 Vite 生态系统中的一个插件&#xff0c;它的作用是为你的 Vite 项目提供对旧版浏览器的支持。 具体而言&#xff0c;该插件会根据你在项目配置中指定的目标浏览器列表&#xff08;通过 browserslist 字段&#xff09;&#xff0c;自动生成兼容旧版浏览…

FPGA 图像缩放 千兆网 UDP 网络视频传输,基于RTL8211 PHY实现,提供工程和QT上位机源码加技术支持

目录 1、前言版本更新说明免责声明 2、相关方案推荐UDP视频传输--无缩放FPGA图像缩放方案我这里已有的以太网方案 3、设计思路框架视频源选择ADV7611 解码芯片配置及采集动态彩条跨时钟FIFO图像缩放模块详解设计框图代码框图2种插值算法的整合与选择 UDP协议栈UDP视频数据组包U…

面试题08.05.递归算法

递归乘法。 写一个递归函数&#xff0c;不使用 * 运算符&#xff0c; 实现两个正整数的相乘。可以使用加号、减号、位移&#xff0c;但要吝啬一些。 示例1: 输入&#xff1a;A 1, B 10输出&#xff1a;10示例2: 输入&#xff1a;A 3, B 4输出&#xff1a;12提示: 保证乘法…

nodejs+vue 大学生就业管理系统

随着信息化时代的到来&#xff0c;管理系统都趋向于智能化、系统化&#xff0c;学生就业管理系统也不例外&#xff0c;但目前国内仍都使用人工管理&#xff0c;市场规模越来越大&#xff0c;同时信息量也越来越庞大&#xff0c;人工管理显然已无法应对时代的变化&#xff0c;而…

从MVC到DDD,该如何下手重构?

作者&#xff1a;付政委 博客&#xff1a;bugstack.cn 沉淀、分享、成长&#xff0c;让自己和他人都能有所收获&#xff01;&#x1f604; 大家好&#xff0c;我是技术UP主小傅哥。多年的 DDD 应用&#xff0c;使我开了技术的眼界&#xff01; MVC 旧工程腐化严重&#xff0c;…

云HIS 医院综合运营管理系统源码

医院管理信息系统&#xff08;HIS&#xff09;是医院基本、重要的管理系统&#xff0c;是医院大数据的基础。 基于云计算的云医疗信息系统&#xff08;云HIS&#xff09;。以SaaS的方式提供服务&#xff0c;系统遵循服务化、模块化原则开发&#xff0c;具有强大的可扩展性&…

vue实现移动端悬浮可拖拽按钮

需求&#xff1a; 按钮在页面侧边悬浮显示&#xff1b;点击按钮可展开多个快捷方式按钮&#xff0c;从下向上展开。长按按钮&#xff0c;则允许拖拽来改变按钮位置&#xff0c;按钮为非展开状态&#xff1b;按钮移动结束&#xff0c;手指松开&#xff0c;计算距离左右两侧距离…

喜迎中秋国庆双节,华为云Astro Canvas之我的中秋节设计大屏

目录 前言 前提条件 作品展示 薅羊毛 前言 大屏应用华为云Astro Canvas是华为云低代码平台Astro的子服务之一&#xff0c;是以数据可视化为核心&#xff0c;以屏幕轻松编排&#xff0c;多屏适配可视为基础&#xff0c;用户可通过图形化界面轻松搭建专业水准的数据可视化大屏…

面试:Spring中单例模式用的是哪种?

你好&#xff0c;我是田哥 需要简历优化、模拟面试、面试辅导、技术辅导......请联系我。10年码农24小时在线为你服务。 面试中被问到设计模式的概率还是蛮高的&#xff0c;尤其是问&#xff1a;你在项目中用过设计模式吗&#xff1f; 面对这个问题&#xff0c;我也在做模拟面试…

使用香橙派 在Linux环境中安装并学习Python

前言 在实际项目中&#xff0c;经常会遇到需要使用人工智能的场景&#xff0c;如人脸识别&#xff0c;车牌识别等...其一般的流程就是由单片机采集数据发送给提供人工智能算法模型的公司&#xff08;百度云&#xff0c;阿里云...&#xff09;&#xff0c;然后人工智能将结果回…

使用 Python 函数callable和isinstance的意义

一、说明 在这篇博客中&#xff0c;我们将探讨两个python函数&#xff1a;1 callable 中的函数及其有趣的应用程序。该callable函数用于检查对象是否可调用&#xff0c;这意味着它可以作为函数调用。2 isinstance这个内置函数允许我们比较两种不同的数据类型并确定它们是否相…

rancher部署pv、pvc、离线部署nfs

&#xff08;1&#xff09;NFS离线安装 使用nfs配置两台机器共享目录 假设两台机器188.188.30.32&#xff08;服务端&#xff09;、188.188.30.31&#xff08;客户端&#xff09;配置nfs 1.在可以联网的机器上下载rpm安装包 yum -y install nfs-utils --downloadonly --dow…

ETF场内基金佣金最低可达万0.5!速速办理

2023年ETF基金开户&#xff0c;交易手续费佣金一般默认是万三左右的&#xff0c;最低是5元起。想要申请低佣金是可以通过线上客户经理办理的&#xff0c;客户经理手中一般都是有低佣金开户渠道的&#xff0c;账户开通后还可以给您提供VIP专属服务&#xff0c;十几分钟就可以办理…