通过css的before和after制作按钮的动画效果

时间：2024-02-22 20:00:09

看了下面网站的按钮效果，想自己也试试。

http://tympanus.net/Development/CreativeLinkEffects/

按照上面网站的效果实现。

1.左右两侧出现边框的效果。相见代码如下：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="../css/config.css" media="screen" title="no title" charset="utf-8">
</head>
<body>

<a href="#" class="button">
    home
</a>
<a href="#" class="button"> project </a>

</body>
</html>

 less代码：

@charset "UTF-8";

html,body{
    margin:0px;
    padding: 0px;
    height: 100%;
}

//伪类before after的联系
.button{
    display: inline-block;
    padding:10px 20px 10px 20px;
    position: relative;
    cursor: pointer;
    &::before,&::after{
        display: inline-block;
        opacity: 0;
        .button-transion();
    }
    &::before{
        content: "[";
        .button-translate(10px);
    }
    &::after{
        content: "]";
        .button-translate(-10px);
    }
    &:hover::before{
        .button-translate(0px);
        opacity: 1;
    }
    &:hover::after{
        .button-translate(0px);
        opacity: 1;
    }
    .button-transion{
        -moz-transition: all 0.3s linear;
        -webkit-transition: all 0.3s linear;
        -o-transition: all 0.3s linear;
        transition: all 0.3s linear;
    }
    .button-translate(@c){
        -moz-transform:translate(@c,0);
        -webkit-transform:translate(@c,0);
        -o-transform: translate(@c,0);
        transform:translate(@c,0);
    }
}

 

2.鼠标移动上移文字效果

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 动画按钮 demo3</title>
<link rel="stylesheet" href="../css/config.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div style="margin:20px">
        <a href="#" class="button3" >
            <span text="home">home</span>
        </a>
        <a href="#" class="button3">
            <span text="project">project</span>
        </a>
    </div>
</body>
</html>

 less代码：

//伪类before after的联系
.button3{
    color:#000;
    text-decoration: none;
    margin:5px 10px 5px 10px;
    display: inline-block;
    overflow: hidden;
    height: 30px;
    line-height: 30px;

    span{
        display: block;
        .common-transion(all,0.3s,linear,0s);
    }
    span::after{
        content: attr(text);
        display: block;
        font-weight: bold;
    }
    &:hover{
        span{
            .trasform-translate(0px,-50%);
        }
    }

}

 3.鼠标移动出现下划线动画

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css3 动画按钮 demo2</title>
<link rel="stylesheet" href="../css/config.css" media="screen" title="no title" charset="utf-8">
</head>
<body>
    <div style="margin:20px">
        <a href="#" class="button2"> home </a>
        <a href="#" class="button2"> project </a>
    </div>
</body>
</html>

 css代码：

//伪类before after的联系
.button2{
    color:#000;
    text-decoration: none;
    margin:5px 10px 5px 10px;
    padding:10px;
    display: inline-block;

    &::after{
        height:2px;
        width: 100%;
        background: #000;
        display: block;
        content: "";
        opacity: 0;
        .trasform-translate(0px,10px);
        .common-transion(all,0.3s,linear,0s);
    }

    &:hover::after{
        opacity: 1;
        .trasform-translate(0px,5px);
    }


}

 

相关文章