在项目中，交互动画是很重要的一部分，有些细微的效果，或许都能吸引用户去浏览参与，这些交互我们在一些大型门户的活动，经常会看到很多。今天我们实现一个边框特效：滑动渐变。先来看下效果图：
实现以上效果，主要在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>
大家可以看下预览效果。
总结
有些技术虽简单，但是很重要，或许是考验一个人的基础是否扎实，知识面是否广。
