html
<div class="animated-border-box"></div>css
<style>
/* 清除浏览器默认 */
/* 清除所有元素内外边距 */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 更直观的盒模型计算方式 */
}
/* 清除列表样式 */
ul,
ol {
list-style: none;
}
/* 清除默认超链接样式 */
a {
text-decoration: none;
color: inherit;
}
/* 清除表单元素默认样式 */
input,
button,
textarea,
select {
font: inherit;
/* 继承父元素字体 */
background: transparent;
border: none;
outline: none;
appearance: none;
/* 清除浏览器默认外观 */
}
/* 清除图片底部间隙 */
img {
vertical-align: middle;
}
/* 清除表格边框合并 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 清除文本级元素默认样式 */
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-size: inherit;
font-weight: normal;
}
/* 清除 HTML5 新增元素默认样式 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
/* 清除按钮默认样式 */
button {
cursor: pointer;
user-select: none;
}
/* 禁用文本区域缩放 */
textarea {
resize: none;
}
/* 清除媒体元素基线对齐 */
audio,
video {
vertical-align: baseline;
}
.animated-border-box {
width: 300px;
height: 150px;
position: relative;
margin: 2rem;
background: pink;
border-radius: 6px;
}
/* 动态边框线 */
.animated-border-box::before,
.animated-border-box::after {
content: '';
position: absolute;
width: 0;
height: 0;
transition: all 0.3s;
}
.animated-border-box::before {
top: 0;
left: 0;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
}
.animated-border-box::after {
bottom: 0;
right: 0;
border-bottom: 2px solid transparent;
border-right: 2px solid transparent;
}
.animated-border-box:hover::before {
width: 100%;
height: 100%;
border-top-color: #67cdcc;
border-left-color: #7ec699;
border-radius: 2px;
}
.animated-border-box:hover::after {
width: 100%;
height: 100%;
border-bottom-color: #466eff;
border-right-color: #cc99cd;
border-radius: 2px;
transition-delay: 0.2s;
}
</style>html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
/* 清除浏览器默认 */
/* 清除所有元素内外边距 */
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
/* 更直观的盒模型计算方式 */
}
/* 清除列表样式 */
ul,
ol {
list-style: none;
}
/* 清除默认超链接样式 */
a {
text-decoration: none;
color: inherit;
}
/* 清除表单元素默认样式 */
input,
button,
textarea,
select {
font: inherit;
/* 继承父元素字体 */
background: transparent;
border: none;
outline: none;
appearance: none;
/* 清除浏览器默认外观 */
}
/* 清除图片底部间隙 */
img {
vertical-align: middle;
}
/* 清除表格边框合并 */
table {
border-collapse: collapse;
border-spacing: 0;
}
/* 清除文本级元素默认样式 */
h1,
h2,
h3,
h4,
h5,
h6,
p {
font-size: inherit;
font-weight: normal;
}
/* 清除 HTML5 新增元素默认样式 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
display: block;
}
/* 清除按钮默认样式 */
button {
cursor: pointer;
user-select: none;
}
/* 禁用文本区域缩放 */
textarea {
resize: none;
}
/* 清除媒体元素基线对齐 */
audio,
video {
vertical-align: baseline;
}
.animated-border-box {
width: 300px;
height: 150px;
position: relative;
margin: 2rem;
background: pink;
border-radius: 6px;
}
/* 动态边框线 */
.animated-border-box::before,
.animated-border-box::after {
content: "";
position: absolute;
width: 0;
height: 0;
transition: all 0.3s;
}
.animated-border-box::before {
top: 0;
left: 0;
border-top: 2px solid transparent;
border-left: 2px solid transparent;
}
.animated-border-box::after {
bottom: 0;
right: 0;
border-bottom: 2px solid transparent;
border-right: 2px solid transparent;
}
.animated-border-box:hover::before {
width: 100%;
height: 100%;
border-top-color: #67cdcc;
border-left-color: #7ec699;
border-radius: 2px;
}
.animated-border-box:hover::after {
width: 100%;
height: 100%;
border-bottom-color: #466eff;
border-right-color: #cc99cd;
border-radius: 2px;
transition-delay: 0.2s;
}
</style>
<body>
<div class="animated-border-box"></div>
</body>
</html>此内容由惯性聚合(RSS阅读器)自动聚合整理，仅供阅读参考。 原文来自 — 版权归原作者所有。