看到好的特效就应该动手实现它！
代码看起来一点都不简洁 ヽ(o_ _)o摔倒
要点：
- CSS3属性
transition: property|prop1,prop2... duration timing-function delay;； - 注意需要的标签层次感；
- 创意要新！
效果图：
exam.gif
代码部分：
<div class="simple">
<div class="wrap">
<span>加入我们</span>
<div class="bgwt"></div>
</div>
</div>
<style lang="" scoped>
.simple{
height: 100%;
background-color: #f1f1f3;
border: 1px solid #fff;
box-sizing: border-box;
}
.wrap {
position: relative;
width: 200px;
height: 50px;
margin: 100px;
background-color: #000;
/*display: flex;
justify-content: center;
align-items: center;*/
font-size: 25px;
border: 1px solid #fff;
box-shadow: 5px 5px 0px #000;
overflow: hidden;
}
.wrap span {
position: absolute;
z-index: 10;
top: 8px;
left: 50px;
color: #fff;
}
.bgwt {
position: absolute;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
.wrap:hover .bgwt{
background-color: #fff;
transform: rotate(180deg);
transition: background-color,transform .7s ease-in;
}
.wrap:hover span{
color: #000;
transition: color 1s;
}
</style>
