一&＃xff0e;transform
CSS3 提供了元素变形效果&＃xff0c;也叫做变换。它可以将元素实现旋转、缩放和平移的功能。属性有两个&＃xff1a;transform 和 transform-origin。
对于 transform 的属性值&＃xff0c;具体如下表&＃xff1a;
//向水平和垂直各移动 200 像素&＃xff0c;也可以使用百分比
transform: translate(200px,200px);
//向水平平移 200 像素&＃xff0c;不加后面的 0 也可以
transform: translate(200px,0); transform: translateX(200px);
//向垂直平移 200 像素
transform: translate(0,200px); transform: translateY(200px);
//水平、垂直方向放大 1.5 倍transform: scale(1.5); transform: scale(1.5,1.5);
//水平、垂直方向缩小 0.8 倍
transform: scale(0.8,0.8);
//水平方向放大 1.5 倍
transform: scaleX(1.5);
//垂直方向放大 1.5 倍
transform: scaleY(1.5);
//旋转元素&＃xff0c;0 ~ 360 度之间&＃xff0c;负值均可
transform: rotate(-45deg);
//倾斜元素&＃xff0c;0 ~ 360 度之间&＃xff0c;负值均可
transform: skew(45deg, 20deg);
//水平倾斜元素&＃xff0c;0 ~ 360 度之间&＃xff0c;负值均可
transform: skewX(45deg);
//垂直倾斜元素&＃xff0c;0 ~ 360 度之间&＃xff0c;负值均可
transform: skewY(45deg);
//通过六个数值指定矩形&＃xff0c;其内部公式计算较为复杂&＃xff0c;请百度吧transform: matrix(1,0,0,1,30,30);
//不同的值可以累计&＃xff0c;通过空格分割transform: rotate(-45deg) scale(1.5);
二&＃xff0e;transform-origin
transform-origin 属性可以设置变换的起点。默认情况下&＃xff0c;使用元素的中心作为起点。具体设置方案参考如下表&＃xff1a;
这个属性是用来改变变形的基准点的&＃xff0c;默认是在元素的中心位置&＃xff0c;如果你改变了基准点。 它就会按照这个基准点进行变形。
//默认值&＃xff0c;以中心点变形
transform-origin: center center; transform-origin: 50% 50%;
//以左上角为基准点变形transform-origin: left top; transform-origin: 0px 0px;
三&＃xff0e;浏览器版本
CSS3 中的变形效果最低版本和需要前缀版本如下&＃xff1a;
//兼容完整版
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg); transform: rotate(45deg);
-webkit-transform-origin: left top;
-moz-transform-origin: left top;
-o-transform-origin: left top;
-ms-transform-origin: left top; transform-origin: left top;
四.3D 变形简介
由于 3D 是立体三维&＃xff0c;在 x、y 轴的基础上一般会多出一个 z 轴&＃xff0c;深入跃出轴。以下是
3D 变形的属性值表&＃xff0c;如下&＃xff1a;
3D 变形比 2D 变形出来的要晚一些&＃xff0c;所以如果需要兼容旧版本浏览器&＃xff0c;可以对照这个表。具体如下&＃xff1a;
//兼容版本完×××式
-webkit-transform: translateZ(200px);
-moz-transform: translateZ(200px);
-o-transform: translateZ(200px);
-ms-transform: translateZ(200px); transform: translateZ(200px);
transform-style
transform-style 属性是指定嵌套元素如何在 3D 空间中呈现。
//一般设置到当前元素的父元素transform-style: preserve-3d;
需要再配合后面的功能属性和变形配置&＃xff0c;才能看到效果。同样&＃xff0c;这个属性也需要加上各 种厂商前缀。
perspective
perspective 是 3D 变形的重要属性&＃xff0c;该属性会设置查看者的位置&＃xff0c;并将可视内容映射到一个视锥上&＃xff0c;继而投放到一个 2D 平面上。
//设置查看者的距离位置&＃xff0c;一般设置在元素的父元素上perspective: 1000px;
需要再配合后面的功能属性和变形配置&＃xff0c;才能看到效果。同样&＃xff0c;这个属性也需要加上各 种厂商前缀。
3D 变形属性
我们运用前面 3D 功能属性 transform-style 和 perspective 来构建 3D 变形效果。
1.translate3d(x,y,z)
//需要 3D 位移的 HTML 结构&＃xff0c;必须有父元素包含
//CSS 部分&＃xff0c;父元素设置 3D 呈现且设置透视距离
#a {
perspective: 1000px; transform-style: preserve-3d;
}
img {
//z 轴可以是负值
transform: translate3d(300px,100px,240px);
}
2.translateZ(z)
//可以单独设置 z 轴&＃xff0c;z 轴可以是负值
img {
transform: translateZ(240px);
}
3.scale3d(x,y,z)
//3D 缩放&＃xff0c;单独设置无效&＃xff0c;需要配合角度
img {
transform: scale3d(1,1,1.5) rotateX(45deg);
}
4.scaleZ(z)
//单独设置 z 轴&＃xff0c;x 和 y 轴默认为 1 img {
transform: scaleZ(1.5) rotateX(45deg);
}
5.rotate3d(x,y,z,a)
//设置 3D 旋转&＃xff0c;a 表示角度&＃xff0c;xyz 是 0 或 1 之间的数值
transform: rotate3d(1,0,0,45deg);
6.rotateX(a)、rotateY(a)、rotateZ(a)
// 单 独 设 置 3D 旋 转 transform: rotateX(45deg); transform: rotateY(45deg); transform: rotateZ(45deg);
transform: rotateX(45deg) rotateY(45deg) rotateZ(45deg);
最后一个 matrix3d 就不多说了&＃xff0c;忽略。
CSS3 还提供了 perspective-origin 属性来设置 3D 变形中的源点角度。该属性默认值为 50% 50%也就是 center center。
//源点设置为右上方变形perspective-origin: top right;
CSS3 还提供了一个在元素中设置透视的值 perspective(长度值)&＃xff0c;但它还是和在父元素设置有一定不同。因为父元素整个作为透视&＃xff0c;而元素自己作为透视&＃xff0c;导致不同。
//具体测试看透视的距离img {
transform: perspective(1000px) rotateY(45deg);
}
过渡简介
过渡效果一般是通过一些简单的 CSS 动作触发平滑过渡功能&＃xff0c;比如&＃xff1a;:hover、:focus、
:active、:checked 等。CSS3 提供了 transition 属性来实现这个过渡功能&＃xff0c;主要属性如下表&＃xff1a;
我们先创建一个没有过渡效果的元素&＃xff0c;然后通过:hover 来触发它。在没有任何过渡效果的触发&＃xff0c;会立即生硬的执行触发。
//设置元素样式div {
width: 200px; height: 200px;
background-color: white; border:1px solid green;
}
//鼠标悬停后背景变黑&＃xff0c;文字变白div:hover {
background-color: black; color: white;
margin-left: 50px;
}
transition-property
首先&＃xff0c;设置过渡的第一个属性就是指定过渡的属性。同样&＃xff0c;你需要指定你要过渡某个元 素的两套样式用于用户和页面的交互。那么就使用 transition-property 属性&＃xff0c;详细属性值如下表&＃xff1a;
从上门的列表中来看&＃xff0c;一般来说&＃xff0c;none 用于本身有过渡样式从而取消。而 all&＃xff0c;则是支持所有 transition-property 样式&＃xff0c;还有一种是指定 transition-property 中的某些样式。那么 transition-proerty 支持的样式有哪些&＃xff1f;如下表所示&＃xff1a;
//设置背景和文字颜色采用过渡效果
transition-property: background-color, color, margin-left;
transition-duration
如果单纯设置过渡的样式&＃xff0c;还不能够立刻实现效果。必须加上过渡所需的时间&＃xff0c;因为默 认情况下过渡时间为 0。
//设置过渡时间为 1 秒钟&＃xff0c;如果是半秒钟可以设置为.5s transition-duration: 1s;
transition-timing-function
当过渡效果运行时&＃xff0c;比如产生缓动效果。默认情况下的缓动是&＃xff1a;元素样式从初始状态过 渡到终止状态时速度由快到慢&＃xff0c;逐渐变慢&＃xff0c;即 ease。也是默认值&＃xff0c;其他几种缓动方式如下表所示&＃xff1a;
//恒定速度
transition-timing-function: linear;
以上五种都是设定好的属性值&＃xff0c;我们也可以自定义这个缓动。使用 cubic-bezier()
属性值&＃xff0c;里面传递四个参数 p0,p1,p2,p3&＃xff0c;值在 0~1 之间。
//自定义缓动
transition-timing-function: cubic-bezier(0.25, 0.67, 0.11, 0.55);
至于具体这些数值干什么的&＃xff0c;怎么才可以精确得到相关的信息&＃xff0c;这个要了解计算机图形 学中的三次贝塞尔曲线的相关知识&＃xff0c;类似与 photoshop 中的曲线调色。这里我们忽略。
还有一种不是平滑过渡&＃xff0c;是跳跃式过渡&＃xff0c;属性值为&＃xff1a;steps(n,type)。第一个值是一 个数值&＃xff0c;表示跳跃几次。第二个值是 start 或者 end&＃xff0c;可选值。表示开始时跳跃&＃xff0c;还是结束时跳跃。
//跳跃 10 次至结束
transition-timing-function: steps(10,end);
transition-delay
这个属性可以设置一个过渡延迟效果&＃xff0c;就是效果在设置的延迟时间后再执行。使用
transition-delay 属性值。如果有多个样式效果&＃xff0c;可以设置多个延迟时间&＃xff0c;以空格隔开。
//设置延迟效果
transition-delay: 0s, 1s, 0s;
简写和版本
我可以直接使用 transition 来简写&＃xff0c;有两种形式的简写。第一种是&＃xff0c;每个样式单独声明&＃xff1b;第二种是不去考虑样式&＃xff0c;即使用 all 全部声明。
//单独声明
transition: background-color 1s ease 0s, color 1s ease 0s, margin-left 1s ease 0s;
//如果每个样式都是统一的&＃xff0c;直接使用 all transition: all 1s ease 0s;
为了兼容旧版本&＃xff0c;需要加上相应的浏览器前缀&＃xff0c;版本信息如下表&＃xff1a;
//兼容完整版
-webkit-transition: all 1s ease 0s;
-moz-transition: all 1s ease 0s;
-o-transition: all 1s ease 0s;
-ms-transition: all 1s ease 0s; transition: all 1s ease 0s;
动画简介
CSS3 提供了类似 Flash 关键帧控制的动画效果&＃xff0c;通过 animation 属性实现。那么之前的 transition 属性只能通过指定属性的初始状态和结束状态来实现动画效果&＃xff0c;有一定的局限性。
animation 实现动画效果主要由两个部分组成&＃xff1a;
1.通过类似 Flash 动画中的关键帧声明一个动画&＃xff1b;
2.在 animation 属性中调用关键帧声明的动画。
CSS3 提供的 animation 是一个复合属性&＃xff0c;它包含了很多子属性。如下表所示&＃xff1a;
除了这 9 个属性之外&＃xff0c;动画效果还有一个重要的属性&＃xff0c;就是关键帧属性&＃xff1a;&＃64;keyframes。它的作用是声明一个动画&＃xff0c;然后在 animation 调用关键帧声明的动画。
//基本格式&＃xff0c;“name”可自定义&＃64;keyframes name {
/.../
}
属性详解
在讲解动画属性之前&＃xff0c;先创建一个基本的样式。
//一个 div 元素
我是 HTML5
//设置 CSS div {
width: 200px; height: 200px;
background-color: white; border: 1px solid green;
}
1.&＃64;keyframes
//创建动画的第一步&＃xff0c;先声明一个动画关键帧。&＃64;keyframes myani {
0% {
background-color: white; margin-left:0px;
}
50% {
background-color: black; margin-left:100px;
}
100% {
background-color: white; margin-left:0px;
}
}
//或者重复的&＃xff0c;可以并列写在一起&＃64;keyframes myani {
0%, 100% {
background-color: white; margin-left:0px;
}
50% {
background-color: black; margin-left:100px;
}
}
2.animation-name
//调用&＃64;keyframes 动画
animation-name: myani;
3.animation-duration
//设置动画播放的时间animation-duration: 1s;
当然&＃xff0c;以上通过关键帧的方式&＃xff0c;这里插入了三个关键帧。0%设置了白色和左偏移为 0&＃xff0c; 和初始状态一致&＃xff0c;表明从这个地方开始动画。50%设置了黑色&＃xff0c;左偏移 100px。而 100%则是最后一个设置&＃xff0c;又回到了白色和左偏移为 0。整个动画就一目了然了。
而对于关键帧的用法&＃xff0c;大部分用百分比比较容易控制&＃xff0c;当然&＃xff0c;还有其他一些控制方法。
//从什么状态过渡到什么状态&＃64;keyframes myani {
from {
background-color: white; margin-left:0px;
}
to {
background-color: black; margin-left:100px;
}
}
4.animation-timing-function
//设置缓动
animation-timing-function: ease-in;
3.animation-delay
//设置延迟时间animation-delay: 1s;
4.animation-iteration-count
//设置循环次数
animation-iteration-count: infinite;
5.animation-direction
//设置缓动方向交替
animation-direction: alternate;
6.animation-play-state
//设置停止播放动画
animation-play-state: paused;
7.animation-fill-mode
//设置结束后不在返回
animation-fill-mode: forwards;
//both 需要结合&＃xff0c;次数和播放方向animation-iteration-count: 4; animation-direction: alternate;
简写和版本
//简写形式完整版
animation: myani 1s ease 2 alternate 0s both;
为了兼容旧版本&＃xff0c;需要加上相应的浏览器前缀&＃xff0c;版本信息如下表&＃xff1a;
//兼容完整版&＃xff0c;Opera 在这个属性上加入 webkit&＃xff0c;所以没有-o-
-webkit-animation: myani 1s ease 2 alternate 0s both;
-moz-animation: myani 1s ease 2 alternate 0s both;
-ms-animation: myani 1s ease 2 alternate 0s both; transition: all 1s ease 0s;
//&＃64;keyframes 也需要加上前缀
&＃64;-webkit-keyframes myani {...} &＃64;-moz-keyframes myani {...}
&＃64;-o-keyframes myani {...} &＃64;-ms-keyframes myani {...} keyframes myani {...}
京公网安备 11010802041100号