css 图片失真,CSS3 图片模糊和反转效果

CSS

语言：

CSSSCSS

确定

* {

box-sizing: border-box;

}

html,

body {

position: relative;

height: 100%;

}

body {

margin: 0;

padding: 0;

/* grid columns

-----------------------------------*/

}

.col-2 {

display: block;

float: left;

width: calc(100%/2);

}

@media (max-width: 480px) {

/* Sepia effect

-----------------------------------*/

.col-2 {

width: 100%;

}

}

.sepia {

position: relative;

overflow: hidden;

margin: 0;

}

.sepia .image img {

display: block;

width: 100%;

-webkit-filter: sepia(1);

transition: all 800ms 300ms linear;

}

.sepia:hover .image img {

-webkit-filter: sepia(0);

transition: all 800ms linear;

}

.sepia span,

.sepia span:before,

.sepia span:after {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(255, 255, 255, 0.1);

transition: all 800ms linear;

}

.sepia span:after,

.sepia span:before {

content: "";

}

.sepia span:before {

transform: translate(0%, 0%);

transition: all 800ms 300ms linear;

}

.sepia span:after {

transform: translate(0%, 0%);

transition: all 800ms 300ms linear;

}

.sepia:hover span:before {

transform: translate(0%, 100%);

transition: all 800ms linear;

}

.sepia:hover span:after {

transform: translate(0%, -100%);

transition: all 800ms linear;

/* Grayscale effect

-----------------------------------*/

}

.grayscale {

position: relative;

overflow: hidden;

}

.grayscale .image img {

display: block;

width: 100%;

-webkit-filter: grayscale(1);

filter: grayscale(1);

transition: all 1000ms 300ms linear;

}

.grayscale:hover .image img {

-webkit-filter: grayscale(0);

filter: grayscale(0);

transition: all 1000ms 300ms linear;

}

.grayscale span,

.grayscale span:before,

.grayscale span:after {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.1);

transition: all 800ms linear;

}

.grayscale span:after,

.grayscale span:before {

content: "";

}

.grayscale span:before {

transform: translate(0%, 0%);

transition: all 800ms linear;

}

.grayscale span:after {

transform: translate(0%, 0%);

transition: all 800ms linear;

}

.grayscale:hover span:before {

transform: translate(100%, 0%);

transition: all 800ms linear;

}

.grayscale:hover span:after {

transform: translate(-100%, 0%);

transition: all 800ms linear;

/* Hue-rotate effect

-----------------------------------*/

}

.hue-rotate {

position: relative;

overflow: hidden;

}

.hue-rotate .image img {

display: block;

width: 100%;

-webkit-filter: hue-rotate(180deg);

filter: hue-rotate(180deg);

transition: all 1000ms 300ms linear;

}

.hue-rotate:hover .image img {

-webkit-filter: hue-rotate(0deg);

filter: hue-rotate(0deg);

transition: all 1000ms 300ms linear;

}

.hue-rotate span,

.hue-rotate span:before,

.hue-rotate span:after {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.1);

transition: all 800ms linear;

}

.hue-rotate span:after,

.hue-rotate span:before {

content: "";

}

.hue-rotate span:before {

transform: translate(0%, 0%);

transition: all 800ms linear;

}

.hue-rotate span:after {

transform: translate(0%, 0%);

transition: all 800ms linear;

}

.hue-rotate:hover span:before {

transform: translate(100%, 0%);

transition: all 800ms linear;

}

.hue-rotate:hover span:after {

transform: translate(-100%, 0%);

transition: all 800ms linear;

/* Invert effect

-----------------------------------*/

}

.invert {

position: relative;

overflow: hidden;

}

.invert .image img {

display: block;

width: 100%;

-webkit-filter: invert(1);

filter: invert(1);

transition: all 1000ms 300ms linear;

}

.invert:hover .image img {

-webkit-filter: invert(0);

filter: invert(0);

transition: all 1000ms 300ms linear;

}

.invert span,

.invert span:before,

.invert span:after {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

background: rgba(0, 0, 0, 0.1);

transition: all 800ms linear;

}

.invert span:after,

.invert span:before {

content: "";

}

.invert span:before {

transform: translate(0%, 0%);

transition: all 800ms linear;

}

.invert span:after {

transform: translate(0%, 0%);

transition: all 800ms linear;

}

.invert:hover span:before {

transform: translate(0%, 100%);

transition: all 800ms linear;

}

.invert:hover span:after {

transform: translate(0%, -100%);

transition: all 800ms linear;

}