CSS笔记(动画属性以及counter-reset属性)
来源:互联网 发布:上传淘宝店铺图片尺寸 编辑:程序博客网 时间:2024/05/22 15:48
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
的属性值
阅读全文
0 0
- CSS笔记(动画属性以及counter-reset属性)
- counter-reset属性和counter-increment属性
- css的counter-increment和counter-reset
- css定义有序列表样式以及counter-reset、counter-increment 的使用
- CSS动画属性性能
- CSS动画属性1
- css 笔记 --- css 属性
- css属性之帧动画属性(animation)
- css笔记(三)属性
- CSS content, counter-increment 和 counter-reset详解
- 属性动画小笔记
- CSS学习笔记-CSS属性(五)
- Android笔记----动画、属性动画
- css笔记-display属性
- css属性学习笔记
- Android属性动画学习笔记(一)
- Android属性动画学习笔记(一)
- Android属性动画学习笔记(一)
- POJ
- Linux 常用性能工具简介
- int型整数转换成字符串的C++实现
- Android开发艺术探索读书笔记-Activity
- 工作入门技巧整理
- CSS笔记(动画属性以及counter-reset属性)
- 分布式文件系统(HDFS)与linux系统文件系统关系
- Java之正则表达式来判断字符串中是否包含字母
- 解决远程连接mysql错误1130
- 碎片化阅读的危害
- 纯洁的买卖
- 数据库学习纪要(九):SQL Sever介绍-1
- 关于ScrollView 嵌套子节点问题
- MySQL简介及基本运用