html图片上下自动滚动,CSS3 屏幕上下滚动图片切换动效

CSS

语言：

CSSSCSS

确定

body {

margin: 0;

padding: 0;

text-align: center;

background-color: #FFF;

}

div:nth-of-type(2n) {

background-color: #242222;

}

#first,

#second,

#third,

#fourth,

#fifth,

#sixth,

#seventh,

#eighth,

#ninth,

#tenth {

width: 100%;

height: 500px;

border-bottom: 1px solid black;

}

#first {

background-image: url('/uploads/150501/aw-blue.png');

background-attachment: fixed;

background-size: contain;

background-position: center;

background-repeat: no-repeat;

overflow: hidden;

height: 100vh;

}

h2 {

margin: 0 auto;

color: #000;

background-color: #;

font: small-caps 300 50px 'Oswald', sans-serif;

letter-spacing: 5px;

padding-bottom: 5px;

border-bottom: 1px solid black;

width: 650px;

text-shadow: 0px 0px px #000;

}

.other {

font-weight: 700;

}

#third {

background-image: url('/uploads/150501/aw-red.png');

background-attachment: fixed;

background-size: contain;

background-position: center;

background-repeat: no-repeat;

overflow: hidden;

height: 800px;

}

#fifth {

background-image: url('/uploads/150501/aw-green.png');

background-attachment: fixed;

background-size: contain;

background-position: center;

background-repeat: no-repeat;

overflow: hidden;

height: 800px;

}

#seventh {

background-image: url('/uploads/150501/aw-blue.png');

background-attachment: fixed;

background-size: contain;

bacgkround-position: center;

background-repeat: no-repeat;

height: 800px;

}

#ninth {

background-image: url('');

background-attachment: fixed;

background-size: contain;

background-position: center;

background-repeat: no-repeat;

height: 800px;

}