css3 动画图片滚动条,CSS3 滚动动画的图标

CSS

语言：

CSSSCSS

确定

body {

background: #252525; }

#mouse-icon {

width: 17px;

height: 25px;

display: block;

margin: -20px 0 0 -7px;

border: 3px solid #fff;

position: absolute;

z-index: 700;

opacity: 0.5;

top: 50%;

left: 50%;

-webkit-border-radius: 10px;

-moz-border-radius: 10px;

-o-border-radius: 10px;

border-radius: 10px;

-moz-transition: all 0.25s ease-in-out;

-webkit-transition: all 0.25s ease-in-out;

transition: all 0.25s ease-in-out; }

#mouse-icon::before {

content: 'SCROLL';

width: 60px;

display: block;

margin: 0 0 0 -30px;

position: absolute;

left: 50%;

text-align: center;

font: 1em 'Dosis', sans-serif;

color: #fff;

font-weight: 700;

opacity: 0;

-webkit-transform: scaleX(0);

-moz-transform: scaleX(0);

-o-transform: scaleX(0);

transform: scaleX(0);

-moz-transition: all 0.3s ease-in-out;

-webkit-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out; }

#mouse-icon:hover {

opacity: 1;

cursor: pointer; }

#mouse-icon:hover:before {

margin-top: -30px;

opacity: 1;

-webkit-transform: scaleX(1);

-moz-transform: scaleX(1);

-o-transform: scaleX(1);

transform: scaleX(1); }

#scroll-wheel {

width: 5px;

height: 6px;

display: block;

position: absolute;

top: 5px;

left: 6px;

background: #fff;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

-o-border-radius: 3px;

border-radius: 3px;

-webkit-animation: scrollWheel 1s linear infinite;

-moz-animation: scrollWheel1s linear infinite;

-o-animation: scrollWheel 1s linear infinite;

animation: scrollWheel 0.1s linear infinite; }

@-webkit-keyframes scrollWheel {

0% {

top: 5px;

opacity: 1; }

100% {

top: 20px;

opacity: 0; } }

@-moz-keyframes scrollWheel {

0% {

top: 5px;

opacity: 1; }

100% {

top: 20px;

opacity: 0; } }

@-o-keyframes scrollWheel {

0% {

top: 5px;

opacity: 1; }

100% {

top: 20px;

opacity: 0; } }