欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

CSS3边框旋转动画实现效果

程序员文章站 2024-01-23 22:00:34
...

动画结果如下:

CSS3边框旋转动画实现效果

以前有看到过相应的动画,想了一下实现思路,就是用4个div分别定位模拟上下左右边框,然后根据定位top、left、right、bottom4个位置定位,再用css3中的transition实现相应的鼠标移入动画效果。

CSS3边框旋转动画实现效果

代码如下:

<!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>

由于本人水平有限,暂时想到这样的方法,个人感觉这方法不是很好,应该会有更好的方法去实现,如果哪位有更好的实现方法,望大神不吝赐教,小弟不胜感激。

相关标签: css3 动画