接下来把背景放大500%,然后设置了一个15秒的动画,动画infinite无限循环。
动画部分就是对背景进行一个定位,实现渐变颜色的动态切换。
html结构
css样式
gitee地址: siebe/html-css-demo (https://gitee.com/siebe/html-css-demo)
一、从上往下渐变body{}{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#ffffff,endColorStr=#000000)"
}
二、从左上至右下渐变
body{}{
FILTER: Alpha( style=1,opacity=25,finishOpacity=100,startX=50,finishX= 100,startY=50,finishY=100)
background-color: skyblue
}
三、从左往右渐变
body{}{
FILTER: progid:DXImageTransform.Microsoft.Gradient(gradientType=1,startColorStr=#ffffff,endColorStr=#000000)"
}
方法:根据浏览者的分辨率自动调用样式表1、新建两个样式表分别命名为:1024.css800.css(当然有更多分辨率,可以增加样式表)
2、在样式表中分别定义好图片作为网页背景。
3、新建一个网页文件,把下面代码复制过去。
<script language="JavaScript">
<!--
function test(){
var a=screen.width+".css"
//alert(a)
//测试变量a的值
document.getElementById("eric").href =a
}
//-->
</script>
<html>
<head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<title>无标题文档</title>
<link href="" rel="stylesheet" type="text/css" id="eric">
</head>
<body onLoad="test()">
</body>
</html>
搞定!