html与css的配合

第一篇博客，博主就写写刚打出来的 html与 css的结合而设计的一个网页和小动画效果，拿来与大家共同探讨下，有错可指正哦!闲言少叙，上代码：

</*动画效果跑屏*/
#message{
	width:57px;
	height:57px;
	position:absolute;
	z-index:3;
	background:url(../image13/apple-touch-icon-57-precomposed.png);
	left:5%;
	top:8%;
	-moz-animation:mg 30s infinite alternate;
}
@-moz-keyframes mg{
	
	0%{background:#4A0C39;left:5%;top:8%; }
	25%{background:#295948;left:95%;top:8%}
	50%{background:#2E2959;left:95%;top:90%;}
	75%{background:#492959;left:5%;top:90%;}
	100%{background:#595029;left:5%;top:8%;}
	
}
/*动画效果颜色渐变*/
.title {
	width: 100%;
	height: 485px;
	
	background: #59294C url(../image1/bs-docs-masthead-pattern.png) ;
	/*动画时间*/
	-moz-animation: a 9s infinite alternate;
	-ms-animation:anim 0.01s infinite alternate;
}
@-moz-keyframes a{
	0%{background:#4A0C39 }
	15%{background:#1D2925}
	25%{background:#295948}
	45%{background:#18171A}
	50%{background:#2E2959}
	75%{background:#492959}
	100%{background:#595029}
}

结果如下：

****************************************************************************************

从截图可看出此网页的一图标‘’B‘’其实是在满屏跑的，其次就是页面的‘’LOGO‘’背景颜色其实也是在不断变幻的，因为懒得弄，所以颜色不明显，小伙伴们可自行修改，好了就到这吧。

注：此网页是仿照Boostrap网站写的。