CSS小白求大神指教。。。

现在是已经做好的样子。。。
就是想做下改进。。。。
就是最顶上的部分有3次从右往左的推动
第一次的图是这样

第二次是这样

第三次是和第二次一样的
就是想改成第二次是面对面
第三次换成第一次图片左边晓美焰面对面的
然后把下面这部分居中

然后宽度只有967px
求指教。。。
楼下附模板QAQ。。。。

body {
background: url("

") fixed 50% 0px; text-align: center; color: blue(45, 150,255); font-size: 13px;
}
div {
overflow: hidden; display: block;
}
body {
background-color: rgb(232, 232, 232);
}
.z {
width: 940px; padding-bottom: 100px; background-color: rgb(255, 255, 255);
}
.smallbox:after{
content:"Copyright 2014 bilibili.tv, All rights reserved";
bottom: 20px;
position: absolute;
text-align: center;
width: 100%;
padding-top: 20px;
}
body {
font-family:Comic Sans MS,"楷体"!important;
}
.z{
margin:0 auto;
text-align:center;
width:1934px;
position:relative;
}
.header {
background-color: #CCC;
height: 500px;
width: 1934px;
margin-bottom: 0px;
border-bottom-style: none;
animation: my_images 15s linear 0s infinite normal;
-moz-animation: my_images 15s linear 0s infinite normal;
-webkit-animation: my_images 15s linear 0s infinite normal;
-o-animation: my_images 15s linear 0s infinite normal;
background:url("

") no-repeat 0px 0px,url("

") no-repeat 967px 0px,url("

") no-repeat 1934px 0px;
}
.header:after {
content:"";
height: 5px;
background-color: rgb(198,0,0);
bottom: 0px;
left: 0px;
width: 100%;
position: absolute;
animation: my_images_bar 15s linear 0s infinite normal;
-moz-animation: my_images_bar 15s linear 0s infinite normal;
-webkit-animation: my_images_bar 15s linear 0s infinite normal;
-o-animation: my_images_bar 15s linear 0s infinite normal;
}
@keyframes my_images
{
0% {background-position:0px 0px,967px 0px,1934px 0px;}
32% {background-position:0px 0px,967px 0px,1934px 0px;}
33% {background-position:-967px 0px,0px 0px,967px 0px;}
65% {background-position:-967px 0px,0px 0px,967px 0px;}
66% {background-position:-1934px 0px,-967px 0px,0px 0px;}
98% {background-position:-1934px 0px,-967px 0px,0px 0px;}
100% {background-position:0px 0px,967px 0px,1934px 0px;}
}
@-moz-keyframes my_images
{
0% {background-position:0px 0px,967px 0px,1934px 0px;}
32% {background-position:0px 0px,967px 0px,1934px 0px;}
33% {background-position:-967px 0px,0px 0px,967px 0px;}
65% {background-position:-967px 0px,0px 0px,967px 0px;}
66% {background-position:-1934px 0px,-967px 0px,0px 0px;}
98% {background-position:-1934px 0px,-967px 0px,0px 0px;}
100% {background-position:0px 0px,967px 0px,1934px 0px;}
}
@-webkit-keyframes my_images
{
0% {background-position:0px 0px,967px 0px,1934px 0px;}
32% {background-position:0px 0px,967px 0px,1934px 0px;}
33% {background-position:-967px 0px,0px 0px,967px 0px;}
65% {background-position:-967px 0px,0px 0px,967px 0px;}
66% {background-position:-1934px 0px,-967px 0px,0px 0px;}
98% {background-position:-1934px 0px,-967px 0px,0px 0px;}
100% {background-position:0px 0px,967px 0px,1934px 0px;}
}
@-o-keyframes my_images
{
0% {background-position:0px 0px,967px 0px,1934px 0px;}
32% {background-position:0px 0px,967px 0px,1934px 0px;}
33% {background-position:-967px 0px,0px 0px,967px 0px;}
65% {background-position:-967px 0px,0px 0px,967px 0px;}
66% {background-position:-1934px 0px,-967px 0px,0px 0px;}
98% {background-position:-1934px 0px,-967px 0px,0px 0px;}
100% {background-position:0px 0px,967px 0px,1934px 0px;}
}
@keyframes my_images_bar
{
0% {width: 0%;}
32% {width: 100%;}
33% {width: 0%;}
65% {width: 100%;}
66% {width: 0%;}
98% {width: 100%;}
100% {width: 0%;}
}
@-moz-keyframes my_images_bar
{
0% {width: 0%;}
32% {width: 100%;}
33% {width: 0%;}
65% {width: 100%;}
66% {width: 0%;}
98% {width: 100%;}
100% {width: 0%;}
}
@-webkit-keyframes my_images_bar
{
0% {width: 0%;}
32% {width: 100%;}
33% {width: 0%;}
65% {width: 100%;}
66% {width: 0%;}
98% {width: 100%;}
100% {width: 0%;}
}
@-o-keyframes my_images_bar
{
0% {width: 0%;}
32% {width: 100%;}
33% {width: 0%;}
65% {width: 100%;}
66% {width: 0%;}
98% {width: 100%;}
100% {width: 0%;}
}

扫二维码下载贴吧客户端

下载贴吧APP
看高清直播、视频！

1回复贴，共1页

<<返回css吧

分享到:

日	一	二	三	四	五	六