CSS3边框旋转动画实现效果

最新推荐文章于 2024-05-30 11:17:16 发布

#麻辣小龙虾#

最新推荐文章于 2024-05-30 11:17:16 发布

阅读量7.1k

点赞数 1

分类专栏： CSS3 html web前端文章标签： css3 动画

本文链接：https://blog.csdn.net/CodingNoob/article/details/78784161

版权

web前端同时被 3 个专栏收录

99 篇文章 2 订阅

订阅专栏

CSS3

20 篇文章 0 订阅

订阅专栏

html

10 篇文章 0 订阅

订阅专栏

动画结果如下：

这里写图片描述

以前有看到过相应的动画，想了一下实现思路，就是用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>

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

#麻辣小龙虾#

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
CSS3边框旋转动画实现效果

动画结果如下：以前有看到过相应的动画，想了一下实现思路，就是用4个div分别定位模拟上下左右边框，然后根据定位top、left、right、bottom4个位置定位，再用css3中的transition实现相应的鼠标移入动画效果。代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name
复制链接

扫一扫