编程 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实现文字向右循环闪过效果实例（可用于移动端）

Jun 15 HTML / CSS

css3动画效果抖动解决方法

Sep 03 HTML / CSS

css3的@media属性实现页面响应式布局示例代码

Feb 10 HTML / CSS

纯css3制作的火影忍者写轮眼开眼至轮回眼及进化过程实例

Nov 11 HTML / CSS

HTML5 文件上传下载的实例代码

Jul 03 HTML / CSS

mui几种页面跳转方式对比总结概括

Aug 18 HTML / CSS

HTML5 manifest离线缓存的示例代码

Aug 08 HTML / CSS

HTML5超炫酷粒子效果的进度条的实现示例

Aug 23 HTML / CSS

HTML5图片层叠的实现示例

Jul 07 HTML / CSS

html+css实现文字折叠特效实例

Jun 02 HTML / CSS

CSS作用域（样式分割）的使用汇总

Nov 07 HTML / CSS

在CSS中使用when/else的方法

Jan 18 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 array的学习笔记

2012/05/10 PHP

PHP curl实现抓取302跳转后页面的示例

2014/07/04 PHP

php结合md5的加密解密算法实例

2016/09/30 PHP

PHP设计模式（九）外观模式Facade实例详解【结构型】

2020/05/02 PHP

定义select的边框颜色

2008/04/28 Javascript

javascript StringBuilder类实现

2008/12/22 Javascript

一个简单的js渐显(fadeIn)渐隐(fadeOut)类

2010/06/19 Javascript

兼容IE与firefox火狐的回车事件(js与jquery)

2010/10/20 Javascript

jquery select(列表)的操作（取值/赋值）

2011/03/16 Javascript

js 本地预览的简单实现方法

2014/02/18 Javascript

深入解读JavaScript中的Hoisting机制

2015/08/12 Javascript

javascript 判断两个日期之差的示例代码

2015/09/05 Javascript

基于javascript实现表格的简单操作

2016/05/21 Javascript

简单实现js菜单栏切换效果

2017/03/04 Javascript

基于JavaScript实现飘落星星特效

2017/08/10 Javascript

微信小程序常用赋值方法小结

2019/04/30 Javascript

javascript中如何判断类型汇总

2019/05/14 Javascript

vue实现固定位置显示功能

2019/05/30 Javascript

jQuery实现html可联动的百分比进度条

2020/03/26 jQuery

JS 图片压缩原理与实现方法详解

2020/04/29 Javascript

vue+canvas实现拼图小游戏

2020/09/18 Javascript

如何在 Vue 表单中处理图片

2021/01/26 Vue.js

[01:22:19]EG vs TNC Supermajor小组赛B组败者组第一轮 BO3 第二场 6.2

2018/06/03 DOTA

[47:18]完美世界DOTA2联赛循环赛 IO vs FTD BO2第一场 11.05

2020/11/06 DOTA

解决Python 爬虫URL中存在中文或特殊符号无法请求的问题

2018/05/11 Python

python中scikit-learn机器代码实例

2018/08/05 Python

python+mysql实现学生信息查询系统

2019/02/21 Python

Django配置MySQL数据库的完整步骤

2019/09/07 Python

python selenium实现发送带附件的邮件代码实例

2019/12/10 Python

python调用jenkinsAPI构建jenkins，并传递参数的示例

2020/12/09 Python

中医药大学市场营销专业自荐信

2013/09/29 职场文书

企业仓管员岗位职责

2014/06/15 职场文书

“四风”问题自我剖析材料思想汇报

2014/09/23 职场文书

Python 实现定积分与二重定积分的操作

2021/05/26 Python

虚拟机linux端mysql数据库无法远程访问的解决办法

2021/05/26 MySQL

Redis 限流器

2022/05/15 Redis