CSS3(九) CSS3 背景

CSS3

发布日期: 2020-05-04

更新日期: 2020-05-24

文章字数: 378

阅读时长: 1 分

阅读次数:

背景

多背景
- 使用逗号分开
  - background: url(1.jpg) no-repeat 0 0 ,url(2.jpg) 0 70%;
    - 表示第二个背景图为位置在 left 为 0 高度是 70%的位置
背景尺寸
- background-size: x y ;
  - background-size: 100% 100%; 表示沾满整个 DIV
  - cover 放大
  - contain 缩小
背景原点
- 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>