• CSS3特性 盒模型 动画


     

    CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果。

    一.Transitions

    语法:transitions: property duration timing-function

    • property: 表示对哪个属性进行平滑过渡(可设置为all,则所有属性值变化时均产生动画效果)
    • duration: 表示在多长时间内完成属性值的平滑过渡
    • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)

    样例代码:

    transitions: background-color 1s linear;

    可同时设置多个属性值:

    样例代码:

    transitions: background-color 1s linear, color 1s linear, width 1s linear;

    可同时设置所有属性值:

    样例代码:

    transitions: all 1s linear;

    二 .Animations

    语法:animations: name duration timing-function iteration-count;

    • name: 关键帧集合名(通过此名创建关键帧的集合,见下面样例代码)
    • duration: 表示在多长时间内完成属性值的平滑过渡
    • timing-function: 表示通过什么方法来进行平滑过渡(具体值下面详细介绍)
    • iteration-count: 迭代循环次数,可设置为具体数值,或者设置为infinite进行无限循环,默认为1

    样例代码:

    .box {
        background-color: red;
        -webkit-animation: mycolor 4s linear infinite;
     }
     @-webkit-keyframes mycolor {
         0% {
            background-color: red;
         }
         40% {
             background-color: darkblue;
         }
         70% {
            background-color: yellow;
         }
         100% {
            background-color: green;
         }
     }

     三.实现动画的方法

    • linear                      在动画开始时到结束时以同样的速度进行改变
    • ease-in                   动画开始时速度很慢,然后速度沿曲线值加速
    • ease-out                 动画开始时速度很快,然后速度沿曲线值减速
    • ease                        动画开始速度很慢,然后速度沿曲线值加速,然后再沿曲线值减速
    • ease-in-out            同ease

    注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

    本条目发布于2013年11月19日。属于CSS3分类,被贴了 标签。作者是

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转、缩放、倾斜、移动这四种类型的变形处理,本文将对此做详细介绍。

    一.旋转 rotate

    用法:transform: rotate(45deg);

    共一个参数“角度”,单位deg为度的意思,正数为顺时针旋转,负数为逆时针旋转,上述代码作用是顺时针旋转45度。

    二.缩放 scale

    用法:transform: scale(0.5)  或者  transform: scale(0.5, 2);

    参数表示缩放倍数;

    • 一个参数时:表示水平和垂直同时缩放该倍率
    • 两个参数时:第一个参数指定水平方向的缩放倍率,第二个参数指定垂直方向的缩放倍率。

    三.倾斜 skew

    用法:transform: skew(30deg)  或者 transform: skew(30deg, 30deg);

    参数表示倾斜角度,单位deg

    • 一个参数时:表示水平方向的倾斜角度;
    • 两个参数时:第一个参数表示水平方向的倾斜角度,第二个参数表示垂直方向的倾斜角度。

    关于skew倾斜角度的计算方式表面上看并不是那么直观,这里借鉴某大拿绘制的图举例说明一下:

    首先需要说明的是skew的默认原点transform-origin是这个物件的中心点

    skewX(30deg) 如下图:

    transform之skew 详解

    skewY(10deg) 如下图:

    transform详解之skewY

    skew(30deg, 10deg) 如下图:

    transform详解之skew

    我当初就是看到此图瞬间理解的。

    四.移动 translate

    用法:transform: translate(45px)  或者 transform: skew(45px, 150px);

    参数表示移动距离,单位px,

    • 一个参数时:表示水平方向的移动距离;
    • 两个参数时:第一个参数表示水平方向的移动距离,第二个参数表示垂直方向的移动距离。

    五.基准点 transform-origin

    在使用transform方法进行文字或图像的变形时,是以元素的中心点为基准点进行的。使用transform-origin属性,可以改变变形的基准点。

    用法:transform-origin: 10px 10px;

    共两个参数,表示相对左上角原点的距离,单位px,第一个参数表示相对左上角原点水平方向的距离,第二个参数表示相对左上角原点垂直方向的距离;

    两个参数除了可以设置为具体的像素值,其中第一个参数可以指定为left、center、right,第二个参数可以指定为top、center、bottom。

    六.多方法组合变形

    上面我们介绍了使用transform对元素进行旋转、缩放、倾斜、移动的方法,这里讲介绍综合使用这几个方法来对一个元素进行多重变形。

    用法:transform: rotate(45deg) scale(0.5) skew(30deg, 30deg) translate(100px, 100px);

    这四种变形方法顺序可以随意,但不同的顺序导致变形结果不同,原因是变形的顺序是从左到右依次进行,这个用法中的执行顺序为1.rotate  2.scalse  3.skew  4.translate

    注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

    本条目发布于2013年11月19日。属于CSS3分类,被贴了 标签。作者是

    CSS3属性border-image详解(边框图片)

    border-image一共有4项参数,本文将对这4项参数依次讲解及举例说明,为了方便理解,先介绍最常用的使用方式。

    语法:border-image: url(bbs0101.png) A B C D;  第一个参数url就是背景图片路径,不做过多解释,其次4个参数ABCD表示4个像素值,不需要带单位,默认为px,同时也可以设置为百分比,百分比是 针对背景图片计算的,比如图片宽100px,A=20%=100px*20%=20px,依次代表距离图片上边缘、右边缘、下边缘、左边缘的距离,如图所 示:

    border-image详解

    border-image详解

    当设置好ABCD四个值之后,相当于按照这4个值对图片切了4刀,形成一个九宫格,此时我们需要按照以下两步分析border-image的工作原理:

    1. 首先分离出left-top、right-top、left-bottom、right-bottom这四块图片分别对应放到盒子border的四个角上,同时按照盒子border四个角的尺寸进行缩放直至铺满
    2. 然后分离出每条边中间的区域即A、B、C、D所在的四个区域,分别放到盒子border的对应4个位置上,同时按照border对应区域的尺寸进行缩放直至铺满

    背景图如图所示:此图尺寸为90*90 中间所有小菱形等尺寸。

    源背景图片

    源背景图片

    样例代码:

    .box5 {
        border: 20px;
         60px;
        height: 60px;
        border-image: url(images/border-image.png) 30 30 30 30;
     }
    <div class="box5"></div>

    样例图片:

    border-image

    border-image

    此时可以说此种情况(border-image: url(bbs0101.png) A B C D;)的border-image已经完成渲染工作,不过这里的第二步中采用的是拉伸方式(默认方式:stretch)铺满边框,我们还可以手动设置成 repeat以按照平铺方式渲染,如下:

    语法:border-image: url(bbs0101.png) A B C D repeat repeat;

    样例代码:

    .box5 {
        border: 20px;
         60px;
        height: 60px;
        border-image: url(images/border-image.png) 30 30 30 30 repeat repeat;
     }
    <div class="box5"></div>

    样例图片:

    border-image:repeat

    border-image:repeat

    这段样式中总共写了2个repeat,第一个repeat定义上边(A区域)和下边(C区域)是否进行水平重复,第二个repeat定义左边(D区域)和右边(B区域)是否进行垂直重复,举例如下:

    样例代码:

    .box5 {
        border: 20px;
         60px;
        height: 60px;
        border-image: url(images/border-image.png) 30 30 30 30 repeat stretch;
     }

    样例图片:

    border-image

    border-image

    以上的样例中边框宽度是通过设置border:20;来完成的,这里需要声明一下,如果想使用border-image属性则border必须存在 且border-width必须要大于0,但是是不是只能border的尺寸来控制border-image的尺寸呢,我这么问当然就不是了,这里再介绍 border-image的最后一个参数W

    语法:border-image: url(bbs0101.png) A B C D/W repeat repeat;

    W为border-image各边框宽度,设置时需要带上单位px,即使设置了W,也不能设置border-width=0!

    样例代码:

    .box5 {
        border: 20px;
         60px;
        height: 60px;
        border-image: url(images/border-image.png) 30 30 30 30/W repeat stretch;
     }

    样例图片:从上到下依次为W=10px、W=20px、W=30px

    W=10px

    W=10px

    border-image

    W=20px

    W=30px

    W=30px

    以上已经将border-image的所有参数都讲解了一下,以下将对一些特殊情况以及一些小技巧进行一下举例说明:

    一.当只设置url一个属性的时候,A=C=图片height,B=D=图片width

    样例代码:

    .box5 {
     border: 20px;
      60px;
     height: 60px;
     border-image: url(images/border-image.png);
     }

    样例图片:

    border-image

    border-image

    二.当只设置一个切割尺寸P的时候,A=B=C=D=P

    样例代码:

    .box5 {
        border: 20px;
         60px;
        height: 60px;
        border-image: url(images/border-image.png) 30;
     }

    样例图片:

    border-image

    border-image

    三.当只设置一个重复方式的时候,表示四条边框重复方式相同

    样例代码:

    .box5 {
        border: 20px;
         60px;
        height: 60px;
        border-image: url(images/border-image.png) 30 repeat;
     }

    样例图片:

    border-image:repeat

    border-image:repeat.

    此外针对重复方式还有一个属性就是round,意思是平铺,据说和repeat是有区别的,但是目前没有浏览器体现出round和repeat的区别,所以暂不考虑round属性。

    注:浏览器支持性不做介绍,具体使用时请做具体测试,本人秉着早晚所有浏览器都会支持的态度写此文。

    一个小小的border-image属性,原本以为几句话可以说清楚,没想到写了满满一页还觉得说的不够详细,以后慢慢完善吧,今天实在是不想写了,如果有一定基础的你想必能看懂吧,O(∩_∩)O哈哈~

    本条目发布于2013年11月19日。属于CSS3分类,被贴了 标签。作者是

    CSS3属性:background-clip详解(设置背景图显示区域)

    背景图片默认显示区域包括border、padding、content区域,但是可以改变background-clip值设置显示区域不包括border区域或者只显示content区域。

    样例代码:

    .box1 {
        background-clip: border-box;  /* 默认 */
     }
     .box2 {
        background-clip: padding-box;
     }
     .box3 {
        background-clip: content-box;
     }

    样例图片:

    background-clip详解

    background-clip详解

    此时发现一个问题,设置了background-clip之后只是改变了背景图片显示区域,但是显示区域现实的图片并不是从图片左上角开始绘制的,如果想要让背景图片在显示区域从左上角开始显示则需要配合background-origin属性使用:

    样例代码:

    .box1 {
        background-clip: border-box;   /* 默认 */
        background-origin: border-box;
     }
     .box2 {
        background-clip: padding-box;
        background-origin: padding-box; /* 默认 */
     }
     .box3 {
        background-clip: content-box;
        background-origin: content-box;
     }

    样例图片:

    background-clip,background-origin

    background-clip,background-origin

    本条目发布于2013年11月18日。属于CSS3分类,被贴了 标签。作者是

    CSS3属性:background-origin详解(设置背景图绘制起始点)

    在绘制背景图片时,浏览器默认是从padding区域左上角开始绘制,但是可以利用background-origin属性来指定从border左上角开始绘制或者从content区域左上角开始绘制。

    样例代码:

    .box1 {
        background-origin: border-box;
     }
     .box2 {
        background-origin: padding-box; /* 默认 */
     }
     .box3 {
        background-origin: content-box;
     }

    样例图片:

    background-origin详解

    background-origin详解

  • 相关阅读:
    lsmod命令详解
    init命令详解
    runlevel 命令详解
    nohup命令详解
    nice和renice命令详解
    pstree命令详解
    ps命令详解
    crontab命令详解
    pkill命令详解
    killall命令详解
  • 原文地址:https://www.cnblogs.com/jintaostudy/p/5366631.html
Copyright © 2020-2023  润新知