×

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

作者:admin2019.05.20来源:Web前端之家浏览:625评论: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>

大家可以看下预览效果。

总结

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

温馨提示:本文作者系admin ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/html1281320938102983.html

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

发表评论:

最新留言

  • 开创者素材

    网站资源下载站,交换个友链如何?www.kaicz.com...

  • CSS66

    关于CSS组合选择符总结得全面,学习了!...

  • 新闻头条

    文章不错支持一下吧...

  • 新闻头条

    文章不错非常喜欢...

  • js666

    promise很强大,可以干好多事情。。。...

  • 子午物联网

    这个博客,由衷的喜欢...

  • 访客

    文章不错,非常喜欢...

  • cnwebe

    新媒体运营交换友情链接https://www.cnwebe.com换吗...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2019 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero