Directly replace the picture can be, my picture is transparent, so the body is set to black, not to be removed
<!doctype html>
<meta charset= "UTF-8" >
<TITLE>CSS3 picture zoom in and out flicker effect </title>
<style>
Body{background: #000; opacity:0.8;}
. flicker_down{
width:105px;
height:105px;
Display:inline-block;
position:fixed;
bottom:80px;
left:50%;
Background:url ("Images/last.png") no-repeat;
}
@keyframes flicker{
0%,100%{
Transform:scale (0.6);
-moz-transform:scale (0.6);
-o-transform:scale (0.6);
-webkit-transform:scale (0.6);
-ms-transform:scale (0.6);
opacity:0
}
50%{
Transform:scale (1.0);
-moz-transform:scale (1.0);
-o-transform:scale (1.0);
-webkit-transform:scale (1.0);
-ms-transform:scale (1.0);
Opacity:1
}
}
@-webkit-keyframes flicker{
0%,100%{
-webkit-transform:scale (0.6);
-moz-transform:scale (0.6);
-o-transform:scale (0.6);
-ms-transform:scale (0.6);
Transform:scale (0.6);
opacity:0
}
50%{
-webkit-transform:scale (1.0);
-moz-transform:scale (1.0);
-o-transform:scale (1.0);
-ms-transform:scale (1.0);
Transform:scale (1.0);
Opacity:1
}
}
@-moz-keyframes flicker{
0%,100%{
-moz-transform:scale (0.6);
-o-transform:scale (0.6);
-webkit-transform:scale (0.6);
-ms-transform:scale (0.6);
Transform:scale (0.6);
opacity:0
}
50%{
-moz-transform:scale (1.0);
-o-transform:scale (1.0);
-webkit-transform:scale (1.0);
-ms-transform:scale (1.0);
Transform:scale (1.0);
Opacity:1
}
}
@-o-keyframes flicker{
0%,100%{
-o-transform:scale (0.6);
-moz-transform:scale (0.6);
-webkit-transform:scale (0.6);
-ms-transform:scale (0.6);
Transform:scale (0.6);
opacity:0
}
50%{
-o-transform:scale (1.0);
-moz-transform:scale (1.0);
-webkit-transform:scale (1.0);
-ms-transform:scale (1.0);
Transform:scale (1.0);
Opacity:1
}
}
. Flicker_down. trans{
-webkit-animation:flicker 2.0s Infinite ease-in-out;
-moz-animation:flicker 2.0s Infinite ease-in-out;
-o-animation:flicker 2.0s Infinite ease-in-out;
Animation:flicker 2.0s Infinite Ease-in-out
}
. Flicker_down. arrow{
animation-delay:-2.0s;
-webkit-animation-delay:-2.0s;
-moz-animation-delay:-2.0s;
-o-animation-delay:-2.0s
}
</style>
<body>
<div>
<a class= "Flicker_down arrow Trans" href= "" onclick= "return false;" hidefocus= "" ></a>
</div>
</body>
CSS3 picture zoom in to zoom out flicker effect