轻源码

  • QingYuanMa.com
  • 全球最大的互联网技术和资源下载平台
搜索
轻源码 门户 前端设计 查看主题

CSS3动画基本的转换和过渡

发布者: ktke | 发布时间: 2017-12-29 14:49| 查看数: 4549| 评论数: 1|帖子模式

常用动画属性:

transform:translate(x,y);//平移,x代表向又移动距离,y代表向下移动距离;

transform:scale(x,y);//缩放,x代表水平缩放倍数,y代表垂直缩放倍数; 

transform:rotate(x);//旋转,x代表顺时针旋转多少度,如rotate(10deg) ;

transform:skew(x,y);//倾斜,x\y分别代表沿x轴和y轴的倾斜 动画过渡。

transition-property列出元素应该过渡的CSS属性,可过度属性包括背景、边框和方框模型属性: 

transition-duration设置过渡持续时间 

transition-timing-function设置过渡的速度,可用ease、linear、ease-in、ease-out或ease-in-out之一

transition-delay动画延时时间 

缩写形式:

#selector{transition:transform 0.2s ease} 

值的顺序必须为以下顺序: transition-property    transition-duration    transition-function    transition-delay 

实例展示:

424be90841874d398903623b6bd11a54.png

CSS代码: CSS3转换和过渡 图中黄线圈出来的是过渡部分代码,设置了1s内完成相应动画,绿框里面就是转换效果,表示鼠标移至h1标题上时,文字将扩大2.5倍。

true CSS3动画基本的转换和过渡 report 714.5 常用动画属性:transform:translate(x,y); 平移,x代表向又移动距离,y代表向下移动距离;transform:scale(x,y); 缩放,x代表水平缩放倍数,y代表垂直缩放倍数;transform:rotate(x); 旋转,x代表顺时针旋转多

最新评论

上帝视觉 发表于 2022-5-7 07:48
哪些网站可以下载源代码

轻源码让程序更轻更快

QingYuanMa.com

工作时间 周一至周六 8:00-17:30

侵权处理

客服QQ点击咨询

关注抖音号

定期抽VIP

Copyright © 2016-2021 https://www.qingyuanma.com/ 滇ICP备13200218号

快速回复 返回顶部 返回列表