zoom
*zoom:1
用来给老版本ie浏览器(ie6/7)清除浮动由于缩小改变原来的空间尺寸,所以整个页面会重新渲染
zoom:50%
缩小到原来的一半zoom:0.5
等同 zoom:50%
,不能为负数zoom:normal
等同于 zoom:1
transform: scale(1)
w3c
规范 ie9以上都支持此属性可控制方向 transform:scale(x,y), transform:scalex(x) or transform:scaley(y)
支持 ie10以上 ie9 需加私有前缀 -ms-(ie) -webkit-(chrome,safari) -o-(opera)-moz- (firefox)
对目标对象进行歪斜变换 transform: skew()
transform: skew(x,y)
表示沿着 x轴和 y轴 扭曲角度 默认为0transform: skew(100deg,100deg)
transform: skew(10grad,10grad)
transform: skew(10rad,10rad)
transform: skew(0.25turn,1.2turn)
等比例缩放元素 transform: scale(1)
transform: rotate(x,y)
默认以目标对象中心为圆点转动
同 skew
transform: translate(x,y)
同 skew
支持ie10 以上
transition-property:height
height 就会参与过渡transition-duration:2s
指过渡持续 2ss (秒) ms(毫秒)
过渡开始作用之前需要等待的时间。 transition-delay:0.2s
等待0.2s 后执行过渡
s (秒) ms(毫秒)
指定动画运动时的节奏 transition-timing-function:ease
匀速运行
transition: height 0.3s ease;
支持ie10以上
由大小写不敏感的字母a-z、数字0-9、下划线(_)和/或横线(-)组成。第一个非横线字符必须是字母,数字不能在字母前面,不允许两个横线出现在开始位置。
.cylon_eye { -webkit-animation-name: resize; } @-webkit-keyframes resize { from { margin-left: -20%; } to { margin-left: 100%; } } @keyframes resize { from { margin-left: -20%; } to { margin-left: 100%; } }
-webkit-animation-duration: 1.5s;
-webkit-animation-iteration-count:4
-webkit-animation-direction: alternate;
alternate-reverse 动画第一次运行时是反向的,然后下一次是正向,后面依次循环。决定奇数次或偶数次的计数从1开始。
-webkit-animation-timing-function: ease-in-out;
每一个动画周期中执行的节奏,作用于一个关键帧周期而非整个动画周期
同 transition-timing-function
.cylon_eye { background-color: red; background-image: linear-gradient(to right, rgba(0, 0, 0, .9) 25%, rgba(0, 0, 0, .1) 50%, rgba(0, 0, 0, .9) 75%); color: white; height: 100%; width: 20%; /* 调用动画 指定对应 持续时间 运动时的节奏 延迟时间 循环次数 对应动画 */ -webkit-animation: 4s linear 0s infinite alternate move_eye; animation: 4s linear 0s infinite alternate move_eye; } /* 定义动画 */ @-webkit-keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } } @keyframes move_eye { from { margin-left: -20%; } to { margin-left: 100%; } }
如对本文有疑问,请在下面进行留言讨论,广大热心网友会与你互动!! 点击进行留言回复
css3 flex布局 justify-content:space-between 最后一行左对齐
网友评论