编程 HTML / CSS

CSS3实现超慢速移动动画效果非常流畅无卡顿

Posted in HTML / CSS onJune 15, 2014

三角碎片以非常缓慢的速度旋转移动，如果使用JS实现会出现一像素一像素移动的卡顿

使用CSS3会获得非常理想的效果

复制代码

代码如下:

transform: translate3d(80px, 150px, 0px) rotate(1220deg);
transition: transform 30s linear 0s;

上面一个属性表示图像变换

translate3d(80px, 150px, 0px) 表示X轴偏移80px， Y轴偏移150px

rotate(1220deg) 表示在此过程中旋转1220°

transition: transform 30s linear 0s;

表示动画时间30秒

速度方式：linear

延迟0s

CSS3实现超慢速移动动画效果非常流畅无卡顿

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

HTML / CSS 相关文章推荐

css3 按钮样式简单可扩展创建

Mar 18 HTML / CSS

可以随进度显示不同颜色的css3进度条分享

Apr 11 HTML / CSS

Html5之svg可缩放矢量图形_动力节点Java学院整理

Jul 17 HTML / CSS

HTML5 WebGL 实现民航客机飞行监控系统

Jul 25 HTML / CSS

html5记忆翻牌游戏实现思路及代码

Jul 25 HTML / CSS

不可轻视HTML5！App三年内将被html5顶替彻底消失

Nov 18 HTML / CSS

详解Html5 监听拦截Android返回键方法

Apr 18 HTML / CSS

html5 外链式实现加减乘除的代码

Sep 04 HTML / CSS

Html5定位终极解决方案

Feb 05 HTML / CSS

html中显示特殊符号(附带特殊字符对应表)

Jun 21 HTML / CSS

css3中2D转换之有趣的transform形变效果

Feb 24 HTML / CSS

使用CSS实现音波加载效果

May 07 HTML / CSS

基于CSS3的CSS 多栏(Multi-column)实现瀑布流源码分享

Jun 11 #HTML / CSS

纯CSS3实现滚动的齿轮动画效果

Jun 05 #HTML / CSS

浅析几个CSS3常用功能的写法

Jun 05 #HTML / CSS

CSS3中利用animation属性创建雪花飘落特效

May 14 #HTML / CSS

CSS3感应鼠标的背景闪烁和图片缩放动画效果

May 14 #HTML / CSS

css3 自定义字体font-face使用介绍

May 14 #HTML / CSS

CSS3动画animation实现云彩向左滚动

May 09 #HTML / CSS

You might like

php产生随机数的两种方法实例代码输出随机IP

2011/04/08 PHP

浅析php变量修饰符static的使用

2013/06/28 PHP

php实现的农历算法实例

2015/08/11 PHP

PHP表单提交后引号前自动加反斜杠的原因及三种办法关闭php魔术引号

2015/09/30 PHP

Laravel 6 将新增为指定队列任务设置中间件的功能

2019/08/06 PHP

javascript 动态加载 css 方法总结

2009/07/11 Javascript

JavaScript 输入框内容格式验证代码

2010/02/11 Javascript

Jquery chosen动态设置值实例介绍

2013/08/08 Javascript

jQuery控制iFrame(实例代码)

2013/11/19 Javascript

Google官方支持的NodeJS访问API，提供后台登录授权

2014/07/29 NodeJs

JS实现pasteHTML兼容ie,firefox,chrome的方法

2016/06/22 Javascript

web前端开发upload上传头像js示例代码

2016/10/22 Javascript

bootstrap实现每隔5秒自动轮播效果

2016/12/20 Javascript

jQuery插件HighCharts实现2D柱状图、折线图的组合多轴图效果示例【附demo源码下载】

2017/03/09 Javascript

解决Vue页面固定滚动位置的处理办法

2017/07/13 Javascript

BetterScroll 在移动端滚动场景的应用

2017/09/18 Javascript

JS获取url参数,JS发送json格式的POST请求方法

2018/03/29 Javascript

vux uploader 图片上传组件的安装使用方法

2018/05/15 Javascript

Angular4.x Event (DOM事件和自定义事件详解)

2018/10/09 Javascript

快速搭建Node.js(Express)用户注册、登录以及授权的方法

2019/05/09 Javascript

layui button 按钮弹出提示窗口,确定才进行的方法

2019/09/06 Javascript

Vue使用CDN引用项目组件，减少项目体积的步骤

2020/10/30 Javascript

[02:20]2014DOTA2西雅图邀请赛 MVP外卡赛首胜采访

2014/07/09 DOTA

Python基于贪心算法解决背包问题示例

2017/11/27 Python

Python爬虫框架Scrapy实例代码

2018/03/04 Python

python合并已经存在的sheet数据到新sheet的方法

2018/12/11 Python

python操作kafka实践的示例代码

2019/06/19 Python

canvas绘制表情包的示例代码

2018/07/09 HTML / CSS

澳大利亚领先的运动鞋商店：Hype DC

2018/03/31 全球购物

大一军训感言

2014/01/09 职场文书

税务干部个人整改措施思想汇报

2014/10/10 职场文书

护士个人年度总结范文

2015/02/13 职场文书

学校证明范文

2015/06/24 职场文书

暑期辅导班宣传单

2015/07/14 职场文书

教师法制教育培训学习心得体会

2016/01/14 职场文书

大学学生会主席竞选稿怎么写？

2019/08/19 职场文书