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

纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果

Dec 28 HTML / CSS

HTML5时代CSS设置漂亮字体取代图片

Sep 04 HTML / CSS

纯HTML5+CSS3制作图片旋转

Jan 12 HTML / CSS

CSS3中的@keyframes关键帧动画的选择器绑定

Jun 13 HTML / CSS

CSS3属性 line-clamp控制文本行数的使用

Mar 19 HTML / CSS

HTML5 本地存储 LocalStorage详解

Jun 24 HTML / CSS

关于前端上传文件全面基础扫盲贴（入门）

Aug 01 HTML / CSS

html5 标签

Jul 16 HTML / CSS

用html5的canvas画布绘制贝塞尔曲线完整代码

Aug 14 HTML / CSS

浅谈html5与APP混合开发遇到的问题总结

Mar 20 HTML / CSS

移动端html5模拟长按事件的实现方法

Sep 30 HTML / CSS

HTML5 canvas实现的静态循环滚动播放弹幕

Jan 05 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中常用字符串处理代码片段整理

2011/11/07 PHP

php语言流程控制中的主动与被动

2012/11/05 PHP

php+mysql大量用户登录解决方案分析

2014/12/29 PHP

类似CSDN图片切换效果脚本

2009/09/17 Javascript

IE无法设置短域名下Cookie

2010/09/23 Javascript

js写的评论分页(还不错)

2013/12/23 Javascript

javascript实现捕捉键盘上按下的键

2015/05/05 Javascript

详解AngularJS的通信机制

2015/06/18 Javascript

jquery解析json格式数据的方法(对象、字符串)

2015/11/24 Javascript

Jquery操作Ajax方法小结

2015/11/29 Javascript

Vuejs第一篇之入门教程详解（单向绑定、双向绑定、列表渲染、响应函数）

2016/09/09 Javascript

jQuery居中元素scrollleft计算方法示例

2017/01/16 Javascript

jQuery实现的事件绑定功能基本示例

2017/10/11 jQuery

vue2.0 datepicker使用方法

2018/02/04 Javascript

详解使用jest对vue项目进行单元测试

2018/09/07 Javascript

jQuery.parseJSON()函数详解

2019/02/28 jQuery

Vue CLI3中使用compass normalize的方法

2019/05/30 Javascript

express如何解决ajax跨域访问session失效问题详解

2019/06/20 Javascript

JS highcharts实现动态曲线代码示例

2020/10/16 Javascript

python设计模式大全

2016/06/27 Python

Python将多个excel文件合并为一个文件

2018/01/03 Python

Java实现的执行python脚本工具类示例【使用jython.jar】

2018/03/29 Python

Python面向对象总结及类与正则表达式详解

2019/04/18 Python

Python3 把一个列表按指定数目分成多个列表的方式

2019/12/25 Python

树莓派升级python的具体步骤

2020/07/05 Python

python和C++共享内存传输图像的示例

2020/10/27 Python

便携式太阳能系统的创新者：GOAL ZERO

2018/02/04 全球购物

会计应聘求职信范文

2013/12/17 职场文书

集体婚礼证婚词

2014/01/13 职场文书

洗车工岗位职责

2014/03/15 职场文书

创先争优一句话承诺

2014/05/29 职场文书

关于旅游的活动方案

2014/08/15 职场文书

安全例会汇报材料

2014/08/23 职场文书

2014年人大工作总结

2014/12/10 职场文书

导游词之江苏同里古镇

2019/11/18 职场文书

开机音效回归! Windows 11重新引入开机铃声

2021/11/21 数码科技