zoukankan      html  css  js  c++  java
  • css基础四

    过渡属性

    下面的表格列出了所有的转换属性:

    属性描述CSS
    transition 简写属性,用于在一个属性中设置四个过渡属性。 3
    transition-property 规定应用过渡的 CSS 属性的名称。 3
    transition-duration 定义过渡效果花费的时间。默认是 0。 3
    transition-timing-function 规定过渡效果的时间曲线。默认是 "ease"。 3
    transition-delay 规定过渡效果何时开始。默认是 0。 3
    div
    {
    transition: width 1s linear 2s;
    /* Firefox 4 */
    -moz-transition:width 1s linear 2s;
    /* Safari and Chrome */
    -webkit-transition:width 1s linear 2s;
    /* Opera */
    -o-transition:width 1s linear 2s;
    }

    下面的表格列出了 @keyframes 规则和所有动画属性:

    属性描述CSS
    @keyframes 规定动画。 3
    animation 所有动画属性的简写属性,除了 animation-play-state 属性。 3
    animation-name 规定 @keyframes 动画的名称。 3
    animation-duration 规定动画完成一个周期所花费的秒或毫秒。默认是 0。 3
    animation-timing-function 规定动画的速度曲线。默认是 "ease"。 3
    animation-delay 规定动画何时开始。默认是 0。 3
    animation-iteration-count 规定动画被播放的次数。默认是 1。 3
    animation-direction 规定动画是否在下一周期逆向地播放。默认是 "normal"。 3
    animation-play-state 规定动画是否正在运行或暂停。默认是 "running"。 3
    animation-fill-mode 规定对象动画时间之外的状态。 3
    div
    {
    animation: myfirst 5s linear 2s infinite alternate;
    /* Firefox: */
    -moz-animation: myfirst 5s linear 2s infinite alternate;
    /* Safari 和 Chrome: */
    -webkit-animation: myfirst 5s linear 2s infinite alternate;
    /* Opera: */
    -o-animation: myfirst 5s linear 2s infinite alternate;
    }
    @keyframes myfirst
    {
    from {background: red;}
    to {background: yellow;}
    }
    @keyframes myfirst
    {
    0%   {background: red;}
    25%  {background: yellow;}
    50%  {background: blue;}
    100% {background: green;}
    }

    语法

    box-sizing: content-box|border-box|inherit;
    描述
    content-box

    这是由 CSS2.1 规定的宽度高度行为。

    宽度和高度分别应用到元素的内容框。

    在宽度和高度之外绘制元素的内边距和边框。

    border-box

    为元素设定的宽度和高度决定了元素的边框盒。

    就是说,为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。

    通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

    inherit 规定应从父元素继承 box-sizing 属性的值。

    语法

    resize: none|both|horizontal|vertical;
    描述
    none 用户无法调整元素的尺寸。
    both 用户可调整元素的高度和宽度。
    horizontal 用户可调整元素的宽度。
    vertical 用户可调整元素的高度。

    语法

    outline-offset: length|inherit;
    描述
    length 轮廓与边框边缘的距离。
    inherit 规定应从父元素继承 outline-offset 属性的值。
  • 相关阅读:
    HTML5边玩边学
    全面理解javascript的caller,callee,call,apply概念
    什么是HTTP Headers?
    Jquery的$命名冲突:
    jQuery 核心 noConflict() 方法
    js 两个小括号 ()() 的用法
    前端工程师的编码遭遇战
    Canvas之图像与文字
    Internet Explorer 9.0 新功能介绍
    firebug1.7调试实用技巧指南—web前端开发七武器
  • 原文地址:https://www.cnblogs.com/airfand/p/10743930.html
Copyright © 2011-2022 走看看