CSS笔记（动画属性以及counter-reset属性）

1 transform属性（IE10）

transform属性允许对元素设置旋转，倾斜，缩放移动等样式。
当前版本的chrome，safari，Firefox，Opera以及IE10都支持transform属性，但为了以防低版本的兼容问题，最好还是加上浏览器前缀

-ms-transform：IE9 支持加了前缀的tranform属性，然而只适用2D转换

1.1 属性值

属性值的使用及种类如transform:transformX(x)，具体可以看这里，现列几个个人认为经常用到的
2D：

  • rotate(angle)：旋转，单位是deg
  • translate(x,y)，translateX(x)，translateY(x)：位置移动
  • scale(x,y)，scaleX(x)，scaleY(x)：2D缩放，x与y表示横纵坐标缩放的倍数

3D：

  • rotateX(angle)：元素的中心线沿着X轴旋转（可以借此制作一些点击有回弹的圆形按钮）
  • rotateY(angle)：元素的中心线沿着Y轴旋转
  • rotateZ(angle)：沿着Z轴旋转，如同2D中rotate

2 transition属性（IE10）

transition属性，具体就是检测一个css属性值（也可以指定多个或检测全部），然后当该属性发生变化，无论是通过:hover伪类选择器还是通过JavaScript实现的样式变化，该样式的变化过程都会呈现出动画般的效果。
IE**10**、Firefox、Opera 和 Chrome 支持transition-property属性，而Safari 则需要加上前缀-webkit-

2.1 属性值

transition的语法为：

transition:property,time,speed,delay

其中

  • property：表示检测的CSS属性值，可以定义all；若想要定义多个，则需要定义transition-property属性了，定义的多个CSS属性以逗号隔开。另外，在定义检测的CSS属性值之前，要确保该CSS属性值已经定义了，否则无效
  • time：定义过渡时间
  • speed：定义速度，如：
    • linear：相同速度开始至结束
    • ease：慢速开始，然后变快，然后慢速结束
    • ease-in-out：以慢速开始和慢速结束
    • 还有ease-in，ease-out
  • delay：定义多久后开始

3 @keyframes 规则与 animate 属性（IE10）

3.1 @keyframes 规则

如需在 CSS3 中创建动画，则需要了解@keyframes 规则。
语法：

@keyframes animationname {
    keyframes-selector {css-style;}
}

在一些旧版本中，还需要添加前缀，如 @-moz-keyframes，@-webkit-keyframes，

  • animationname 表示该动画名称，用于需在定义动画元素中定义
  • keyframes-selector 表示动画时长百分比，主要的属性值有：
    • 0% 至 100%
    • from 等同于0%
    • to 等同于100%

3.2 animation 属性

定义好 @keyframes 后，然后要在需要绑定动画效果的元素上定义 animation 属性，animation 属性是一个简写属性，用于设置六个动画属性：

  • animation-name ：绑定 @keyframes 的名称，必须定义
  • animation-duration ：定义持续时间，带单位s，必须定义
  • animation-timing-function：动画速度曲线
  • animation-delay：动画前的延迟，带单位s
  • animation-iteration-count：播放次数，属性值有数字以及infinite（循环）
  • animation-direction：动画结束后是否反向播发，属性值有normal以及alternate，定义该属性，animation-iteration-count 次数不能为1

注：以上所有属性，在比较老的版本需要定义前缀-moz-，-webkit-，-o-

3.2.1 animation-timing-function

  • linear：动画从头到尾的速度是相同的
  • ease：默认值，动画以低速开始，然后加快，在结束前变慢
  • ease-in：动画以低速开始
  • ease-out：动画以低速结束
  • ease-in-out：动画以低速开始和结束

4 counter-reset属性

counter-reset属性用于排序以达到类似有序列表的效果，使用方法是：

  • 先定义counter-reset属性，
  • 定义完counter-reset属性之后，定义需要计算元素的:before伪类中content属性，并添加上counter-increment属性

eg：

<!DOCTYPE html>
<html>
<head>
    <title>123</title>
    <style type="text/css">
        .abvc{
            counter-reset:section 2;/* 后面的数字2表示从什么数字开始 */

        }
        .test/* 可定义在.abvc h1或body等等 */
        {
            counter-reset:subsection;
        }
        h1:before
          {
          content:"Section " counter(section) ". ";/* content属性值可以拼接，只需用双引符以及空格隔开 */
          counter-increment:section;/* 序号加1 */
          }

        h2:before
          {
          counter-increment:subsection;/* 序号加1 */
          content:counter(section) "." counter(subsection) " ";
          }
    </style>
</head>
<body>
    <div class="test"></div>
    <div class="abvc">
        <h1>a</h1>
        <h1 id="stop">a</h1>
        <h1>a</h1>
        <h2>b</h2>
        <h2>b</h2>
        <h2>b</h2>
    </div>
</body>
</html>

注:

  • counter-reset属性只需在真正实现计算器的元素之前定义即可
  • :after伪类以及:before伪类中的content属性值可以使用字串符空格隔开的形式进行拼接，而且还可以提取该元素的一些属性值，如<a>元素，其content可以填写为content:'(' attr(href) ')';已提取<a>元素中的href的属性值
posted @ 2017-08-31 22:00  Seiei  阅读(290)  评论(0)  编辑  收藏  举报