看了下面网站的按钮效果，想自己也试试。
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);
}
}
未完待续
时间： 2024-12-15 01:47:46