CSS3实现的一批hover特效_html/css_WEB-ITnose

本特效的原版是codepen上面的hover.css项目，个人很喜欢所以把所有的hover特效自己也写了一遍，上传文件麻烦所以直接把css整合到HTML代码中了，代码复制下来保存后即可用浏览器打开浏览。

      <meta charset="utf-8">    <meta http-equiv="X-UA-Compatible" content="IE=edge">    <meta name="viewport" content="width=device-width, initial-scale=1">    <title id="title">Hover</title>    <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>    <link href="css/hover.css" rel="stylesheet">        <div class="container">        <h2>2D Transforms</h2>        <a href="#" class="button grow">Grow</a>        <a href="#" class="button shrink">Shrink</a>        <a href="#" class="button pulse">Pulse</a>        <a href="#" class="button pulse-grow">Pulse-grow</a>        <a href="#" class="button pulse-shrink">Pulse-shrink</a>        <a href="#" class="button push">Push</a>        <a href="#" class="button top">Top</a>        <a href="#" class="button rotate">Rotate</a>        <a href="#" class="button grow-rotate">Grow-rotate</a>        <a href="#" class="button float">Float</a>        <a href="#" class="button sink">Sink</a>        <a href="#" class="button hover">Hover</a>        <a href="#" class="button hang">Hang</a>        <a href="#" class="button skew">Skew</a>        <a href="#" class="button skew-forward">Skew-forward</a>        <a href="#" class="button wobble-vertical">Wobble-vertical</a>        <a href="#" class="button wobble-horizontal">Wobble-horizontal</a>        <a href="#" class="button wobble-top">Wobble-top</a>        <a href="#" class="button wobble-bottom">Wobble-bottom</a>        <br>        <h2>Border Transitions</h2>        <a href="#" class="button border-fade">Border-fade</a>        <a href="#" class="button hollow">Hollow</a>        <a href="#" class="button trim">Trim</a>        <a href="#" class="button outline-outward">Outline-outward</a>        <a href="#" class="button outline-inward">Outline-inward</a>        <a href="#" class="button round-corners">Round-corners</a>        <br>        <h2>Shadow and Glow Transitions</h2>        <a href="#" class="button glow">glow</a>        <a href="#" class="button box-shadow-outset">box-shadow-outset</a>        <a href="#" class="button box-shadow-inset">box-shadow-inset</a>        <a href="#" class="button float-shadow">float-shadow</a>        <a href="#" class="button hover-shadow">hover-shadow</a>        <a href="#" class="button shadow-radial">shadow-radial</a>                <h2>Speech Bubbles</h2>        <a href="#" class="button bubble-top">bubble-top</a>        <a href="#" class="button bubble-right">bubble-right</a>        <a href="#" class="button bubble-bottom">bubble-bottom</a>        <a href="#" class="button bubble-left">bubble-left</a>        <a href="#" class="button bubble-flout-top">bubble-flout-top</a>        <a href="#" class="button bubble-float-right">bubble-float-right</a>        <a href="#" class="button bubble-float-bottom">bubble-float-bottom</a>        <a href="#" class="button bubble-float-left">bubble-float-left</a>        <h2>Curls</h2>        <a href="#" class="button curl-top-left">curl-top-left</a>        <a href="#" class="button curl-top-right">curl-top-right</a>        <a href="#" class="button curl-bottom-right">curl-bottom-right</a>        <a href="#" class="button curl-bottom-left">curl-bottom-left</a>    </div>  

版权声明：本文为博主原创文章，未经博主允许不得转载。