css3上下滑动,CSS3 上下浮动的页面滚动提示箭头

CSS

语言：

CSSSCSS

确定

html,

body {

height: 100%;

width: 100%;

margin: 0;

padding: 0;

position: relative;

font: 100%/1.5 Helvetica Neue;

-webkit-font-smoothing: antialiased;

background-color: #0e2d44;

color: #fff;

}

.shine {

position: absolute;

width: 200px;

top: 50%;

left: 50%;

height: 60px;

margin-left: -100px;

text-align: center;

text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);

-webkit-mask-image: linear-gradient(-75deg, rgba(0, 0, 0, 0.6) 30%, #000 50%, rgba(0, 0, 0, 0.6) 70%);

-webkit-mask-size: 200%;

animation: shine 4s infinite, hover 2s alternate infinite ease-in-out;

}

.shine:after {

content: '';

position: relative;

display: block;

width: 10px;

height: 10px;

border: 2px solid #fff;

border-top: none;

border-left: none;

left: 50%;

margin-left: -5px;

transform: translateY(30%) rotate(45deg);

animation: hoverSmall 2s 1s alternate infinite ease-in-out;

}

@-webkit-keyframes shine {

from {

-webkit-mask-position: 150%;

}

to {

-webkit-mask-position: -50%;

}

}

@-webkit-keyframes hover {

from {

transform: translateY(-50%);

}

to {

transform: translateY(-75%);

}

}

@-webkit-keyframes hoverSmall {

from {

transform: translateY(30%) rotate(45deg);

}

to {

transform: translateY(-10%) rotate(45deg);

}

}