年后第一次周报

CSS3新特性

滤镜filter

将模糊或颜色偏移等图形效果应用于元素.

filter: 函数();

blur(): 模糊处理, 数值越大越模糊.

calc函数

calc(): 在声明css属性值时执行一些计算.

括号里面可以使用 + - * / 来进行计算.

过渡

我们可以在不使用flash动画或js的情况下,当元素从一种样式变换为另一种样式时为元素添加效果.

过渡动画: 是从一个状态渐渐过渡到另一个状态.

经常和hover一起搭配使用.

transition: 要过渡的属性 花费时间 运动曲线 何时开始;

1. 属性: 想要变化的css属性, 宽高 / 背景颜色 / 内外边距都可以. 如果想要所有的属性都变化过渡, 写一个all就可以.

2. 花费时间: 单位是秒(必须写单位), 比如0.5s.

3. 运动曲线: 默认是ease(可以省略).

4. 何时开始: 单位是秒(必须写单位), 可以设置延迟触发时间, 默认是0s(可以省略).

2D转换

转换可以实现元素的位移 / 旋转 / 缩放等效果

• 移动: translate
• 旋转: rotate
• 缩放: scale

2D转换是改变标签在二维平面上的位置和形状的一种技术.

移动

2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位.

语法:

transform: translate(x,y);或者分开写
transform: translateX(n);
transform: translateY(n);

• 定义2D转换中的移动, 沿着X和Y轴移动的元素
• translate最大的优点: 不会影响到其他元素的位置
• translate中的百分比单位是相对于自身元素的 translate:(50%,50%);
• 对行内标签没有效果

让一个盒子水平垂直居中:

div{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

旋转

2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转.

语法:

transform: rotate(度数);

• rotate里面跟度数, 单位是deg, 比如rotate(45deg)
• 角度为正时, 顺时针, 负时, 为逆时针
• 默认旋转的中心点是元素的中心点

三角下拉键:

div::after{
    content: "";
    width: 15px;
    height: 15px;
    border-right: 1px solid #000;
    border-bottom: 1px solid #000;
    transform: rotate(45deg);
}

转换中心点: transform-origin

语法:

transform-origin: x y;

• 注意后面的参数x和y用空格隔开
• x y默认旋转中心点是元素的中心点
• 还可以给x y设置像素或者方位名词

缩放

可以控制盒子的放大缩小.

语法:

transform: scale(x,y);

• 注意其中的x和y用逗号分隔
• transform: scale(1,1): 宽和高都放大一倍,相对于没有放大.
• transform: scale(2,2); 宽和高都放大两倍.
• transform: scale(2); 只写一个参数, 第二个参数则和第一个参数一样, 相对于scale(2,2)
• transform: scale(0.5,0.5); 缩小一半.
• scale缩放最大的优势: 可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子

综合写法

1. 同时使用多个转换, 其格式为: transform: translate() rotate() scale()…;等.
2. 其顺序会影响转换的效果.(先旋转会改变坐标轴方向)
3. 当我们同时有位移和其他属性时, 记得要将位移放到最前.

动画

可以通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果.

相比较过渡, 动画可以实现更多变化, 更多控制, 连续自动播放等效果.

制作动画:

1. 先定义动画

用keyframes定义动画(类似定义类选择器)

@keyframes 动画名称{
    0% {
        width: 100px;
    }
    100% {
        width: 200px;
    }
}

1. 可以做多个状态的变化
2. 里面的百分比要是整数
3. 里面的百分比就是总的时间的划分

动画序列:

• 0%是动画的开始, 100%是动画的完成. 这样的规则就是动画序列.
• 在@keyframes中规定某项CSS样式, 就能创建由当前样式逐渐改为新样式的动画效果.
• 动画是使元素从一种样式逐渐变化为另一种样式的效果. 您可以改变任意多的样式任意多的次数.
• 请用百分比来规定变化发生的时间, 或用关键词"from"和"to", 等同于0%和100%.

2. 在使用(调用)动画

div{
    /* 调用动画 */
    animation-name: 动画名称;
    /* 持续时间 */
    animation-duration: 持续时间;
}

属性	描述
@keyframes	规定动画
animation	所有动画属性的简写属性, 除了animation-play-state属性.
animation-name	规定@keyframes动画的名称.(必须有)
animation-duration	规定动画完成一个周期所花费的秒或毫秒, 默认是0.(必须有)
animation-timing-function	规定动画的速度曲线, 默认是"ease".
animation-delay	规定动画何时开始, 默认是0.
animation-iteration-count	规定动画被播放的次数,默认是1, 还有infinite
animation-direction	规定动画是否在下一周期逆向播放, 默认是"normal", alternate逆播放.
animation-play-state	规定动画是否正在运行或暂停. 默认是"running", 还有"pause".
animation-fill-mode	规定动画结束后的状态, 保持forwards回到起始backwards

简写属性: animation: 动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;

速度曲线:

值	描述
linear	动画从头到尾的速度是相同的. 匀速.
ease	默认. 动画以低速开始, 然后加快, 在结束前变慢.
ease-in	动画以低速开始.
ease-out	动画以低速结束.
ease-in-out	动画以低速开始和结束.
steps()	制定了时间函数中的间隔数量(步长)

3D转换

x轴右为正, y轴下为正, z轴外为正.

3D移动 translate3d

在2D移动的基础上多加了一个可以移动的方向, 就是z轴方向.

transform: translateZ(100px); (一般用px单位)
transform: translate3d(x,y,z);

xyz不能省略, 没有就写0.

透视 perspective

在2D平面产生近大远小视觉立体, 但是只是效果二维的.

• 如果想要在网页产生3D效果需要透视(理解成3D物体投影在2D平面内).
• 模拟人类的视觉位置, 可认为安排一只眼睛去看.
• 透视我们也成为视距: 视距就是人的眼睛到屏幕的距离.
• 距离视觉点越近的在电脑平面成像越大, 越远成像越小.
• 透视的单位是像素

透视要写到被观察元素的父盒子上面

perspective: 100px;

3d旋转 rotate3d

3D旋转指可以让元素在三维平面内沿着x轴, y轴, z轴或者自定义轴进行旋转.

语法:

transform: rotateX(45deg);
transform: rotateY(45deg);
transform: rotateZ(45deg);
transform: rotate3d(x,y,z,deg);

左手准则:

(rotateX)

• 左手的手拇指指向x轴的正方向
• 其余手指的弯曲方向就是该元素沿着x轴旋转的方向(正值)

(rotateY)

• 左手的手拇指指向y轴的正方向
• 其余手指的弯曲方向就是该元素沿着y轴旋转的方向(正值)

3D呈现 transform-style

• 控制子元素是否开启三维立体环境
• transform-style: flat; 子元素不开启3d立体空间 默认的
• transform-style: preserve-3d; 子元素开启立体空间
• 代码写给父级, 但是影响的是子盒子