码迷,mamicode.com
首页 > Web开发 > 详细

关于CSS3

时间:2019-03-18 21:12:48      阅读:241      评论:0      收藏:0      [点我收藏+]

标签:一个   高度   ase   空间   spec   默认   曲线   前缀   持续时间   

浏览器内核

谷歌  Webkit     火狐  Gecko    IE  Trident

国内的浏览器内核都是Webkit

CSS3的兼容性

CSS3针对同一样式在不同浏览器的兼容,需要在样式的属性上加内核前缀

谷歌  -webkit-transtion:

Opear  -o-transtion:

Firefox  -moz-transtion:

IE  -ms-transtion:

CSS3中的过渡属性 transition

transition 简写属性,用于在一个属性中设置四个过渡属性

eg:transition:width  2s  linear  1s;

transition-property   规定应用过渡的css属性名称

transition-duration   定义过渡效果花费的事件,默认时间是0

transition-timing-function  规定过渡效果的时间曲线,默认是‘ease‘

transition-delay   规定过渡效果何时开始,默认是0

注意:时间一定要带单位

CSS3动画  animate

挡在@Keyframes创建动画,把它绑定到一个选择器,否则动画不会有任何效果

(1)规定动画的名称

(2)规定动画的时长

注意:如果省略持续时间,动画将无法运行,因为默认值是0

 1 div{
 2         width: 100px;
 3         height: 100px;
 4         background: red;
 5         animate: move  5s;
 6 }
 7 @Keyframes   move{
 8         from{
 9             background:red;
10        }
11       to{
12             background:pink;
13      }
14 }
15 
16     

CSS3动画的属性

animate   所有动画的简写属性,除了animate-play-state属性

@Keyframes  规定动画

animate-name  规定@Keyframe动画的名称

animate-duration  规定动画完成一个周期所花费的秒或毫秒,默认是0

animate-timing-function  规定动画的速度曲线,默认是"ease"

animate-fill-mode  规定当动画不播放时,要应用到的元素的样式

animate-delay  规定动画何时开始,默认是0

animate-iteration-count  规定动画被插入的次数,默认是1

animate-direction  规定动画是否在同一周期逆向播放,默认是"normal"

animate-plat-state  规定动画是否正在运行或暂停,默认是"running"

2D、3D转换属性

transfrom  向元素应用2D或3D转换

transform-orgin  允许你改变被转换元素的位置

transform-style  规定被嵌套元素如何在3D空间中显示

值:flat  表示所有子元素在2D平面呈现

  preserve-3d  表示所有子元素在3D空间中显示

perspective  规定了3D元素的透视效果

perspective-origin  规定了3D元素底部的位置

perspective-visibility  定义元素在不面对屏幕时是否出现

2D转换方法

matrix(n1,n2,n3,n4,n5,n6)  定义2D转换,使用六个值得矩阵

translate(x,y)  定义2D转换,沿着x和y轴移动的元素

translateX(x)  定义 2D转换,沿着x轴移动

translateY(y)定义2D转换,沿着y轴移动

scale(x,y)定义2D缩放转换,改变元素的宽度和高度

scaleX(n)  定义2D缩放转换,改变元素的宽度

scaleY(n)   定义2D缩放转换,改变元素的高度

rotate(angle)  定义2D转换,在参数中规定角度

skew(x-angle,y-angle)  定义2D倾斜转换,沿着x轴和y轴

skewX(x) 定义2D的倾斜转换,沿着x轴

skewY(y)  定义2D的倾斜转换,沿着y轴

3D转换方法

matrix(n1,n2,n3,n4,n5,n6......n16)  定义3D转换,使用十六个值得4*4的矩阵

rotate3d(x,y,z,angle)定义3D旋转

rotateX(x) 围绕其在一个给定度数x轴旋转的元素

rotateY(y) 围绕其在一个给定度数y轴旋转的元素

rotateZ(z) 围绕其在一个给定度数z轴旋转的元素

translate3d(x,y,z)  定义3D转换

translateX(x)   定义3D转换,仅使用于x轴的值

translateY(y)   定义3D转换,仅使用于y轴的值

translateZ(z)   定义3D转换,仅使用于在z轴的值

scale3d(x,y,z) 定义3D缩放旋转

scaleX(x)定义3D缩放旋转,通过给定一个x轴的值

scaleY(y)定义3D缩放旋转,通过给定一个y轴的值

scaleZ(z)定义3D缩放旋转,通过给定一个z轴的值

perspective(n)  定义3D转换元素的透视视图

 

关于CSS3

标签:一个   高度   ase   空间   spec   默认   曲线   前缀   持续时间   

原文地址:https://www.cnblogs.com/panghexin/p/10554905.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!