如何在悬停上创建动画边框 [英] How to create animated border on hover
问题描述
我想要在此网站中创建悬停效果:
I want to create a hover effect like in this site:
http://themes.creiden.com/circleflip/blog-with-sidebar/
只需将鼠标悬停在更多链接上。
Just hover over the "More" link.
http://joxi.ru/uXHGU_3JTJBkDpt35Iw
所以我试着这样做,但我只有这个变种
So I tried to do something like this, but I have only this variant
代码:
HTML
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?
But in the example (in the website) the stroke appears in order and in all sides... How can I do this? CSS3 only? Maybe with jQuery?
推荐答案
您可以使用这个代码,我从您的示例网站复制。
You can use this code, i copied from your sample website.
html:
<a href="#">
<span class="text">Click the link</span>
<span class="btnBefore"></span>
<span class="btnAfter"></span>
</a>
css:
a {
float:left ;
border-radius:5px;
margin-top:10px;
position:relative;
Z-index:1;
overflow:hidden;
min-width:47px;
display:table;
padding:6px 9px;
border:none;
-webkit-transition:all 0.5s ease-out;
-moz-transition:all 0.5s ease-out;
-ms-transition:all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition:all 0.5s ease-out;
text-align:center;
color:#fff;
background-color:#E32831;
text-decoration:none;
}
a:hover {
background-color:#f1f1f1!important;
}
css: a { float: left; border-radius: 5px; margin-top: 10px; position: relative; z-index: 1; overflow: hidden; min-width: 47px; display: table; padding: 6px 9px; border: none; -webkit-transition: all 0.5s ease-out; -moz-transition: all 0.5s ease-out; -ms-transition: all 0.5s ease-out; -o-transition: all 0.5s ease-out; transition: all 0.5s ease-out; text-align: center; color: #fff; background-color: #E32831; text-decoration: none; } a:hover { background-color: #f1f1f1 !important; }
span {
position: relative;
z-index: 1;
line-height: 23px;
transition: 0.3s ease;
-webkit-transition: 0.3s ease;
-moz-transition: 0.3s ease;
-o-transition: 0.3s ease;
-ms-transition: 0.3s ease;
}
a:hover span {
color: #5a5a5a;
}
.btnBefore, .btnAfter {
content: '';
position: absolute;
height: 0;
width: 0;
border: solid #e32831;
border-width: 0;
border-radius: 0;
transition: 0;
-webkit-transition: 0;
-moz-transition: 0;
-o-transition: 0;
-ms-transition: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border-color: #E32831;
border-radius: 5px;
}
a .btnBefore {
right: 0;
bottom: 0;
}
a .btnAfter {
left: 0;
top: 0;
}
a:hover .btnBefore {
border-width: 0 0 1px 1px;
}
a:hover .btnAfter {
border-width: 1px 1px 0 0;
}
a:hover .btnAfter, a:hover .btnBefore {
height: 100%;
width: 100%;
transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-webkit-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-moz-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-o-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
-ms-transition: width 0.5s ease, height 0.5s ease 0.5s, border-top-right-radius 0.1s ease 0.4s, border-bottom-left-radius 0.1s ease 0.4s, border-bottom-right-radius 0.1s ease 0.9s, border-top-left-radius 0.1s ease 0.9s;
}
这篇关于如何在悬停上创建动画边框的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!