背景
-
- 使用逗号分开
- background: url(1.jpg) no-repeat 0 0 ,url(2.jpg) 0 70%;
- 表示第二个背景图为位置在left为0高度是70%的位置
- background: url(1.jpg) no-repeat 0 0 ,url(2.jpg) 0 70%;
- 使用逗号分开
-
- background-size: x y ;
- background-size: 100% 100%; 表示沾满整个DIV
- cover 放大
- contain 缩小
- background-size: x y ;
-
- background-origin : border-box || padding-box|| content-box
- border-box:从border区域开始显示背景
- padding-box:默认就是从不包含border,也就是从padding区域开始显示背景
- content-box:表示从内容区域开始。比如要是父元素用了padding,那么他就从内容区域开始
background-clip: border-box ||padding-box||content-box|| text
border-box:从border区域向外边裁剪背景
padding-box:从padding区域向外边裁剪背景
content-box:从内容区域向外边裁剪背景
text:只给文字加背景。文字以外的背景全部裁掉
苹果开机动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iphone开机动画</title>
<style>
body {background: #000; text-align: center; font: 50px/200px "微软雅黑";}
h1 {display: inline-block; color: rgba(255, 255, 255, 0.3); background: -webkit-linear-gradient(-30deg, rgba(255, 255, 255, 0) 100px, rgba(255, 255, 255, 1) 180px, rgba(255, 255, 255, 1) 240px, rgba(255, 255, 255, 0) 300px) no-repeat -300px; -webkit-background-clip: text;}
</style>
<script>
window.onload = function(){
var oH1 = document.getElementsByTagName('h1')[0];
var oTimer = null;
var iLeft = -300;
function toMove(){
oTimer = setInterval(function(){
iLeft+=10;
if(iLeft == 600){
iLeft = -300;
clearInterval(oTimer);
}
oH1.style.backgroundPosition = iLeft + 'px 0px';
}, 20)
}
setInterval(function(){
toMove();
}, 3000)
}
</script>
</head>
<body>
<h1>苹果开机效果</h1>
</body>
</html>
效果图如下:
苹果开机.gif
