大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

使用CSS怎么实现变形、过渡与动画

这期内容当中小编将会给大家带来有关使用CSS怎么实现变形、过渡与动画,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。

成都创新互联公司是一家集网站建设,章贡企业网站建设,章贡品牌网站建设,网站定制,章贡网站建设报价,网络营销,网络优化,章贡网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

1、过渡 transition 

过渡属性用法: transition :ransition-property  transition-duration  transition-timing-function  transition-delay 

可以一起指定也可以分别单独指定

transition-property: 是要过渡的属性(如width,height),all是所有都改变。

transition-duration:花费的时间,单位为s或ms

transition-timing-function:是指定动画类型(运动区曲线),运动曲线有以下几种

ease=>逐渐慢下来(默认值) linear=>匀速 ease-in=>加速 ease-out=>减速 ease-in-out=>先加速在减速 

transition-delay 延迟时间,单位为s或ms





    
    
    
    Document
    



    

结果如下,当鼠标上上去后变化不再是瞬间完成,而是过渡完成。

使用CSS怎么实现变形、过渡与动画

2、变形 transform

 (1)、2D变形

(a)移动 translate(x,y)

移动可以指定像素值也可以指定百分比, 注意:指定百分比是自身大小的百分比,因此可以用于设置盒子定位时的居中对齐(在设置left:50%后再移动自身的-50%即可)。





    
    
    
    Document
    



    

使用CSS怎么实现变形、过渡与动画

点击之后盒子进行了移动。用于让定位的盒子居中的代码入下





    
    
    
    Document
    



    
        
    

结果为

使用CSS怎么实现变形、过渡与动画

(b)缩放 scale(x,y)

x,y设置大于1 是放大,小于1 是缩小。





    
    
    
    Document
    



    
    

使用CSS怎么实现变形、过渡与动画

(c)旋转 rotate(x deg)

x指定度数值,正数是顺时针旋转,负数是逆时针旋转。

旋转可以使用 transform-origin 指定旋转中心点,transform-origin 给left top right bottom 也可以指定具体的像素值。





    
    
    
    Document
    



    

使用CSS怎么实现变形、过渡与动画

(d)倾斜 skew(x deg ,y deg)

x,y分别指定倾斜在x,y方向上的角度,可以为负数。y值不写默认为0。





    
    
    
    Document
    



    

使用CSS怎么实现变形、过渡与动画

(2)3D变形

(a)旋转(rotateX,rotateY,rotateZ)

3D旋转与2D类似,只不过一个是基于二位坐标一个是基于三维坐标。三个值可以同时指定也可以单独指定。





    
    
    
    Document
    



    

使用CSS怎么实现变形、过渡与动画

(b)移动(translateX,translateY,translateZ)

3D移动对于xy方向上的移动与2d移动一致。只有z方向上的移动不一样。Z方向上的移动在现实生活中是距离变远,距离变近。因此在网页中显示结果是变近则变大,变远则变小。

要使Z放线上移动生效首先要设置perspective(眼睛距离屏幕的距离);





    
    
    
    Document
    



    
    

使用CSS怎么实现变形、过渡与动画

3、动画 animation

(1)、 animation: animation-name || animation-duration||  animation-timing-function || animation-delay || animation-iteration-count||  animation-direction||  animation-fill-mode;

animation-name:动画名称(自己使用@keyframes 定义的动画)

animation-duration:持续时间

animation-timing-function:运动曲线,与过渡的运动曲线类似。

animation-delay:延迟时间

animation-iteration-count:循环次数 (infinite 是无限循环)

animation-direction:是否反向(动画是否是由结尾倒开是倒着放的)

animation-fill-mode:设置在动画播放之外的状态(结束时的状态)none | forwards(设为结束时的状态)| backwards(设为开始时的状态)|both(设为开始或结束时的状态)

animation-play-state:设置动画状态 running 开始|paused 暂停

(2)、@keyframes 自定义动画

格式如下

@keyframes 动画名称 {
from{ 开始} 0%
to{ 结束 } 100%
}

可以用 from...to 来指定动画过程,也可以用0%~100%指定动画过程。





    
    
    
    Document
    



    

上述就是小编为大家分享的使用CSS怎么实现变形、过渡与动画了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注创新互联行业资讯频道。


文章名称:使用CSS怎么实现变形、过渡与动画
文章转载:http://dzwzjz.com/article/iecdgj.html

其他资讯

在线咨询
服务热线
服务热线:028-86922220
TOP