css3 hover border 流动效果

 

 

/* Hover 边线流动 */.hoverDrawLine {border: 0 !important;position: relative;border-radius: 5px;--border-color: #60daaa;
}
.hoverDrawLine::before,
.hoverDrawLine::after {box-sizing: border-box;content: '';position: absolute;border: 2px solid transparent;border-radius: 5px;width: 0;height: 0;
}
.hoverDrawLine::before {top: 0;left: 0;-webkit-transition: height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s,border-color 0s ease-in-out 1s;transition: height 0.25s ease-out 0.5s, width 0.25s ease-out 0.75s,border-color 0s ease-in-out 1s;
}
.hoverDrawLine::after {bottom: 0;right: 0;-webkit-transition: height 0.25s ease-out 0s, width 0.25s ease-out 0.25s,border-color 0s ease-in-out 0.5s;transition: height 0.25s ease-out 0s, width 0.25s ease-out 0.25s,border-color 0s ease-in-out 0.5s;
}.hoverDrawLine:hover::before,
.hoverDrawLine:hover::after {width: 100%;height: 100%;
}
.hoverDrawLine:hover::before {border-top-color: var(--border-color);border-right-color: var(--border-color);-webkit-transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.hoverDrawLine:hover::after {border-bottom-color: var(--border-color);border-left-color: var(--border-color);-webkit-transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;transition: width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
<div class="hoverDrawLine"></div>

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

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

相关文章

生成对抗网络DCGAN学习实践

在AI内容生成领域&#xff0c;有三种常见的AI模型技术&#xff1a;GAN、VAE、Diffusion。其中&#xff0c;Diffusion是较新的技术&#xff0c;相关资料较为稀缺。VAE通常更多用于压缩任务&#xff0c;而GAN由于其问世较早&#xff0c;相关的开源项目和科普文章也更加全面&#…

【机器学习】Gradient Descent

Gradient Descent for Linear Regression 1、梯度下降2、梯度下降算法的实现(1) 计算梯度(2) 梯度下降(3) 梯度下降的cost与迭代次数(4) 预测 3、绘图4、学习率 首先导入所需的库&#xff1a; import math, copy import numpy as np import matplotlib.pyplot as plt plt.styl…

Devops系统中jira平台迁移

需求:把aws中的devops系统迁移到华为云中,其中主要是jira系统中的数据迁移,主要方法为在华为云中建立一套 与aws相同的devops平台,再把数据库和文件系统中的数据迁移,最后进行测试。 主要涉及到的服务集群CCE、数据库mysql、弹性文件服务SFS、数据复制DRS、弹性负载均衡ELB。 迁…

问道管理:补仓什么意思?怎么补仓可以降低成本?

补仓这个术语我们在理财出资中经常听到&#xff0c;例如基金补仓&#xff0c;股票补仓。那么&#xff0c;补仓什么意思&#xff1f;怎样补仓能够降低成本&#xff1f;问道管理为我们预备了相关内容&#xff0c;以供参阅。 补仓什么意思&#xff1f; 股票补仓是指出资者在某一只…

Debian 12.1 “书虫 “发布,包含 89 个错误修复和 26 个安全更新

导读Debian 项目今天宣布&#xff0c;作为最新 Debian GNU/Linux 12 “书虫 “操作系统系列的首个 ISO 更新&#xff0c;Debian 12.1 正式发布并全面上市。 Debian 12.1 是在 Debian GNU/Linux 12 “书虫 “发布六周后推出的&#xff0c;目的是为那些希望在新硬件上部署操作系统…

Java学习一 --- Java简介

Java是一种高级编程语言&#xff0c;由Sun Microsystems创建并于1995年发布。它是一种面向对象的语言&#xff0c;被广泛应用于Web、移动设备、桌面应用程序、游戏、数据库等领域。Java具有跨平台特性&#xff0c;即一次编写&#xff0c;多平台运行&#xff0c;所以它也被称为“…

Vivado进行自定义IP封装

一. 简介 本篇文章将介绍如何使用Vivado来对上篇文章(FPGA驱动SPI屏幕)中的代码进行一个IP封装&#xff0c;Vivado自带的IP核应该都使用过&#xff0c;非常方便。 这里将其封装成IP核的目的主要是为了后续项目的调用&#xff0c;否则当我新建一个项目的时候&#xff0c;我需要将…

探讨未来的法规变革:以算法备案为例

在进入科技高速发展的二十一世纪&#xff0c;越来越多的公司、组织和个人开始采用复杂的算法来优化决策、提升生产力并开创创新。同时&#xff0c;对这些算法的治理、监管和备案也成为了社会关注的焦点。本文将尝试探讨未来算法备案的法规变革&#xff0c;以期给予所有与此相关…

VirtualBox Ubuntu无法安装增强功能以及无法复制粘贴踩坑记录

在VirtualBox安装增强功能想要和主机双向复制粘贴&#xff0c;中间查了很多资料&#xff0c;终于是弄好了。记录一下过程&#xff0c;可能对后来人也有帮助&#xff0c;我把我参考的几篇主要的博客都贴上来了&#xff0c;如果觉得我哪里讲得不清楚的&#xff0c;可以去对应的博…

Shell脚本学习-Shell函数

函数的作用就是将程序里多次被调用的相同代码组合起来&#xff08;函数体&#xff09;&#xff0c;并为其取一个名字&#xff0c;即函数名。其他所有想重复调用这部分代码的地方都只需要调用这个名字就可以了。当需要修改这部分代码时候&#xff0c;只需要修改函数体内的这部分…

NOI2023 打金记

Day -4 最后一场模拟赛&#xff0c;肯定要用力打啊&#xff01; 然而一题不会&#xff0c;呜呜呜。 于是开始拼暴力&#xff0c;写了 90 60 60 210 90 60 60 210 906060210&#xff0c;结果挂成 40 60 60 160 40 60 60 160 406060160。 T1 我将题目转化为&am…

【简单认识GFS分布式文件系统】

文章目录 一.GlusterFS 概述1.GlusterFS简介2.特点3.GlusterFS 术语4.模块化堆栈式架构5.GlusterFS 的工作流程6.GlusterFS的卷类型1、**分布式卷&#xff08;Distribute volume&#xff09;**2、条带卷&#xff08;Stripe volume&#xff09;3、复制卷&#xff08;Replica vol…

JS检测属性位于对象本身还是来自于其原型链

学习原型链时有这个疑问&#xff0c;之前查过了但是老是忘记&#xff0c;现在记录一下&#xff0c;避免忘记。 参考&#xff1a;https://blog.csdn.net/weixin_40920953/article/details/88295651 1.in操作符 in 操作符会在通过对象能够访问给定属性时返回true&#xff0c;无…

Web后端基本设计思想

JavaWeb应用的后端一般基于MVC和三层架构思想实现。 MVC是一种设计模式&#xff0c;用于开发用户界面和交互式应用程序。M即Model&#xff0c;业务模型&#xff0c;负责处理应用程序的业务逻辑和数据&#xff1b;V即View&#xff0c;视图&#xff0c;负责给用户展示界面和数据&…

在一台电脑上,如何配置多个SSH Key?

场景描述 开发人员通常只会生成一个SSH Key&#xff0c;名字叫id_rsa&#xff0c;然后提交到多个不同的网站&#xff08;如&#xff1a;GitHub、CodeArts或Gitee&#xff09;。 但是也存在另一种需要&#xff0c;在同一个网站上&#xff0c;注册了两个用户名&#xff0c;通常…

快速创建vue3+vite+ts项目

安装nodejs 创建项目 npm init vitelatest 默认之后回车 选择项目名字my-vue-project 选择vue框架 选择ts 运行项目 cd my-vue-project npm install --registryhttps://registry.npm.taobao.org npm run dev

Vue2 第十二节 Vue组件化编程(一)

1.模块与组件&#xff0c;模块化与组件化概念 2. 非单文件组件 3. 组件编写注意事项 4. 组件的嵌套 一. 模块与组件&#xff0c;模块化与组件化 传统方式编写存在的问题 &#xff08;1&#xff09;依赖关系混乱&#xff0c;不好维护 &#xff08;2&#xff09;代码的复用…

ROI draw_rake

dev_get_window (WindowHandle) dev_set_color (green) * 1. 创建ROI draw_rake函数 Elements:20 DetectHeight:120 DetectWidth:35 draw_rake (Regions, WindowHandle, Elements, DetectHeight, DetectWidth, Row1, Column1, Row2, Column2) 绘制过程中&#xff0c;需要沿着…

炒股杠杆途乐证券;股票买入卖出时间规则?

股票买入卖出时刻规则是指出资者在股票商场上进行生意交易时需求遵循的一系列时刻规定。正确的买入和卖出时刻能够协助出资者最大化出资回报&#xff0c;一起降低风险。但是&#xff0c;在股票商场上&#xff0c;生意时刻的挑选是一个复杂的问题&#xff0c;需求从多个角度剖析…

Vue上线打包优化

Vue上线打包优化 在开发Vue项目时&#xff0c;我们通常需要对项目进行打包和优化&#xff0c;以便在生产环境中提供更高性能的应用程序。本篇博客将介绍一些Vue上线打包优化的技巧&#xff0c;帮助您优化应用程序的加载速度和性能。 一、禁止生成sourceMap文件 Vue项目在打包…