今天浏览掘金网站的时候,看到一个有趣的东西,用css实现边框动画交互效果。参考文章地址
效果1:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
}
:root {
--borderColor: #03A9F3;
}
div {
position: relative;
width: 140px;
height: 64px;
margin: auto;
border: 1px solid #03A9F3;
cursor: pointer;
}
div::before,
div::after {
content: "";
position: absolute;
width: 20px;
height: 20px;
transition: .3s ease-in-out;
}
div::before {
top: -5px;
left: -5px;
border-top: 1px solid var(--borderColor);
border-left: 1px solid var(--borderColor);
}
div::after {
right: -5px;
bottom: -5px;
border-bottom: 1px solid var(--borderColor);
border-right: 1px solid var(--borderColor);
}
div:hover::before,
div:hover::after {
width: calc(100% + 9px);
height: calc(100% + 9px);
}
</style>
</head>
<body>
<div style="width: 250px;height: 150px;" class="border-radius"></div>
</body>
</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>
<style>
html,
body {
width: 100%;
height: 100%;
display: flex;
}
.box {
width: 300px;
height: 200px;
background: rgb(3, 169, 206);
display: flex;
justify-content: center;
align-items: center;
}
div {
position: relative;
width: 140px;
height: 64px;
margin: auto;
}
.outline {
outline: 1px solid #fff;
outline-offset: -1px;
transition: all 0.3s linear;
cursor: pointer;
font-size: 16px;
font-weight: bolder;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
background-image: radial-gradient(rgb(63, 190, 220), rgb(3, 170, 211));
}
.outline:hover {
outline: 1px solid transparent;
background-image: radial-gradient(rgb(63, 190, 220), rgb(3, 170, 211));
background: linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(90deg, #fff 50%, transparent 0) repeat-x, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y, linear-gradient(0deg, #fff 50%, transparent 0) repeat-y;
background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
background-position: 0 0, 0 100%, 0 0, 100% 0;
animation: linearGradientMove 0.3s infinite linear;
}
@keyframes linearGradientMove {
100% {
background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
}
}
</style>
</head>
<body>
<div class="box">
<div class="outline">Hover Me</div>
</div>
</body>
</html>