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边框样式(动画)的更多相关文章

  1. CSS 边框样式

    CSS 边框样式 直线边框样式 <html> <body> <!-- border: 1px 边框像素为1.solid red 边框样式以及边框颜色 --> < ...

  2. css边框样式、边框配色、边框阴影、边框圆角、图片边框

     边框样式 点线式边框 破折线式边框 直线式边框 双线式边框 槽线式边框 脊线式边框 内嵌效果的边框 突起效果的边框 <div style="width: 300px; height: ...

  3. css盒子边框样式

    边框样式有全边框和单个边框样式,可对每条边设置不同的样式 如下代码P1为全边框样式,P2为单个边框设置不同的样式: <!DOCTYPE html> <html lang=" ...

  4. CSS3之边框样式(动画过渡)

    简述 CSS3中transition属性定义了过渡,我们可以使用它来辅助我们实现一个边框样式的动画过渡. 简述 transition 定义和用法 语法 实现 效果 源码 transition 定义和用 ...

  5. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  6. CSS border-right-style属性设置元素的右边框样式

    CSS border-right-style属性设置元素的右边框样式 边框的样式指的是边框的线条属性,指的是边框采用的是实线效果.短线效果还是其它的线条效果. border-right-style属性 ...

  7. CSS边框及常用样式

    一.CSS设置样式 1.1 边框border 作用:设置标签周围的边框,方法  board:宽度 样式 颜色,一般情况下样式使用 solid实体的,和dotted虚线的 <head> &l ...

  8. css中的边框样式

    在盒子模型中,盒子的边框是其重要的样式,通过边框我们可以很方便地看出盒子的长宽以及大小.边框的特性可以通过边框线,边框的宽度及颜色来呈现. 1,边框线 边框线指的是边框线条的样式,包括实线,虚线,点划 ...

  9. css盒子模型之边框宽度,边框颜色与边框样式

    /* width和height只是设置盒子内容区的大小,而不是盒子的整个大小, 盒子可见框的大小由内容区,内边距和边框共同决定. */ .box1 { /* 设置内容区的宽度为400px */ wid ...

随机推荐

  1. zabbix监控之自定义监控

    自定义监控node1数据库状态,并设置报警 编辑agent客户端的userparameter_mysql.conf 文件,最后一行添加自定义监控内容 [root@node1 ~]# cd /etc/z ...

  2. win10家庭版升级 到win10企业版

    成功升级3小时  20200124 拿到电脑 win10家庭版 不会用 找admin都找不到只能用企业版 升级win10家庭版 到win10企业版 在msdn下载win10企业版iso iso 文件管 ...

  3. logstash数据处理及格式化功能详解

    Grok正则提取日志 环境延续我上一篇ELK单机版的filebeat-->redis-->logstash-->elasticsearch-->kibana环境,详情请参考: ...

  4. exit()和_exit()的区别

    版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明. 本文链接:https://blog.csdn.net/HAHAandHEHE/article/de ...

  5. SUSE12 网卡配置、SSH远程配置、解决CRT密钥交换失败,没有兼容的加密程序

    安装好SUSE系统后发现网卡配置与Centos有些差异,多网卡的同学可以参考一下(我的是双网卡) SUSE系统默认第一块网卡自动获取IP,如果是多网卡,需要手动配置,由于我的第一个网卡获取正确无需更改 ...

  6. Guava Cache,Java本地内存缓存使用实践

    Guava Cache,网上介绍很多,我就不赘述了. 分享一篇好的文章: Guava Cache内存缓存使用实践-定时异步刷新及简单抽象封装 Google Guava 3-缓存 在原作者基础上,我做了 ...

  7. Step By Step(Lua表达式和语句)

    Step By Step(Lua表达式和语句) 一.表达式:    1. 算术操作符:    Lua支持常规算术操作符有:二元的"+"."-"."*& ...

  8. TVM 高效保护隐私 ML

    TVM 高效保护隐私 ML 这篇文章描述了Myelin,一个在值得信赖的硬件飞地中保护隐私的机器学习框架,以及TVM如何使Myelin快速.关键的想法是,TVM,不像其它流行的ML框架,将模型编译成轻 ...

  9. SOLO: 按位置分割对象

    SOLO: 按位置分割对象 SOLO: Segmenting Objectsby Locations 论文链接: https://arxiv.org/pdf/1912.04488.pdf 代码链接: ...

  10. CUDA 7 Stream流简化并发性

    CUDA 7 Stream流简化并发性 异构计算是指高效地使用系统中的所有处理器,包括 CPU 和 GPU .为此,应用程序必须在多个处理器上并发执行函数. CUDA 应用程序通过在 streams  ...