好看的鼠标hover效果_情愿_前端开发者

0919自我总结

常见的鼠标hover效果

展示效果:http://ianlunn.github.io/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>

<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为例子

pulse

导入上述的方法

全是再样式中操作

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

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

@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; #动画的次数
}

.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

https://www.w3school.com.cn/cssref/index.asp#animation

» 本文来自:前端开发者 » 《好看的鼠标hover效果_情愿_前端开发者》
» 本文链接地址:https://www.rokub.com/73261.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!