好看的鼠标hover效果

0919自我总结

常见的鼠标hover效果

展示效果:http://ianlunn.github.io/hover/

部分动画制作

<style><!--
.container {
            margin: 0 auto;
            width: 800px;
        }

        .button {
            margin: .4em;
            padding: 1em;
            cursor: pointer;
            background: #ececec;
            text-decoration: none;
            color: #666;
            display: inline-block;
        }


        /* 2d transforms */
        /* grow */
        .grow {
            transition-duration: .3s;
            transition-property: transform;

            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translatez(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .grow:hover {
            transform: scale(1.1);
        }

        /* shrink */
        .shrink {
            transition-duration: .3s;
            transition-property: transform;

            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translatez(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .shrink:hover {
            transform: scale(.9);
        }

        /* pulse */
        @keyframes pulse {
            25% {
                transform: scale(1.1);
            }

            75% {
                transform: scale(.9);
            }
        }

        .pulse {

        }
        .pulse:hover {
            animation-name: pulse;
            animation-duration: 1s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
        }

        /* pulse grow*/
        @keyframes pulse-grow {
            to {
                transform: scale(1.1);
            }
        }
        .pulse-grow {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translatez(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .pulse-grow:hover {
            animation-name: pulse-grow;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* pulse shrink */
        @keyframes pulse-shrink {
            to {
                transform: scale(.9);
            }
        }

        .pulse-shrink {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translatez(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .pulse-shrink:hover {
            animation-name: pulse-shrink;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* push */
        @keyframes push {
            50% {
                transform: scale(.8);
            }
            100% {
                transform: scale(1);
            }
        }

        .push {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translatez(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .push:hover {
            animation-name: push;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        /* top */
        @keyframes top {
            50% {
                transform: scale(1.2);
            }
            100% {
                transform: scale(1);
            }
        }

        .top {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translatez(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);
        }
        .top:hover {
            animation-name: top;
            animation-duration: .3s;
            animation-timing-function: linear;
            animation-iteration-count: 1;
        }

        /* rotate */
        .rotate {
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            transform: translatez(0);
            box-shadow: 0 0 1px rgba(0, 0, 0, 0);

            transition-property: transform;
            transition-duration: .3s;
        }
        .rotate:hover {
            transform: rotate(5deg);
        }

        /* grow rotate */
        .grow-rotate {
            transition-property: transform;
            transition-duration: .3s;
        }
        .grow-rotate:hover {
            transform: rotate(5deg) scale(1.1);
        }

        /* float */
        .float {
            transition-property: transform;
            transition-duration: .3s;
        }
        .float:hover {
            transform: translatey(-5px);
        }

        /* sink */
        .sink {
            transition-property: transform;
            transition-duration: .3s;
        }
        .sink:hover {
            transform: translatey(5px);
        }

        /* hover */
        @keyframes hover {
            50% {
                transform: translatey(-3px);
            }

            100% {
                transform: translatey(-6px);
            }
        }

        .hover {
            transition-property: transform;
            transition-duration: .5s;
        }
        .hover:hover {
            transform: translatey(-6px);
            animation-name: hover;
            animation-duration: 1.5s;
            animation-delay: .5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* hang */
        @keyframes hang {
            50% {
                transform: translatey(3px);
            }

            100% {
                transform: translatey(6px);
            }
        }

        .hang {
            transition-duration: .5s;
            transition-property: transform;
        }
        .hang:hover {
            transform: translatey(6px);
            animation-name: hang;
            animation-duration: 1.5s;
            animation-delay: .5s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* skew */
        .skew {
            transition-property: transform;
            transition-duration: .3s;
        }
        .skew:hover {
            transform: skew(-10deg);
        }

        /* skew-forward */
        .skew-forward {
            transition-property: transform;
            transition-duration: .3s;
            transform-origin: 0 100%;
        }
        .skew-forward:hover {
            transform: skew(-10deg);
        }

        /* wobble vertical */
        @keyframes wobble-vertical {
            16.65% {
                transform: translatey(8px);
            }

            33.3% {
                transform: translatey(-6px);
            }

            49.95% {
                transform: translatey(4px);
            }

            66.6% {
                transform: translatey(-2px);
            }

            83.25% {
                transform: translatey(1px);
            }

            100% {
                transform: translatey(0);
            }
        }

        .wobble-vertical {}
        .wobble-vertical:hover {
            animation-name: wobble-vertical;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* wobble horizontal */
        @keyframes wobble-horizontal {
            16.65% { transform: translatex(8px); }
            33.3%  { transform: translatex(-6px); }
            49.95% { transform: translatex(4px); }
            66.6%  { transform: translatex(-2px); }
            83.25% { transform: translatex(1px); }
            100%   { transform: translatex(0); }
        }

        .wobble-horizontal {}
        .wobble-horizontal:hover {
            animation-name: wobble-horizontal;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* wobble top */
        @keyframes wobble-top {
            16.65% { transform: skew(-12deg); }
            33.3%  { transform: skew(10deg); }
            49.95% { transform: skew(-6deg); }
            66.6%  { transform: skew(4deg); }
            83.25% { transform: skew(-2deg); }
            100%   { transform: skew(0); }
        }

        .wobble-top {
            transform-origin: 0 100%;
        }
        .wobble-top:hover {
            animation-name: wobble-top;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* wobble bottom */
        @keyframes wobble-bottom {
            16.65% { transform: skew(-12deg); }
            33.3%  { transform: skew(10deg); }
            49.95% { transform: skew(-6deg); }
            66.6%  { transform: skew(4deg); }
            83.25% { transform: skew(-2deg); }
            100%   { transform: skew(0); }
        }

        .wobble-bottom {
            transform-origin: 100% 0;
        }
        .wobble-bottom:hover {
            animation-name: wobble-bottom;
            animation-duration: 1s;
            animation-timing-function: ease-in-out;
            animation-iteration-count: 1;
        }

        /* shadow and glow transitions */

        /*
            time: .3s;
            primarycolor: #ececec;
            secondecolor: #666;
            shadowcolor: rgba(0, 0, 0, .6);
        */

        /* border-fade */
        .border-fade {
            transition-property: box-shadow;
            transition-duration: .3s;
            box-shadow:
                    inset 0 0 0 4px #ececec,
                    0 0 1px rgba(0, 0, 0, 0);
        }
        .border-fade:hover {
            box-shadow:
                    inset 0 0 0 4px #666,
                    0 0 1px rgba(0, 0, 0, 0);
        }

        /* hollow */
        .hollow {
            transition-property: background;
            transition-duration: .3s;

            transform: translatez(0);
            box-shadow:
                    inset 0 0 0 4px #ececec,
                    0 0 1px rgba(0, 0, 0, 0);
        }
        .hollow:hover {
            background: none;
        }

        /* trim */
        .trim {
            position: relative;
        }
        .trim:before {
            content: '';
            position: absolute;
            border: 4px solid white;
            top: 4px;
            left: 4px;
            right: 4px;
            bottom: 4px;
            opacity: 0;

            transition-duration: .3s;
            transition-property: opacity;
        }
        .trim:hover:before {
            opacity: 1;
        }

        /* outline outward */
        .outline-outward {
            position: relative;
        }
        .outline-outward:before {
            content: '';
            position: absolute;
            border: #ececec solid 4px;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            transition-property: top right bottom left;
            transition-duration: .3s;
        }
        .outline-outward:hover:before {
            top: -8px;
            right: -8px;
            left: -8px;
            bottom: -8px;
        }

        /* outline inward */
        .outline-inward {
            position: relative;
        }
        .outline-inward:before {
            content: '';
            position: absolute;
            border: #ececec solid 4px;
            top: -16px;
            right: -16px;
            left: -16px;
            bottom: -16px;
            opacity: 0;

            transition-property: top left right bottom;
            transition-duration: .3s;
        }
        .outline-inward:hover:before {
            top: -8px;
            right: -8px;
            bottom: -8px;
            left: -8px;
            opacity: 1;
        }

        /* round corners */
        .round-corners {
            transition-property: border-radius;
            transition-duration: .3s;
        }
        .round-corners:hover {
            border-radius: 25px;
        }

        /* shadow/grow transitions */

        /* glow */
        .glow {
            transition-property: box-shadow;
            transition-duration: .3s;
        }
        .glow:hover {
            box-shadow: 0 0 8px rgba(0, 0, 0, .6);
        }

        /* box shadow outset */
        .box-shadow-outset {
            transition-property: box-shadow;
            transition-duration: .3s;
        }
        .box-shadow-outset:hover {
            box-shadow: 2px 2px 2px rgba(0, 0, 0, .6);
        }

        /* box-shadow-inset */
        .box-shadow-inset {
            transition-property: box-shadow;
            transition-duration: .3s;
        }
        .box-shadow-inset:hover {
            box-shadow: inset 2px 2px 2px rgba(0, 0, 0, .6);
        }

        /* float shadow */
        .float-shadow {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .float-shadow:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            top: 100%;
            left: 5%;
            height: 10px;
            width: 90%;
            opacity: 0;
            background: radial-gradient(ellipse at center, rgba(0, 0, 0, .35) 0%,rgba(0, 0, 0, 0) 80%);
            transition-property: transform opacity;
            transition-duration: .3s;
        }
        .float-shadow:hover {
            transform: translatey(-5px);
        }
        .float-shadow:hover:before {
            opacity: 1;
            transform: translatey(5px);
        }

        /* hover shadow */
        @keyframes hover {
            50% {
                transform: translatey(-3px);
            }
            100% {
                transform: translatey(-6px);
            }
        }
        @keyframes hover-shadow {
            0% {
                transform: translatey(6px);
                opacity: .4;
            }
            50% {
                transform: translatey(3px);
                opacity: 1;
            }
            100% {
                transform: translatey(6px);
                opacity: .4;
            }
        }
        .hover-shadow {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .hover-shadow:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            top: 100%;
            left: 5%;
            height: 10px;
            width: 90%;
            opacity: 0;
            background: radial-gradient(ellipse at center, rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 80%);
            transition-duration: .3s;
            transition-property: transform opacity;
        }
        .hover-shadow:hover {
            transform: translatey(-6px);
            animation-name: hover;
            animation-duration: 1.5s;
            animation-delay: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
        .hover-shadow:hover:before {
            opacity: .4;
            transform: translatey(6px);
            animation-name: hover-shadow;
            animation-duration: 1.5s;
            animation-delay: .3s;
            animation-timing-function: linear;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }

        /* shadow radial */
        .shadow-radial {
            position: relative;
        }
        .shadow-radial:before,
        .shadow-radial:after {
            pointer-events: none;
            position: absolute;
            content: '';
            left: 0;
            width: 100%;
            box-sizing: border-box;
            background-repeat: no-repeat;
            height: 5px;
            opacity: 0;
            transition-property: opacity;
            transition-duration: .3s;
        }
        .shadow-radial:before {
            bottom: 100%;
            background: radial-gradient(ellipse at 50% 150%, #666 0%, rgba(0,0,0,0) 80%);
        }
        .shadow-radial:after {
            top: 100%;
            background: radial-gradient(ellipse at 50% -50%, #666 0%, rgba(0,0,0,0) 80%);
        }
        .shadow-radial:hover:before,
        .shadow-radial:hover:after {
            opacity: 1;
        }

        /* speech bubbles */

        /* bubble top */
        .bubble-top {
            position: relative;
        }
        .bubble-top:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            left: calc(50% - 10px);
            top: 0;
            border-width: 0px 10px 10px 10px;
            border-color: transparent transparent #ececec transparent;
            transition-property: top;
            transition-duration: .3s;
        }
        .bubble-top:hover:before {
            top: -10px;
        }

        /* bubble right */
        .bubble-right {
            position: relative;
        }
        .bubble-right:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            transition-duration: .3s;
            transition-property: right;
            top: calc(50% - 10px);
            right: 0;
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent #ececec;
        }
        .bubble-right:hover:before {
            right: -10px;
        }

        /* bubble bottom */
        .bubble-bottom {
            position: relative;
        }
        .bubble-bottom:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #ececec transparent transparent transparent;
            left: calc(50% - 10px);
            bottom: 0;
            transition-duration: .3s;
            transition-property: bottom;
        }
        .bubble-bottom:hover:before {
            bottom: -10px;
        }

        /* bubble left */
        .bubble-left {
            position: relative;
        }
        .bubble-left:before {
            pointer-events: none;
            position: absolute;
            z-index: 1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent #ececec transparent transparent;
            top: calc(50% - 10px);
            left: 0;
            transition-property: left;
            transition-duration: .3s;
        }
        .bubble-left:hover:before {
            left: -10px;
        }

        /* bubble float top */
        .bubble-flout-top {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-flout-top:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            left: calc(50% - 10px);
            top: 0;
            border-width: 0px 10px 10px 10px;
            border-color: transparent transparent #ececec transparent;
            transition-property: top;
            transition-duration: .3s;
        }
        .bubble-flout-top:hover {
            transform: translatey(5px);
        }
        .bubble-flout-top:hover:before {
            top: -10px;
        }

        /* bubble float right */
        .bubble-float-right {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-float-right:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            transition-duration: .3s;
            transition-property: right;
            top: calc(50% - 10px);
            right: 0;
            border-width: 10px 0 10px 10px;
            border-color: transparent transparent transparent #ececec;
        }
        .bubble-float-right:hover {
            transform: translatex(-5px);
        }
        .bubble-float-right:hover:before {
            right: -10px;
        }

        /* bubble float bottom */
        .bubble-float-bottom {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-float-bottom:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 0 10px;
            border-color: #ececec transparent transparent transparent;
            left: calc(50% - 10px);
            bottom: 0;
            transition-duration: .3s;
            transition-property: bottom;
        }
        .bubble-float-bottom:hover {
            transform: translatey(-5px);
        }
        .bubble-float-bottom:hover:before {
            bottom: -10px;
        }

        /* bubble float left */
        .bubble-float-left {
            position: relative;
            transition-property: transform;
            transition-duration: .3s;
        }
        .bubble-float-left:before {
            pointer-events: none;
            position: absolute;
            z-index: -1;
            content: '';
            border-style: solid;
            border-width: 10px 10px 10px 0;
            border-color: transparent #ececec transparent transparent;
            top: calc(50% - 10px);
            left: 0;
            transition-duration: .3s;
            transition-property: left;
        }
        .bubble-float-left:hover {
            transform: translatex(5px);
        }
        .bubble-float-left:hover:before {
            left: -10px;
        }


        /* curl top left */
        .curl-top-left {
            position: relative;
        }
        .curl-top-left:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            top: 0;
            left: 0;
            background: linear-gradient(
                135deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: 1px 1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-top-left:hover:before {
            width: 15px;
            height: 15px;
        }

        /*
            w,h = 25px;
            leftarea : white;
            curllinecolor : #aaa;
            curltransitioncolro : #ccc;
            curllastcolour : white;
        */
        /* curl top right */
        .curl-top-right {
            position: relative;
        }
        .curl-top-right:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            top: 0;
            right: 0;
            background: linear-gradient(
                225deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: -1px 1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-top-right:hover:before {
            width: 15px;
            height: 15px;
        }

        /* curl bottom right */
        .curl-bottom-right {
            position: relative;
        }
        .curl-bottom-right:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            bottom: 0;
            right: 0;
            background: linear-gradient(
                315deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: -1px -1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-bottom-right:hover:before {
            width: 15px;
            height: 15px;
        }

        /* curl bottom left */
        .curl-bottom-left {
            position: relative;
        }
        .curl-bottom-left:before {
            pointer-events: none;
            position: absolute;
            content: '';
            height: 0;
            width: 0;
            bottom: 0;
            left: 0;
            background: linear-gradient(
                45deg,
                white 45%,
                #aaa 50%,
                #ccc 56%,
                white 80%
            );
            z-index: 1000;
            box-shadow: 1px -1px 1px rgba(0, 0, 0, .4);
            transition-property: width height;
            transition-duration: .3s;
        }
        .curl-bottom-left:hover:before {
            width: 15px;
            height: 15px;
        }
--></style>

对于的效果都以备注

使用

拿pulse为例子

导入上述的方法

全是再样式中操作

@keyframes pulse {
    25% {
        transform: scale(1.1);
    }

    75% {
        transform: scale(.9);
    }
}

配置方法

.pulse:hover {
    animation-name: pulse;  #方法名称
    animation-duration: 1s; #方法时间
    animation-timing-function: linear; #从开头到结尾以相同的速度来播放动画
    animation-iteration-count: infinite; #动画的次数
}

参考文档'https://www.w3school.com.cn/cssref/index.asp#animation'