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 {
            tran