css3新特性 过渡 动画 2d 3d转换

过渡

过渡三要素:

1.必须要有属性发生变化 如:width background等

2.必须要告诉系统哪个属性需要执行过渡效果:transition-property:width,background;

3.必须告诉系统过渡效果的持续时长:transition-duration:5s,5s;

transition-delay//告诉系统延迟多少秒才执行过渡效果

transition-timing-function://告诉系统在执行时的速度,见下图


过渡模块的连写:

transition:过渡属性 过渡时长 运动速度 延迟时间;

过渡连写的注意点:

1.和分开写一样,如果想给多个属性添加过渡效果添加逗号即可。

2.连写的时候,可以省略后面的两个参数,只要满足了前面2个参数,就一定会有过渡效果。

transition:all 5s;//所有的属性都要有过渡效果。


过渡模块--弹性效果

编写过渡的套路

1.不要管过渡,先编写基本页面

2.修改我们认为需要修改的属性

3.再回去给被修改属性的那个元素添加过渡即可


2D

transform

transform:rotate(50deg)

默认情况下所有的元素都是以自己的中心点作为参考来旋转的,我们可以通过形变中心点属性来修改它的参考点。

transform-origin:200px,0px;

第一个参数:水平方向

第二个参数:垂直方向

注意点:

取值有三种形式:具体像素,百分比,特殊关键字

transform:rotateZ(45deg);//默认情况下所有元素都是围绕着z轴进行旋转

transform:rotateX(45deg);//围绕x旋转

总结:想围绕哪个轴转,只需要在rotate加上哪个轴即可

perspective:500px;//1.透视:近大远小  2.一定要注意,透视属性必须添加到需要呈现近大远小效果的元素的父元素上面

transform:scale(1.5);//放大1.5倍


如何给盒子添加阴影

box-shadow:水平偏移 垂直偏移 模糊度 阴影扩展 阴影颜色 内外阴影;

//盒子的阴影分为内外阴影,默认情况下就是外阴影

//快速添加阴影只需要编写三个参数即可

box-shadow:水平偏移 垂直偏移 模糊度;

//默认情况下阴影的颜色和盒子内容的颜色一致


如何给文字添加阴影

text-shadow:水平偏移 垂直偏移 模糊度 阴影颜色;


动画:

过渡和动画的异同:

1.不同点

过渡必须人为的触发才会执行动画

动画不需要人为的触发就看看执行动画

2.相同点

过渡和动画都是用来给元素添加动画

过渡和动画都是系统新增的属性

过渡和动画都需要满足三要素才会有动画效果

动画



3D

transform-style:preserve-3d

translateZ(200px);//向外移动200px

//1.动画中如果有和默认样式同名的属性,会覆盖默认样式中同名的属性

//2.在编写动画的时候,固定不变的值写在前面,需要变化的值写在后面


背景相关

//背景尺寸属性是css3中新增的一个属性,专门用于设置图片大小

background-size:200px 100px;//第一个参数是宽度,第二个是高度


展开阅读全文

没有更多推荐了,返回首页