css 平移到某个位置_CSS3平移动画效果

在这篇文章中主要是讲如何通过CSS3实现平移动画效果,在开始之前先给大家介绍一下与平移动画有关的CSS3属性以及相关的属性描述。

一、transition-property:是用来指定当元素其中一个属性改变时执行transition效果(例如:长度,宽度,颜色等)。

二、transition-duration:是用来指定元素转换过程的持续时间(通过设置元素转换过程持续的时间来实现动态效果,否则效果会变的很生硬)。

三、transition-timing-function:允许元素根据时间的推进去改变属性值的变换速率(例如:先快后慢,先慢后快,匀速变化等等)。

四、transition-delay:是用来指定一个动画开始执行的时间,也就是说当改变元素属性值后多长时间开始执行transition效果。

先来三张效果图,由于是一个动态的过程,这里只发三张动态瞬间图片:

图片左侧的文字还没有进入

图片上的四行文字正在逐条进入

图片上四行文字完成动画效果

HTML5全部代码:

index

邓福如

《如果有如果》

《前面路口停》

《邓大福是一只猫》

《Nothing On

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值