css怎么喷动态图片,CSS3 照片动态模糊效果

CSS

语言：

CSSSCSS

确定

@-webkit-keyframes slideInAnimation {

0% {

-webkit-transform: translate(75vw, 0);

transform: translate(75vw, 0);

}

100% {

-webkit-transform: translate(-75vw, 0);

transform: translate(-75vw, 0);

}

}

@keyframes slideInAnimation {

0% {

-webkit-transform: translate(75vw, 0);

transform: translate(75vw, 0);

}

100% {

-webkit-transform: translate(-75vw, 0);

transform: translate(-75vw, 0);

}

}

body {

background: crimson -webkit-radial-gradient(center ellipse, #dc143c 0%, #420612 100%);

background: crimson radial-gradient(ellipse at center, #dc143c 0%, #420612 100%);

height: 100vh;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

overflow: hidden;

}

.container {

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-webkit-flex-direction: column;

-ms-flex-direction: column;

flex-direction: column;

}

.img-container {

width: 500px;

height: 379px;

display: -webkit-box;

display: -webkit-flex;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-webkit-align-items: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-webkit-justify-content: center;

-ms-flex-pack: center;

justify-content: center;

overflow: hidden;

-webkit-transition: 250ms ease-out;

transition: 250ms ease-out;

}

.img-container .img-source {

background: url("http://mephysto.github.io/sandbox/alice-back.jpg") no-repeat;

background-size: 500px 379px;

width: 500px;

height: 379px;

-webkit-transform: scale(1, 1);

transform: scale(1, 1);

-webkit-filter: blur(0px);

filter: blur(0px);

-webkit-transition: all 250ms ease-out, -webkit-transform 250ms linear;

transition: all 250ms ease-out, -webkit-transform 250ms linear;

transition: all 250ms ease-out, transform 250ms linear;

transition: all 250ms ease-out, transform 250ms linear, -webkit-transform 250ms linear;

}

.img-container.blurred {

-webkit-animation: 500ms slideInAnimation ease-out forwards infinite;

animation: 500ms slideInAnimation ease-out forwards infinite;

}

.img-container.blurred .img-source {

-webkit-transition: all 250ms ease-in, -webkit-transform 250ms ease-out;

transition: all 250ms ease-in, -webkit-transform 250ms ease-out;

transition: all 250ms ease-in, transform 250ms ease-out;

transition: all 250ms ease-in, transform 250ms ease-out, -webkit-transform 250ms ease-out;

background-size: 500px 3790px;

width: 500px;

height: 3790px;

-webkit-filter: blur(30px);

filter: blur(30px);

-webkit-transform: scale(1, 0.1);

transform: scale(1, 0.1);

}

.img-container.no-move {

-webkit-animation: none;

animation: none;

overflow: none;

}

.img-container.no-move .img-source {

-webkit-transition: none;

transition: none;

}

.credits {

position: fixed;

bottom: 0;

right: 0;

}

.credits a {

display: inline-block;

font-size: 10px;

margin: 0.5em 1em;

text-align: right;

color: rgba(255, 255, 255, 0.25);

text-transform: uppercase;

font-family: consolas, monospace;

-webkit-transition: 250ms;

transition: 250ms;

}

.credits a:hover {

color: white;

}