10种实用的CSS鼠标滑过按钮特效(值得收藏)

认真你就输了丶
认真你就输了丶 发布于 2016-12-02 15:44:00 浏览:2295 类型:原创 - 随笔 分类:HTML/CSS - css 二维码: 作者原创 版权保护
分别插入html和css没弄明白,只好一起插入了,代码可能有点长



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>login</title>
    <style type="text/css" media="screen">
        /* 公用样式 */
        body{
            margin:0;
            height: 0;
            background-color: #F1F1F1;
        }
        .warp{
            width: 250px;
            height: 150px;
            background-color: #5e7c87;
            float:left;
            margin:15px 15px;
            box-shadow: 10px 10px 5px #888888;
        }
        .sim-button{
            line-height: 50px;
            height: 50px;
            text-align: center;
            margin-right: auto;
            margin-left: auto;
            margin-top: 50px;
            width: 60%;
            cursor: pointer;
            color: rgba(255,255,255,1);
            border: 1px solid rgba(255,255,255,0.5);
        }
        /* 效果一 */
        .button1{
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button1:hover{
            background-color: rgba(255,255,255,0.2);
            border-radius:20px;
        }
        /* 效果2 */
        .button2{
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
            overflow:hidden;
            position: relative;
        }
        .button2:hover{
            background-color: rgba(255,255,255,0.2);
        }
        .button2>span{
            -webkit-transition: all 0.3s ;
                    transition: all 0.3s ;
        }
        .button2:hover>span{
            opacity:0;
        }
        .button2::after{
            content:attr(data-text);
            width: 100%;
            height: 100%;
            position: absolute;
            left: -50px;
            top: 0;
            opacity:0;
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button2:hover::after{
            left:0;
            opacity:1;
        }
        /* 效果三 */
         .button3{
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
            overflow:hidden;
            position: relative;
        }
        .button3:hover{
            background-color: rgba(255,255,255,0.2);
        }
        .button3>span{
            -webkit-transition: all 0.3s ;
                    transition: all 0.3s ;
        }
        .button3:hover>span{
            opacity:0;
        }
        .button3::after{
            content:attr(data-text);
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity:0;
            -webkit-transform: translate(-9%, -50%) rotate(-9deg);
                    transform: translate(-9%, -50%) rotate(-9deg);
            -webkit-transition: all 0.3s ;
                    transition: all 0.3s ;
        }
        .button3:hover::after{
            -webkit-transform: translate(0, 0) rotate(0deg);
                    transform: translate(0, 0) rotate(0deg);
            opacity:1;
        }
        /* 效果四 */
        .button4{
            position: relative;
            overflow:hidden;
        }
        .button4 span{
            z-index:2;
        }
        .button4::after{
            content:"";
            width: 100%;
            height: 100%;
            z-index:1;
            opacity:0;
            position: absolute;
            left: 0;
            top:0;
            background-color: rgba(255,255,255,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button4:hover::after{
            opacity:1;
            -webkit-transform: skewX(-180deg) scale(0.5,1);
                    transform: skewX(-180deg) scale(0.5,1);
        }
        /* 效果五 */
        .button5{
            border:none;
            position: relative;
        }
        .button5::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            border: 1px solid rgba(255,255,255,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button5:hover::before{
            opacity:0;
            -webkit-transform: scale(1.2,1.2);
                    transform: scale(1.2,1.2);
        }
        .button5::after{
            content:'';
            width:100%;
            height:100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity:0;
            background-color: rgba(255,255,255,0.5);
            -webkit-transform: scale(0.5,0.5);
                    transform: scale(0.5,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button5:hover::after{
            opacity:1;
            -webkit-transform: scale(1,1);
                    transform: scale(1,1);
        }
        /* 效果六 */
        .button6{
            border:none;
            position: relative;
        }
        .button6::before{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255,255,255,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button6:hover::before{
            opacity:0;
            -webkit-transform: scale(0.5,0.5);
                    transform: scale(0.5,0.5);
        }
        .button6::after{
            content:'';
            width:100%;
            height:100%;
            position: absolute;
            left: 0;
            top: 0;
            opacity:0;
            border: 1px solid rgba(255,255,255,0.5);
            -webkit-transform: scale(1.2,1.2);
                    transform: scale(1.2,1.2);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button6:hover::after{
            opacity:1;
            -webkit-transform: scale(1,1);
                    transform: scale(1,1);
        }
        /* 效果七 27*/
        .button7{
            border: 1px solid rgba(255,255,255,0.5);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
            overflow:hidden;
            position: relative;
        }
        .button7:hover{
            border: 1px solid rgba(255,255,255,0);
        }
        .button7::before{
            content: '';
            position: absolute;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 1px;
            background-color: rgba(255,255,255,0.5);
            -webkit-transform: translate(-100%, -600%) rotate(9deg);
                    transform: translate(-100%, -600%)  rotate(9deg);
            -webkit-transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
                    transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
            -webkit-transition: all 0.5s ;
                    transition: all 0.5s ;
        }
        .button7:hover::before{
             -webkit-transform: translate(0,0);
                     transform: translate(0,0);
        }
        /* 效果八 */
        .button8{
            color:rgba(255,255,255,1);
            border:none;
            position: relative;
        }
        .button8:hover>span{
            letter-spacing: 2px;
        }
        .button8::before{
            content:'';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
            opacity: 0;
            -webkit-transition: all 0.3s;
                    transition: all 0.3s;
            border-top-width: 1px;
            border-bottom-width: 1px;
            border-top-style: solid;
            border-bottom-style: solid;
            border-top-color: rgba(255,255,255,0.5);
            border-bottom-color: rgba(255,255,255,0.5);
            -webkit-transform: scale(0.1, 1);
                    transform: scale(0.1, 1);
        }
        .button8:hover::before{
            opacity: 1;
            -webkit-transform: scale(1, 1);
                    transform: scale(1, 1);
        }
        .button8::after{
            content: '';
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height:100%;
            z-index:1;
            background-color: rgba(255,255,255,0.25);
            -webkit-transition: all 0.3s;
                    transition: all 0.3s;
        }
        .button8:hover::after{
            opacity:0;
            -webkit-transform: scale(0.1, 1);
                    transform: scale(0.1, 1);
        }
        /* 效果九 */
        .button9{
            color: rgba(255,255,255,1);
            border:none;
            position: relative;
            border-top-width: 1px;
            border-bottom-width: 1px;
            border-top-style: solid;
            border-bottom-style: solid;
            border-top-color: rgba(255,255,255,0.5);
            border-bottom-color: rgba(255,255,255,0.5);
            -webkit-transition: all 0.3s;
                    transition: all 0.3s;
        }
        .button9:hover span{
            letter-spacing: 2px;
        }
        .button9:hover{
            border-top-color: rgba(255,255,255,0);
            border-bottom-color: rgba(255,255,255,0);
        }
        .button9::before{
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            width: 1px;
            height: 100%;
            z-index: 1;
            -webkit-transition: all 0.3s;
                    transition: all 0.3s;
            background-color: rgba(255,255,255,0.5);
        }
        .button9:hover::before{
            -webkit-transform: translate(-76px,0) rotate(270deg);
                    transform: translate(-76px,0) rotate(270deg);
        }
        .button9::after{
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 1px;
            height: 100%;
            z-index: 1;
            -webkit-transition: all 0.3s;
                    transition: all 0.3s;
            background-color: rgba(255,255,255,0.5);
        }
        .button9:hover::after{
            -webkit-transform: translate(76px,0) rotate(180deg);
                    transform: translate(76px,0) rotate(180deg);
        }
        /* 效果十 */
        .button10{
            -webkit-transition: all 0.3s;
                    transition: all 0.3s;
        }
        .button10:hover{
            -webkit-animation-name: move;
                    animation-name: move;
            -webkit-animation-duration: 1s;
                    animation-duration: 1s;
            -webkit-animation-fill-mode: both;
                    animation-fill-mode: both;
            background-color: rgba(255,255,255,0.2);
        }
        @-webkit-keyframes move {
          from, 11.1%, to {
            -webkit-transform: none;
            transform: none;
          }

          22.2% {
            -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
                    transform: skewX(-12.5deg) skewY(-12.5deg);
          }

          33.3% {
            -webkit-transform: skewX(6.25deg) skewY(6.25deg);
                    transform: skewX(6.25deg) skewY(6.25deg);
          }

          44.4% {
            -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
                    transform: skewX(-3.125deg) skewY(-3.125deg);
          }

          55.5% {
            -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
                    transform: skewX(1.5625deg) skewY(1.5625deg);
          }

          66.6% {
            -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
                    transform: skewX(-0.78125deg) skewY(-0.78125deg);
          }

          77.7% {
            -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
                    transform: skewX(0.390625deg) skewY(0.390625deg);
          }

          88.8% {
            -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
                    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
          }
        }

        @keyframes move {
          from, 11.1%, to {
            -webkit-transform: none;
                    transform: none;
          }
          22.2% {
            -webkit-transform: skewX(-12.5deg) skewY(-12.5deg);
                    transform: skewX(-12.5deg) skewY(-12.5deg);
          }
          33.3% {
            -webkit-transform: skewX(6.25deg) skewY(6.25deg);
                    transform: skewX(6.25deg) skewY(6.25deg);
          }
          44.4% {
            -webkit-transform: skewX(-3.125deg) skewY(-3.125deg);
                    transform: skewX(-3.125deg) skewY(-3.125deg);
          }
          55.5% {
            -webkit-transform: skewX(1.5625deg) skewY(1.5625deg);
                    transform: skewX(1.5625deg) skewY(1.5625deg);
          }
          66.6% {
            -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg);
                    transform: skewX(-0.78125deg) skewY(-0.78125deg);
          }
          77.7% {
            -webkit-transform: skewX(0.390625deg) skewY(0.390625deg);
                    transform: skewX(0.390625deg) skewY(0.390625deg);
          }
          88.8% {
            -webkit-transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
                    transform: skewX(-0.1953125deg) skewY(-0.1953125deg);
          }
        }
    </style>
</head>
<body>
    <div class="warp">
        <div class="sim-button button1">
            <span>login1</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button2" data-text="login2">
            <span>login2</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button3" data-text="login3">
            <span>login3</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button4">
            <span>login4</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button5">
            <span>login5</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button6">
            <span>login6</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button7">
            <span>login7</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button8">
            <span>login8</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button9">
            <span>login9</span>
        </div>
    </div>
    <div class="warp">
        <div class="sim-button button10">
            <span>login10</span>
        </div>
    </div>
</body>
</html>
标签:
z
给个赞 55 人点赞
收藏 133 人收藏
评论 已有 4 条评论;以下用户言论只代表其个人观点,不代表 前端网(QDFuns) 的观点或立场。
登录 以后才能发表评论
最新评论
luomg1995
luomg19952017-01-13 15:27:144F
好流弊
举报 支持 (0) 回复 (0)
认真你就输了丶
认真你就输了丶2016-12-02 20:31:523F
我没写兼容ie和火狐的  只写了谷歌的  可以加上-ms-transform //@别闹丶:这些代码的兼容性怎么样啊
主要就是IE8和IE9的兼容性,要是都能兼容的话就好了,
我拿下来试下,要是可以的话,以后用这些样式就很方便了。
总之,谢谢你的整理啦。给你点一个大大的赞 !嘿嘿~
举报 支持 (0) 回复 (0)
别闹丶
别闹丶2016-12-02 20:21:162F
这些代码的兼容性怎么样啊
主要就是IE8和IE9的兼容性,要是都能兼容的话就好了,
我拿下来试下,要是可以的话,以后用这些样式就很方便了。
总之,谢谢你的整理啦。给你点一个大大的赞 !嘿嘿~
举报 支持 (0) 回复 (1)
鲁班code
鲁班code2016-12-02 17:30:371F
非常棒的干货,已收藏
举报 支持 (0) 回复 (0)
认真你就输了丶 认真你就输了丶 作者

涸辙遗鲋,旦暮成枯;人而无志,与彼何殊.

作者最新