<div class="box">
<div class="yespost">Hover</div>
</div>
<style>
#box{
width: 200px;
margin: 500px auto;
}
.yespost {
width: 100%;
height: 80px;
text-indent:1em;
cursor: pointer;
letter-spacing:2px;
margin: 5px 0;
background: none;
border: 0;
box-sizing: border-box;
position: relative;
vertical-align: middle;
transition: color 0.25s;
}
.yespost::before, .yespost::after {
box-sizing: inherit;
content: \'\';
position: absolute;
width: 100%;
height: 100%;
}
.yespost::before, .yespost::after {
border: 2px solid transparent;
width: 0;
height: 0;
}
.yespost::before {
top: 0;
left: 0;
}
.yespost::after {
bottom: 0;
right: 0;
}
.yespost:hover {
color: #69b7ff;
}
.yespost:hover::before, .yespost:hover::after {
width: 100%;
height: 100%;
}
.yespost:hover::before {
border-top-color: #69b7ff;
border-right-color: #69b7ff;
transition: width 0.25s ease-out, height 0.25s ease-out 0.25s;
}
.yespost:hover::after {
border-bottom-color: #69b7ff;
border-left-color: #69b7ff;
transition: border-color 0s ease-out 0.5s, width 0.25s ease-out 0.5s, height 0.25s ease-out 0.75s;
}
.yespost div:nth-child(1){
font-size: 17px;
font-weight: 600;
font-family: "Arial","Microsoft YaHei","黑体","宋体","sans-serif";
padding-top: 17px;
margin-bottom: 2px;
}
.yespost div:nth-child(2){
font-size: 12px;
}
.background{
background-color: #69b7ff;
color: #FFFFFF;
}
.yespostHober:hover{
color: #FFFFFF;
}
</style>
相关文章：