图片特效 demo

心得

我觉得在学习基础理论知识的同时，也要提高自己的实践能力。平时学习JavaScript累了的时候，我就会找些特效刺激刺激神经。CodePen是我无意中发现的，并从此一发不可收拾。里面有很多不错的特效，值得借鉴和积累。不过基本功还是很重要，这些能做的，也仅仅是锦上添花。学会分析他人的特效，然后试着自己模仿而不是直接去看源码，这才有利于自己能力的提升。

无效果

中间拉伸

效果

css

 /* Zoom In #1 */
        .hover01 figure img {
            -webkit-transform: scale(1);
            transform: scale(1);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover01 figure:hover img {
            -webkit-transform: scale(1.3);
            transform: scale(1.3);
        }

左上角拉伸

效果

css

 /* Zoom In #2 */
        .hover02 figure img {
            width: 300px;
            height: auto;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover02 figure:hover img {
            width: 350px;
        }

向中拉伸

效果

css

 /* Zoom Out #1 */
        .hover03 figure img {
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover03 figure:hover img {
            -webkit-transform: scale(1);
            transform: scale(1);
        }

向左上角拉伸

效果

css

 /* Zoom Out #2 */
        .hover04 figure img {
            width: 400px;
            height: auto;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover04 figure:hover img {
            width: 300px;
        }

向左移动

效果

css

  /* Slide */
        .hover05 figure img {
            margin-left: 30px;
            -webkit-transform: scale(1.5);
            transform: scale(1.5);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover05 figure:hover img {
            margin-left: 0;
        }

旋转

效果

css

 /* Rotate */
        .hover06 figure img {
            -webkit-transform: rotate(15deg) scale(1.4);
            transform: rotate(15deg) scale(1.4);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover06 figure:hover img {
            -webkit-transform: rotate(0) scale(1);
            transform: rotate(0) scale(1);
        }

模糊

效果

css

   /* Blur */
        .hover07 figure img {
            -webkit-filter: blur(3px);
            filter: blur(3px);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover07 figure:hover img {
            -webkit-filter: blur(0);
            filter: blur(0);
        }

灰度

效果

css

 /* Gray Scale */
        .hover08 figure img {
            -webkit-filter: grayscale(100%);
            filter: grayscale(100%);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover08 figure:hover img {
            -webkit-filter: grayscale(0);
            filter: grayscale(0);
        }

泛黄

效果

css

   /* Sepia */
        .hover09 figure img {
            -webkit-filter: sepia(100%);
            filter: sepia(100%);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover09 figure:hover img {
            -webkit-filter: sepia(0);
            filter: sepia(0);
        }

模糊+灰度

效果

css

  /* Blur + Gray Scale */
        .hover10 figure img {
            -webkit-filter: grayscale(0) blur(0);
            filter: grayscale(0) blur(0);
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover10 figure:hover img {
            -webkit-filter: grayscale(100%) blur(3px);
            filter: grayscale(100%) blur(3px);
        }

透明

效果

css

 /* Opacity #1 */
        .hover11 figure img {
            opacity: 1;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover11 figure:hover img {
            opacity: .5;
        }

透明+背景色

效果

css

   /* Opacity #2 */
        .hover12 figure {
            background: #1abc9c;
        }
        .hover12 figure img {
            opacity: 1;
            -webkit-transition: .3s ease-in-out;
            transition: .3s ease-in-out;
        }
        .hover12 figure:hover img {
            opacity: .5;
        }

闪光

效果

css

  /* Flashing */
        .hover13 figure:hover img {
            opacity: 1;
            -webkit-animation: flash 1.5s;
            animation: flash 1.5s;
        }
        @-webkit-keyframes flash {
            0% {
                opacity: .4;
            }
            100% {
                opacity: 1;
            }
        }
        @keyframes flash {
            0% {
                opacity: .4;
            }
            100% {
                opacity: 1;
            }
        }

闪亮

效果

css

  /* Shine */
        .hover14 figure {
            position: relative;
        }
        .hover14 figure::before {
            position: absolute;
            top: 0;
            left: -75%;
            z-index: 2;
            display: block;
            content: '';
            width: 50%;
            height: 100%;
            background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
            -webkit-transform: skewX(-25deg);
            transform: skewX(-25deg);
        }
        .hover14 figure:hover::before {
            -webkit-animation: shine .75s;
            animation: shine .75s;
        }
        @-webkit-keyframes shine {
            100% {
                left: 125%;
            }
        }
        @keyframes shine {
            100% {
                left: 125%;
            }
        }

水波扩散

效果

css

   /* Circle */
        .hover15 figure {
            position: relative;
        }
        .hover15 figure::before {
            position: absolute;
            top: 50%;
            left: 50%;
            z-index: 2;
            display: block;
            content: '';
            width: 0;
            height: 0;
            background: rgba(255,255,255,.2);
            border-radius: 100%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            opacity: 0;
        }
        .hover15 figure:hover::before {
            -webkit-animation: circle .75s;
            animation: circle .75s;
        }
        @-webkit-keyframes circle {
            0% {
                opacity: 1;
            }
            40% {
                opacity: 1;
            }
            100% {
                width: 200%;
                height: 200%;
                opacity: 0;
            }
        }
        @keyframes circle {
            0% {
                opacity: 1;
            }
            40% {
                opacity: 1;
            }
            100% {
                width: 200%;
                height: 200%;
                opacity: 0;
            }
        }

源码

https://github.com/iamcgt/Front-end-development.git

参考

http://codepen.io/nxworld/pen/ZYNOBZ