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;
}
最新文章
- Using User-Named Triggers in Oracle Forms
- 深入理解JAVA I/O系列六：Linux中的IO模型
- 更换ubuntu apt-get 源
- concat、reverse面试题
- PAT-乙级-1051. 复数乘法 (15)
- css link和@import区别用法
- Unity连接本地数据库sqlite
- FreeCodeCamp-JS基础部分
- C# 设置 窗口最大化
- 导入表数据 txt
- 为github帐号添加SSH keys
- django报错invalid literal for int() with base 10: ''
- （四十五）Modal 模态窗口 -遮盖
- leecode第二百九十二题（Nim游戏）
- python 日常 摘要
- JavaScript之Number、String、Array常用属性与方法手册
- 源码：Java集合源码之：数组与链表（一）
- 写了一个hiero检查任务渲染结果的脚本
- Redis 集群_主从配置_哨兵模式
- A标签添加JS事件，不跳转不刷新办法