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
的属性值