CSS：实现鼠标滑动box边框酷炫动画效果

作者：Terry2019.05.20来源：Web前端之家浏览：15808评论:0

关键词：html 渐变动画

在项目中，交互动画是很重要的一部分，有些细微的效果，或许都能吸引用户去浏览参与，这些交互我们在一些大型门户的活动，经常会看到很多。今天我们实现一个边框特效：滑动渐变。先来看下效果图：

实现以上效果，主要在CSS，HTML就只有一段：

<div class="example"></div>

CSS代码：

.example {
    margin:50px auto;
    width:200px;
    height:200px;
    transition: ease-in .3s;
    background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
    linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
    linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
    linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
    background-size: 0 2px, 2px 0, 0 2px, 2px 0;
    background-position: left top, right top, right bottom, left bottom;
    box-shadow:0 0 5px #ccc;
}
.example:hover {
    background-size: 100% 2px,  2px 100%, 100% 2px, 2px 100%;
}

主要用到，线性渐变和background-size的特殊用法，这些基本知识不懂的，可以去查下资料，也可以加我们的QQ群咨询呢。

我们来看下最终的DEMO代码：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>线条框动画效果 - Web前端之家www.jiangweishan.com</title>
<style>
/*CSS*/
.example {
margin:50px auto;
width:200px;
height:200px;
transition: ease-in .3s;
background: linear-gradient(0, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-90deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-180deg, #108b96 2px, #108b96 2px) no-repeat,
linear-gradient(-270deg, #108b96 2px, #108b96 2px) no-repeat;
background-size: 0 2px, 2px 0, 0 2px, 2px 0;
background-position: left top, right top, right bottom, left bottom;
box-shadow:0 0 5px #ccc;
}
.example:hover {
background-size: 100% 2px,  2px 100%, 100% 2px, 2px 100%;
}
.example p{
padding:80px 0;
color:#bbb;
text-align:center;
font-size:12px;
}

</style>
</head>
<body>
<div class="example">
<p>Web前端之家<br />www.jiangweishan.com</p>
</div>
</body>
</html>

大家可以看下预览效果。