编程 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 相关文章推荐

HTML5如何适配 iPhone IOS 底部黑条

Mar 09 HTML / CSS

灵活运用CSS3特性绘制简易版围棋效果

Sep 28 HTML / CSS

利用CSS3的定位页面元素

Aug 29 HTML / CSS

CSS3 Media Queries详细介绍和使用实例

May 08 HTML / CSS

详解CSS3+JS完美实现放大镜模式

Dec 03 HTML / CSS

使用 HTML5 Canvas 制作水波纹效果点击图片就会触发

Sep 15 HTML / CSS

HTML5 video标签（播放器）学习笔记（二）:播放控制

Apr 24 HTML / CSS

HTML5有哪些新特征

Dec 01 HTML / CSS

详解如何用HTML5 Canvas API控制图片的缩放变换

Mar 22 HTML / CSS

html5唤起app的方法

Nov 30 HTML / CSS

将SVG图引入到HTML页面的实现

Sep 20 HTML / CSS

HTML里显示pdf、word、xls、ppt的方法示例

Apr 14 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

服务器端解压缩zip的脚本

2006/12/22 PHP

台湾中原大学php教程孙仲岳主讲

2008/01/07 PHP

PHP中MD5函数使用实例代码

2008/06/07 PHP

php引用传值实例详解学习

2013/11/06 PHP

浅谈php常用的7大框架的优缺点

2020/07/20 PHP

用js判断页面刷新或关闭的方法(onbeforeunload与onunload事件)

2012/06/22 Javascript

基于jQuery.Validate验证库知识点的详解

2013/04/26 Javascript

固定表格行列(expression)在IE下适用

2013/07/25 Javascript

javascript白色简洁计算器

2015/05/04 Javascript

jQuery解析json数据实例分析

2015/11/24 Javascript

js事件处理程序跨浏览器解决方案

2016/03/27 Javascript

JavaScript知识点总结(十六)之Javascript闭包（Closure）代码详解

2016/05/31 Javascript

Bootstrap Modal遮罩弹出层代码分享

2016/11/21 Javascript

Bootstrap基本样式学习笔记之按钮(4)

2016/12/07 Javascript

解决Node.js使用MySQL出现connect ECONNREFUSED 127.0.0.1:3306的问题

2017/03/09 Javascript

Vue组件之全局组件与局部组件的使用详解

2017/10/09 Javascript

JavaScript代码执行的先后顺序问题

2017/10/29 Javascript

JavaScript设计模式之观察者模式(发布订阅模式)原理与实现方法示例

2018/07/27 Javascript

微信小程序模板template简单用法示例

2018/12/04 Javascript

vue双向绑定及观察者模式详解

2019/03/19 Javascript

Vue Elenent实现表格相同数据列合并

2020/11/30 Vue.js

[03:36]2015国际邀请赛第二日现场精彩集锦

2015/08/06 DOTA

python 解析XML python模块xml.dom解析xml实例代码

2014/02/07 Python

python3使用SMTP发送HTML格式邮件

2018/06/19 Python

python银行系统实现源码

2019/10/25 Python

python基于celery实现异步任务周期任务定时任务

2019/12/30 Python

Python模块future用法原理详解

2020/01/20 Python

图片上传插件ImgUploadJS：用HTML5 File API 实现截图粘贴上传、拖拽上传

2016/01/20 HTML / CSS

AE美国鹰美国官方网站：American Eagle Outfitters

2016/08/22 全球购物

期末总结的个人自我评价

2013/11/02 职场文书

幼儿园家长会欢迎词

2014/01/09 职场文书

商业计算机应用专业自荐书

2014/06/09 职场文书

领导班子四风表现材料

2014/08/23 职场文书

2014年学习厉行节约反对浪费思想汇报

2014/09/10 职场文书

90后经典动画片排行：《数码宝贝》第二，《小鲤鱼历险记》在榜

2022/03/18 日漫

Python docx库删除复制paragraph及行高设置图片插入示例

2022/07/23 Python