为了账号安全,请及时绑定邮箱和手机立即绑定

带你走入前端动画的世界

如风般魅影 Web前端工程师
难度入门
时长 2小时13分
学习人数
综合评分9.83
22人评价 查看评价
9.6 内容实用
9.9 简洁易懂
10.0 逻辑清晰
https://codepen.io/arm-liang/full/KKwyJyV
可以借鉴一波,使用百分比translate替代js width配置,使用css transition替代等待和动画时长配置
https://codepen.io/arm-liang/full/KKwyJyV
可以间接一波,使用百分比替代js width配置,使用css transition替代等待和动画时长配置
我发现课程代码没有附加出来,抱歉最近事情太多了,比较忙
下面是代码 https://github.com/linrufeng/animation.git
视频挺好的

讲师回答 / 如风般魅影
最近一直在做项目,京东的年终倒带,大致也是用step这个函数实现的;你可以这样理解step多用于雪碧图背景图片,例如这个雪碧图的背景一共有10个,step(10)就ok了相当于把背景图等分10分,然后配合背景图坐标例如我整个图片宽度是1000 每个背景的图片大小是100 那么就是step10 , 之后在@keyframes run{} 这个里面在100%里面加background-position-x:-1000;
/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D/::D

讲师回答 / 如风般魅影
https://github.com/linrufeng/animation.git 代码
老师的源码在那里下载
这个讲的挺好的

讲师回答 / 如风般魅影
https://github.com/linrufeng/animation.git 这个里面有图片

最新回答 / 翎栋
https://github.com/Talbot3/FlyLab/tree/master/example/demo-css3#Q&A这个可以回答你的疑问
课程须知
1、有HTML、CSS、JavaScript、jQuery基础 2、缺少完整项目开发经验,为找工作增加经验
老师告诉你能学到什么?
(1)学会CSS3动画基础 (2)掌握时间函数的应用 (3)学会结合js开发优美的过渡效果

微信扫码,参与3人拼团

意见反馈 帮助中心 APP下载
官方微信
友情提示:

您好,此课程属于迁移课程,您已购买该课程,无需重复购买,感谢您对慕课网的支持!

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

举报

0/150
提交
取消