HTML5网页设计

导航菜单

两种CSS3按钮动画效果

时间:2016-01-17 11:56来源:未知作者:user点击:
两种以纯CSS3来实现的按钮动画效果。

两种以纯CSS3来实现的按钮动画效果。


<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>两种CSS3按钮动画效果 - ShejiCool.com</title>
    <style>
        body{font-family:Roboto,sans-serif;background:#2196F3;font-size:16pt;color:#6ab8f7;font-weight:200;padding:2em}
        .col{display:inline-block;vertical-align:top}
        main{-moz-transform:translateX(-50%);-ms-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%);position:relative;display:inline-block;left:50%}
        main header{color:#fff;text-align:center;margin:1em}
        main header h1{font-size:1.25em;margin:.25em}
        main header a{color:#6ab8f7;text-decoration:none}
        .button{position:relative;margin:1em;font-weight:100;padding:1em 1.25em;text-align:center;width:200px;border-radius:5px;overflow:hidden;position:relative;z-index:0;cursor:pointer}
        .button.raised{-moz-transition:all .1s;-o-transition:all .1s;-webkit-transition:all .1s;transition:all .1s;background:#0c84e4;box-shadow:0 1px 1px #085a9b}
        .button.raised:active{background:#0c7dd8;box-shadow:0 1px 1px #063e6b}
        span{font-weight:400}
        input[type=checkbox].toggle{-moz-appearance:none;-webkit-appearance:none;position:absolute;width:100%;height:100%;margin:0;left:0;top:0;cursor:pointer}
        input[type=checkbox].toggle:focus{outline:0}
        .anim{-moz-transform:translateY(-50%) translateX(-50%);-ms-transform:translateY(-50%) translateX(-50%);-webkit-transform:translateY(-50%) translateX(-50%);transform:translateY(-50%) translateX(-50%);position:absolute;top:50%;left:50%;z-index:-1}
        .anim:before{position:relative;content:'';display:block;margin-top:100%}
        .anim:after{content:'';position:absolute;top:0;bottom:0;left:0;right:0;border-radius:50%}
        .clickable .toggle:checked+.anim{-moz-animation:anim-in .75s;-webkit-animation:anim-in .75s;animation:anim-in .75s}
        .clickable .toggle:checked+.anim:after{-moz-animation:anim-in-pseudo .75s;-webkit-animation:anim-in-pseudo .75s;animation:anim-in-pseudo .75s}
        .clickable .toggle:not(:checked)+.anim{-moz-animation:anim-out .75s;-webkit-animation:anim-out .75s;animation:anim-out .75s}
        .clickable .toggle:not(:checked)+.anim:after{-moz-animation:anim-out-pseudo .75s;-webkit-animation:anim-out-pseudo .75s;animation:anim-out-pseudo .75s}
        .hoverable:hover>.anim{-moz-animation:anim-out .75s;-webkit-animation:anim-out .75s;animation:anim-out .75s}
        .hoverable:hover>.anim:after{-moz-animation:anim-out-pseudo .75s;-webkit-animation:anim-out-pseudo .75s;animation:anim-out-pseudo .75s}
        @-webkit-keyframes anim-in{0%{width:0}
        100%{width:100%}
        }
        @-moz-keyframes anim-in{0%{width:0}
        100%{width:100%}
        }
        @-ms-keyframes anim-in{0%{width:0}
        100%{width:100%}
        }
        @keyframes anim-in{0%{width:0}
        100%{width:100%}
        }
        @-webkit-keyframes anim-in-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }
        @-moz-keyframes anim-in-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }
        @-ms-keyframes anim-in-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }
        @keyframes anim-in-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }
        @-webkit-keyframes anim-out{0%{width:0}
        100%{width:100%}
        }
        @-moz-keyframes anim-out{0%{width:0}
        100%{width:100%}
        }
        @-ms-keyframes anim-out{0%{width:0}
        100%{width:100%}
        }
        @keyframes anim-out{0%{width:0}
        100%{width:100%}
        }
        @-webkit-keyframes anim-out-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }
        @-moz-keyframes anim-out-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }
        @-ms-keyframes anim-out-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }
        @keyframes anim-out-pseudo{0%{background:rgba(0,0,0,.25)}
        100%{background:0 0}
        }

    </style>
</head>
<body>
    <main>
        <header>
            <h1>css3按钮特效</h1><a href="twitter.com/jonbrennecke">by @jonbrennecke</a>
        </header>
        <section class="col">
            <div class="button clickable">
                <input type="checkbox" class="toggle" />
                <div class="anim"></div><span>Click!</span>
            </div>
            <div class="button hoverable">
                <div class="anim"></div><span>Hover!</span>
            </div>
        </section>
        <section class="col">
            <div class="button raised clickable">
                <input type="checkbox" class="toggle" />
                <div class="anim"></div><span>Click!</span>
            </div>
            <div class="button raised hoverable">
                <div class="anim"></div><span>Hover!</span>
            </div>
        </section>
    </main>
</body>
</html>
阅完本篇文章?您还可以: 收藏本文 文章挑错 朋友推荐