css的动画效果

 

额外补充

移动元素的三种方法:

1.通过内外边距

2.通过定位

3.通过translate进行移动

过渡是:transiton

强制一行显示：

white-space:nowarp;

1.translate的使用

transform:tranlate(x,y); 
transform:tranlateX(n)
transform:tranlateY(n)

定义了2D转化的过程中 沿着XheY轴移动元素

优点:不会影响到其他的元素的位置

translate中的百分比是相对于自身元素的 tranlate(50%,50%)

对行内标签没有效果

使用:

1.京东上面 鼠标放在页面上之后 图片向上移动-5px位置

2.结合着定位可以实现盒子水平竖直居中

position:absolute;
top:50%;
left:50%;
tranform:translateX(-50%);
tranform:translateY(-50%);

这样写的好处 就是在宽度改变的时候 不需要改变其移动的距离

2.rotate旋转

transform:rotate(45deg)

角度的单位是deg 如果是正数就是顺时针旋转 如果是负数就是逆时针旋转

案例:设置一个三角 给盒子只加上两个边框 然后旋转45度就可以了

3.transform-origin的中心点

transform-origin:x y;

注意:x和y之间没有符号隔开

在不设置的情况下 x和y的使用是在50%和50%之间 元素的中心点

还可以给x,y设置像素或者方位名词 top left bottom right center

4. 缩放scale

transform:scale(1,2)

scale括号里面参数是倍数 中间用逗号隔开

优点:不会影响其他的盒子 而且可以设置缩放的中心点

 

5:动画的定义以及使用

//定义动画
@keyframes 动画名称{
    //开始状态
    0%{}
    //结束状态
    100%{}
}
//使用
div {
    animation-name:动画名称;
    animation-duration: 2s//持续时间 秒为单位
}

6.动画中的属性

animation-name    动画名称
animation-duration  动画执行的时间 以秒为单位 s
animation-timing-function  规定动画的速度曲线 
    linear 匀速
    ease  快慢快
    ease-in 以低速开始
    ease-out 以低速结束
    ease-in-out 以以低速开始和结束
    steps() 指定了时间函数中的间隔数量(步长)
animation-delay  规定动画什么时候开始 以秒为单位 s
animation-iteration-count 规定动画被播放的次数  默认是1次 还有infinity 指的是无限循环
animation-direction 规定动画逆向播放  默认是normal,alternate值的逆播放
animation-play-state 规定动画是否正在运行或暂停  默认是running paused
animation-fill-mode 规定动画结束之后的状态  保持结束的样式是forwards 原始的样式就是normal

7:使用多个动画的时候

直接在综合写法的后面 写就可以了 用逗号隔开

 

 

 

3D转换

1.移动translateX,Y,Z

tranform : translate(x,y,z)

注意:z的单位必须是px

x向右为正 向左为负

y向上为负 向下为正

z向前为正 向下为正

xyz不能省略 必须要写 不发生改变的是就写0

2.透视perspective

透视就是为了让网页具有3D效果 如果想让网页有这样的效果

perspective:100px

注意:透视需要加在父盒子上面 透视越小 显示的会越大

3.3D呈现transform-style: preserve-3d

控制子元素是否开启三维立体环境

transform:flat 子元素不开启3d立体空间

tranform-style:preserve-3d 子元素开启立体空间

代码写给父级 影响的是子盒子

  3d效果的实现思路:

　　　　通过子盒子旋转retate() 实现最开始的效果  然后通过改变父盒子的角度 也就是rotate() 实现最终的效果