zoukankan      html  css  js  c++  java
  • CSS:CSS3

    1 背景

    背景位置

    background-origin:指定了背景图像的位置区域

      border-box : 背景贴边框的边

      padding-box : 背景贴内边框的边

      content-box : 背景贴内容的边

    <style>
    div {
    background: url("img/1.jpg") no-repeat;
    width: 200px;
    height: 80px;
    margin: 20px;
    border: 10px dashed black;
    padding: 20px;
    }
    .a {
    background-origin: border-box;
    }
    .b {
    background-origin: padding-box;
    }
    .c {
    background-origin: content-box;
    }
    </style>
    <body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    </body>

    背景裁切

    background-clip:

      border-box 边框开切

      padding-box 内边距开切

      content-box 内容开切

    <style>
    div {
    width: 200px;
    height: 80px;
    border: 10px dashed red;
    background-color: darkcyan;
    margin: 20px;
    padding: 20px;
    }
    .a {
    background-clip: border-box;
    }
    .b {
    background-clip: padding-box;
    }
    .c {
    background-clip: content-box;
    }
    </style>
    <body>
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
    </body>

    背景大小

    background-size:

      cover 缩放成完全覆盖背景区域最小大小

      contain 缩放成完全适应背景区域最大大小

    <style>
    div {
    background: url("img/1.jpg") no-repeat;
    width: 200px;
    height: 100px;
    border: 2px solid red;
    margin: 20px;
    }
    .a {
    background-size: cover; /* 完全覆盖 */
    }
    .b {
    background-size: contain; /* 完全适应 */
    }
    </style>
    <body>
    <div class="a"></div>
    <div class="b"></div>
    </body>

    2 过渡动画

    过渡

    从一个状态到另一个状态,中间的“缓慢”过程;

    缺点是,控制不了中间某个时间点。

    transition{1 2 3 4}

      1:过渡或动画模拟的css属性

      2:完成过渡所使用的时间(2s内完成)

      3:过渡函数。。。

       4:过渡开始出现的延迟时间

      

    transition: width 2s ease 1s;

    目前,css3只开发出部分的过渡属性,下图所示:

    <style>
    div{
    width: 100px;
    height: 50px;
    border: 2px solid red;
    }
    .a{
    transition: width 2s linear 1s; /*1秒过后,div在2秒内匀速缓慢的变宽*/
    }
    div:hover{ width: 300px;} /*触发div变宽*/
    </style>
    <body>
    <div class="a">Hello,拉勾</div>
    </body>

    动画

    从一个状态到另一个状态,过程中每个时间点都可以控制。

      关键帧:@keyframes 动画帧 { from{} to{} } 或者{ 0%{} 20%{}... }

      动画属性:animation{ 1 , 2 , 3 , 4 , 5 }

        1:动画帧

        2:执行时间

        3:过渡函数

        4:动画执行的延迟(可省略)

        5:动画执行的次数

    需求1:一个 元素从左向右移动,3秒内执行2次

    <style>
    div{
    width: 700px;
    border: 1px solid red;
    }
    @keyframes x{
    from{ margin-left: 0px;}
    to{ margin-left: 550px;}
    }
    img{
    animation: x 3s linear 2;
    }
    </style>
    <body>
    <div>
    <img src="img/cat.gif">
    </div>
    </body>

    需求2:一个 元素从左向右移动,3秒内执行完成。无限次交替执行

    infinite:无限次

    alternate:来回执行(交替,一去一回)

    <style>
    .wai{
    width: 600px;
    height: 100px;
    border: 2px solid red;
    }
    .nei{
    width: 40px;
    height: 80px;
    margin: 5px;
    background: red;
    }
    .nei{
    animation: x 3s linear infinite alternate;
    }
    @keyframes x{
    0%{ margin-left: 0px; }
    25%{ background: yellowgreen; }
    50%{ background: goldenrod; }
    75%{ background: palevioletred;}
    100%{
    background: coral;
    margin-left: 550px;
    }
    }
    </style>
    <body>
    <div class="wai">
    <div class="nei"></div>
    </div>
    </body>

    3 CSS - 练习

     

     

     

     

  • 相关阅读:
    Gallery平滑移动
    HDU 4308 BFS Saving Princess claire_
    css 浏览器兼容性问题解决
    CCPlace,CCFlip*,CCToggleVisibility,CCMoveTo*,CCJumpTo*,CCScale*,CCRotate*,CCSkew*,fade,CCCardinalSp*
    存储过程和输出分辨率表菜单JSON格式字符串
    Vertica变化Local时间到GMT时间
    【codeforces】Codeforces Round #277 (Div. 2) 解读
    Android 百度地图 SDK v3.0.0 (四) 离线地图功能介绍
    计算质数-埃里克森筛法(间隔黄金武器)
    IP地址分类
  • 原文地址:https://www.cnblogs.com/JasperZhao/p/15124933.html
Copyright © 2011-2022 走看看