一个炫酷的按钮

2018-06-08 本文已影响0人 singingT

用CSS3实现如图的一个按钮

首先分析一下按钮的结构组成。

这个按钮其实也是一个超链接，因为可以将其全部写在一个a标签中

右边的箭头可以用背景图片来实现

当鼠标滑过按钮里而产生的特效其实是由四条左右上下四条线条组成，这四个线条可以span标签来实现，分别出现在按钮的左右上下

演示1.gif

首先把按钮的基本结构写出来

<a href="#" class="button">
    Touch
    <span class="line lineLeft"></span>
    <span class="line lineTop"></span>
    <span class="line lineRight"></span>
    <span class="line lineButtom"></span>
</a>

这时个还没有什么效果

image.png

编写按钮的基本样式

body{
    background: #000;
}

a{
    text-decoration: none;
    color: #0ff195;
    font-size: 26px;
}

.button{
    display: block;
    width: 180px;
    height: 50px;
    margin: 50px auto;
    padding-left: 30px;
    line-height: 50px;
    border: 2px solid #fff;
    background: url("../image/allow.png") 150px center no-repeat;
}

这时候的效果如下

image.png

接着考虑鼠标滑过的第一个效果
背景图中的箭头向右滑过了一小段距离
只要把背景图片的位置向左的距离拉开一点即可
但只如果只设置位置的改变，那就没有动画的效果，因此，需要用到transition属性，去设置背景的位置的平滑变化

.button{
    display: block;
    width: 180px;
    height: 50px;
    margin: 50px auto;
    padding-left: 30px;
    line-height: 50px;
    border: 2px solid #fff;
    background: url("../image/allow.png") 150px center no-repeat;
    /*设置transition属性使背景平滑向右移动*/
    transition: background 0.5s ease;
}

.button:hover{
    background-position: 160px center;
}

这时候效果如下

演示2.gif

接着考虑动画线，先把四条线的共同样式写出来。
1. 四条线都是分别出现在了按钮的左右上下，因此都是相对按钮而进行一个绝对定位的，需要分别设定按钮和线的定位属性
2. 初始状态均为不可见，但由于要产生一个动画效果，因此使用透明度为0

.line{
    display: inline-block;
    position: absolute;
    background: rgba(255, 255, 255, 0);
}

上边的特效线，其实就是有一个点从一段距离过来，慢慢地这条线的长度越来越长最后跟按钮的上边界重合了

上边动画线的初始样式，先让其为红色，好观察变化

.lineLeft{
    width: 10px;
    height: 2px;
    background: #f00;
}

image.png

会发现线并没有与上边界完全重合，因此需要让其住左和住右再分别移动2px，才可以与边界重合

.lineLeft{
    width: 10px;
    height: 2px;
    background: #f00;
    top: -2px;
    left: -2px;
}

image.png

再设置线的动画

宽度初始为0，最终为210，为上边界一样长
开始与按钮的距离为按钮的长度，慢慢向按钮靠近

.lineLeft{
    width: 0px;
    height: 2px;
    background: #f00;
    top: -2px;
    left: -210px;
    transition: 3s;
}

.button:hover .lineLeft{
    width: 210px;
    left:-2px;
}

演示3.gif

制作了上边线之后，剩下三条线的原理是一样的
上边线

.lineBottom{
    width: 0px;
    height: 2px;
    background: #f00;
    bottom: -2px;
    right: -210px;
    transition: 3s;
}

.button:hover .lineBottom{
    width: 210px;
    right: -2px;
}

左边线

.lineLeft{
    width: 2px;
    height: 0px;
    background: #f00;
    left: -2px;
    bottom: -50px;
    transition: 3s;
}

.button:hover .lineLeft{
    height: 50px;
    bottom: -2px;
}

右边线


.lineRight{
    width: 2px;
    height: 0px;
    background: #f00;
    right: -2px;
    top: -50px;
    transition: 3s;
}

.button:hover .lineRight{
    height: 50px;
    top: -2px;
}

最后效果

演示4.gif

最后再将线的颜色修改为白色即可

演示5.gif

一个炫酷的按钮

猜你喜欢

热点阅读