CSS3实现幽灵按钮（下）

最新推荐文章于 2023-07-22 15:09:25 发布

Simagle

最新推荐文章于 2023-07-22 15:09:25 发布

阅读量707

点赞数

分类专栏：动画 CSS效果文章标签：效果边框

本文链接：https://blog.csdn.net/Simagle/article/details/46699377

版权

CSS效果同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

动画

2 篇文章 0 订阅

订阅专栏

本文详细介绍了如何使用CSS3实现幽灵按钮的边框特效，包括上边框的飞入效果，通过设置button和line的样式，结合过渡效果，创建出动态的边框动画。代码示例展示了如何绘制并调整其他三条边的特效，完成整个按钮的视觉呈现。

摘要由CSDN通过智能技术生成

CSS3实现幽灵按钮

实现边框的特效

实现上边框的飞入效果：从效果中看，我们可以看到，飞入的边是有外部的一个点慢慢飞入，然后覆盖的与其对应边框等长等宽的线段，

.button .line{
    display: block;
    position: absolute;
    background: #000;
}

为了方便调试，我们暂时先将边框线条的颜色设置为黑色，除此之外，边的位置与按钮的位置是相对的，因此我们需要在button属性中添加一个position属性，将其代码设置如下：

position: relative;

然后设置button-top的样式，代码如下：

.button .line-top{
    width: 0;
    height: 2px;
    top: -2px;
    left:-110%;
}

接着设置当鼠标移动过按钮时的效果:

.button:hover .line-top{
    width: 100%;
    left: 0;
}

我们可以发现，当鼠标移动到按钮上时，上边框变成黑色，但是并无飞入的效果，因此我们可以在line样式内设置其过度效果，代码如下：

     transition: all 0.15s ease-in;
    -moz-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in;
    -ms-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;

记得将line的background属性的颜色值设置为#fff
接着我们可以依样画葫芦绘制其他三条边的特效了，代码如下：

.button .line-bottom {
    width: 0;
    height: 2px;
    bottom: -2px;
    right: -110%;
}
.button:hover .line-bottom{
    width: 100%;
    right: 0;
}
.button .line-left{
    width: 2px;
    height: 0;
    left: -2px;
    bottom:-110%;
}
.button:hover .line-left{
    height: 100%;
    bottom: 0px;
}
.button .line-right{
    width: 2px;
    height: 0;
    right: -2px;
    top: -110%;
}
.button:hover .line-right{
    height: 100%;
    top: 0;
}