CSS3边框旋转动画实现效果
程序员文章站
2024-01-23 22:00:34
...
动画结果如下：
以前有看到过相应的动画，想了一下实现思路，就是用4个div分别定位模拟上下左右边框，然后根据定位top、left、right、bottom4个位置定位，再用css3中的transition实现相应的鼠标移入动画效果。
代码如下：
<!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>动画边框效果</title>
<style>
*{margin:0;padding:0;}
.box{position:relative;height:200px;width:200px;padding:10px;margin:100px auto;background:#eee;overflow: hidden;/*设置overflow因此隐藏掉4个模拟边框，鼠标移入后再显示出来*/}
.box .item{height:100%;color:#fff;font-size:30px;line-height:200px;text-align:center;background:#ccc;}
.box .top,.box .bottom{height:10px;width:220px;background:rgb(18, 233, 54);}
.box .left,.box .right{height:220px;width:10px;background:rgb(18, 233, 54);}
.box .top{position:absolute;top:0;left:-220px;transition:all 1s ease;/*必须要有，不然数百移出来的时候就不会有动画返回效果*/}
.box .left{position:absolute;bottom:-220px;left:0px;transition:all 1s ease;}
.box .right{position:absolute;top:-220px;right:0px;transition:all 1s ease;}
.box .bottom{position:absolute;bottom:0;right:-220px;transition:all 1s ease;}
.box:hover .top{left:10px;transition:all .7s ease;}
.box:hover .left{bottom:10px;transition:all .7s ease;}
.box:hover .right{top:10px;transition:all .7s ease;}
.box:hover .bottom{right:10px;transition:all .7s ease;}
</style>
</head>
<body>
<div class="box">
<div class="item">内容</div>
<div class="top"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left"></div>
</div>
</body>
</html>由于本人水平有限，暂时想到这样的方法，个人感觉这方法不是很好，应该会有更好的方法去实现，如果哪位有更好的实现方法，望大神不吝赐教，小弟不胜感激。