我希望创造一个悬停效果,就像这个网站:
http://themes.creiden.com/circleflip/blog-with-sidebar/
只需将鼠标悬停在“More”链接上即可。
http://joxi.ru/uXHGU_3JTJBkDpt35Iw
所以我尝试做了一些类似的东西,但我只有这个变体
代码:
HTML
<a href="#">Click the link</a>
CSS
body{
padding: 100px;
background: #f6f6f6;
}
a{
display: block;
width: 200px;
position: relative;
background: #fff;
height: 40px;
font: 14px/40px Tahoma;
color: #39adf0;
text-decoration: none;
-webkit-transition: 0.2s;
margin: auto;
text-align: center;
position: relative;
}
a:after{
content: '';
position: absolute;
top: 0;
left: 0;
width: 0;
height: 1px;
background: #39adf0;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
a:before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 0;
background: #39adf0;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
a:hover:after{
width: 100%;
}
a:hover:before{
content: '';
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #39adf0;
-webkit-transition: 0.2s;
-moz-transition: 0.2s;
-ms-transition: 0.2s;
-o-transition: 0.2s;
transition: 0.2s;
}
但在示例中(网站上),笔画按顺序出现并出现在所有边缘...我该怎么做?仅使用CSS3?也许使用jQuery?