×

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

作者:Terry2019.05.20来源:Web前端之家浏览:15653评论:0
关键词:html渐变动画

500.jpg

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

image.png

实现以上效果,主要在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>

大家可以看下预览效果。

总结

有些技术虽简单,但是很重要,或许是考验一个人的基础是否扎实,知识面是否广。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/html1281320938102983.html

网友评论文明上网理性发言 已有0人参与

发表评论: