CSS3 鼠标悬停斜向变色按钮动效

2014-05-01 08:52:44 -0400

此代码仅供参考

代码说明

CSS3 鼠标悬停斜向变色按钮动效

html代码

<style type="text/css">
body {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    background: #fff;
    height: 100vh;
    width: 100vw;
}
.button {
    display: inline-block;
    margin: auto;
    width: 400px;
    height: 80px;
    border: none;
    background: #1abc9c;
    position: relative;
    overflow: hidden;
}
.button:before {
    content: '';
    background: #148f77;
    width: 800px;
    height: 600px;
    position: absolute;
    -webkit-transform: translate(-1000px, -400px) rotate(130deg);
    -ms-transform: translate(-1000px, -400px) rotate(130deg);
    transform: translate(-1000px, -400px) rotate(130deg);
    -webkit-transition: all 700ms ease;
    transition: all 700ms ease;
}
.button:after {
    content: attr(data-word);
    color: white;
    font-size: 2em;
    position: relative;
    z-index: 100;
    -webkit-transition: all 200ms ease;
    transition: all 200ms ease;
    font-weight: 200;
}
.button:hover:after {
    font-size: 2.2em;
}
.button:hover:before {
    -webkit-transform: translate(-200px, -400px) rotate(130deg);
    -ms-transform: translate(-200px, -400px) rotate(130deg);
    transform: translate(-200px, -400px) rotate(130deg);
}
</style>

<button data-word='hover me!' class="button"></button>

代码演示

【本站仅供参考，版权归原作者所有】

«Newer Older»

Back to home

Subscribe | Register | Login | N