第二周（2015.10.19-10.23）

使元素固定在页面：

div{
      position:fixed;
      top:0;
      left:0;
}

例如做页面导航时，可以固定导航在页面顶端，使之不会随着页面的下滑而看不见。

相对定位：

设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。

绝对定位：

设置为绝对定位的元素框从文档流完全删除，并相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常的文档流中所占的空间会关闭，就好像该元素原来不存在一样。元素定位后生成一个块级框，而不论原来的它在正常流中生成何种类型的框。

单个圆圈闪烁：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        #spinner {
            width: 100px;
            height: 100px;
            margin: 100px auto;
            background-color:red;
            border-radius: 100%;
            -webkit-animation: scaleout 1.0s infinite ease-in-out;
            animation: scaleout 1.0s infinite ease-in-out;
        }
        @-moz-keyframes scaleout {
            0% { -moz-transform: scale(0.0) }
            100% {
                -moz-transform: scale(1.1);
                opacity: 0;
            }
        }
        @keyframes scaleout {
            0% {
                transform: scale(0.0);
                -moz-transform: scale(0.0);
            } 100% {
                  transform: scale(1.0);
                  -moz-transform: scale(1.0);
                  opacity: 0;
              }
        }
    </style>
</head>
<body>
    <div id="spinner"></div>
</body>
</html>

 

两个圆圈交替闪烁：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            margin: 200px auto;
            width: 100px;
            height: 100px;
            border-radius: 100%;
            background-color: dodgerblue;
            position: fixed;
        }
        #a1{
            animation: onea 2s infinite ease-in;
            -moz-animation: onea 2s infinite ease-in;
            opacity: 0.6;
        }
        @keyframes onea {
            0%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
        @-moz-keyframes onea {
            0%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
        #a2{
            animation: twoa 2s infinite ease-in;
            animation-delay: -1s;
            opacity: 0.6;
        }
        @keyframes twoa {
            0%, 100% {
                transform: scale(0.0);
                -webkit-transform: scale(0.0);
            }
            50% {
                transform: scale(1.0);
                -webkit-transform: scale(1.0);
            }
        }
    </style>
</head>

<body>
    <div id="a1"></div>
    <div id="a2"></div>
</body>
</html>

 

posted @ 2015-10-25 10:51  Jaelyn  阅读(144)  评论(0)    收藏  举报