css边框样式(动画)
html:
<div class="wrap">
<a href="#">shui</a>
</div>
css:
body {
display: -webkit-box;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
height: 100vh;
background: #FFFACE;
}
body .wrap {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
width: 450px;
}
body .wrap a {
text-decoration: none;
color: #222;
padding: 20px;
background: #efefef;
text-transform: uppercase;
text-align: center;
position: relative;
margin: 20px;
flex-grow: 1;
cursor: pointer;
}
body .wrap a:before {
content: '';
position: absolute;
width: calc(100% + 4px);
height: calc(100% + 4px);
top: calc(2px/-1);
left: calc(2px/-1);
background: linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to top, blue 50%, transparent 50%), linear-gradient(to right, blue 0%, blue 100%), linear-gradient(to left, blue 0%, blue 100%);
background-size: 100% 2px, 2px 200%, 2px 200%, 0% 2px, 0% 2px;
background-position: 50% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
background-repeat: no-repeat, no-repeat;
transition: transform 0.3s ease-in-out, background-position 0.3s ease-in-out, background-size 0.3s ease-in-out;
transform: scaleX(0) rotate(0deg);
transition-delay: 0.6s, 0.3s, 0s;
}
body .wrap a:hover:before {
background-size: 200% 2px, 2px 400%, 2px 400%, 55% 2px, 55% 2px;
background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
transform: scaleX(1) rotate(0deg);
transition-delay: 0s, 0.3s, 0.6s;
}
css边框样式(动画)的更多相关文章
- CSS 边框样式
CSS 边框样式 直线边框样式 <html> <body> <!-- border: 1px 边框像素为1.solid red 边框样式以及边框颜色 --> < ...
- css边框样式、边框配色、边框阴影、边框圆角、图片边框
边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...
- css盒子边框样式
边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang=" ...
- CSS3之边框样式(动画过渡)
简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...
- [转]CSS如何设置html table表格边框样式
原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...
- CSS border-right-style属性设置元素的右边框样式
CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...
- CSS边框及常用样式
一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法 board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...
- css中的边框样式
在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小.边框的特性可以通过边框线,边框的宽度及颜色来呈现. 1,边框线 边框线指的是边框线条的样式,包括实线,虚线,点划 ...
- css盒子模型之边框宽度,边框颜色与边框样式
/* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...
随机推荐
- debian配置---->/etc/apt/sources.list apt基本源设置指南
yum或apt基本源设置指南 关于: 管理Linux服务器的运维或开发人员经常需要安装软件,最常用方式应该是通过Linux系统提供的包管理工具来在线安装,比如centos的yum,ubuntu或d ...
- shell基础之函数
shell中允许将一组命令集合或语句形成一段可用代码,这些代码块称为shell函数.给这段代码起个名字称为函数名,后续可以直接调用该段代码. 格式: func() { #指定函数名 command # ...
- 3*060-A 日志记录
电路检修遇到的问题: 今天在检修一块3060-A电路板时 发现 3.3V烫 但是3.3V路上的电容并没有短路 于是拆单片机 拆RS232EN 拆 FM24V 最后发现 原来是 1117 ...
- mysql的日志文件及其作用
MySQL中有七种日志文件,分别是: 重做日志(redo log) 回滚日志(undo log) 二进制日志(binlog) 中继日志(relay log) 错误日志(errorlog) 慢查询日志( ...
- 给MySQL数据表加入uuid
alter table table_name add column uuid VARCHAR(255) default "0" update table_name set uuid ...
- NBU Rman异机恢复Oracle
前段时间一个亿级分区表,被分割成历史表和业务表,历史表中保留15天以外的数据,每天都会从业务表中的15天外的数据copy到历史表,并删除业务表15天外的数据,逻辑也很简单,但插入历史表的where 条 ...
- maven把依赖打进jar包
1.把依赖打进sigma-api的jar包 <?xml version="1.0" encoding="UTF-8"?> <project x ...
- PyTorch 神经网络
PyTorch 神经网络 神经网络 神经网络可以通过 torch.nn 包来构建. 现在对于自动梯度(autograd)有一些了解,神经网络是基于自动梯度 (autograd)来定义一些模型.一个 n ...
- Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案
近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...
- JMeter定时器设置延迟与同步
JMeter定时器一般用来设置延迟与同步.它的作用域和优先级如下: 定时器的优先级高于Sampler. 在同一作用域(比如控制器下)有多个定时器存在,每个定时器都会执行. 在某一Sampler节点下的 ...