CSS3新特性学习(2)

时间:2020-04-26
本文章向大家介绍CSS3新特性学习(2),主要包括CSS3新特性学习(2)使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.2D转换之移动translate(类似定位)

1.语法
transform:translate(x,y);
transform:translateX(n);
transform:translateY(n);
2.重点
1.定义2D转换中的移动沿着X和Y移动元素
2.translate最大的优点,不会影响到其他元素位置
3.translate中的百分比单位是相对于自身的translate:(50%,50%)
4.对行内元素没有效果

2.2D转换中心点transform-origin(我们可以设置元素转换的中心点)

1.语法
transform-origin:x y;
2.重点 
1.注意后面的参数x和y用空格隔开
2.x和y默认转换的中心点是元素的中心点(50% 50%)
3.还可以给x y设置像素或者方位名词(top bottom left right center)

3.2D转换之缩放scale(可以给元素放大缩小)

1.语法
transform:scale(x,y);
2.重点
1.注意其中的x y 用逗号分隔
2.transform:scale(2,2);宽和高放大了两倍
3.transform:scale(2);宽和高放大了两倍
4.transform:scale(0.5,0.5);缩小0.5倍
5.最大优势:可以设置转换中心点缩放,默认以中心点缩放的,而且不影响其他盒子。

4.2D转换综合性写法

注意:
同时使用多个转换,且格式为:transform:translate(),rotate(),scale()等
其顺序会影响转换的效果
当我们同时有位移和其他属性的时候,要把位移放到最前。

5.CSS3动画
5.1.动画的基本使用
制作动画的步骤
1.定义动画
2.调用动画
语法:用keyframed定义动画(类似定义类选择器)
@keyframes 动画名称{
0%{
width:100px;
}
100%{
width:200px;
}
调用:animation-name:动画名称;
animation-during:持续时间;

5.2动画属性
属性                              描述
@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 ,还有pasued
animation-fill-mode              规定动画结束后状态保持forwards,回到起始位置backwards

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

5.4速度曲线调节
值                          描述
linear                  动画从头到尾匀速
ease                    默认,动画以低速开始然后加快到结束变慢
ease-in                 动画以低速开始
ease-out                动画以低速结束
ease-in-out             动画以低速开始和结束
steps()                 指定函数中的间隔数量(步长)

原文地址:https://www.cnblogs.com/xing--/p/12776121.html