编程 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制作的20种loading动效

Jul 05 HTML / CSS

CSS3教程(8):CSS3透明度指南

Apr 02 HTML / CSS

CSS3系列教程:背景图片(背景大小和多背景图) 应用说明

Dec 19 HTML / CSS

CSS3 transition 实现通知消息轮播条

Oct 14 HTML / CSS

html5实现的便签特效(实战分享)

Nov 29 HTML / CSS

为你的html5网页添加音效示例

Apr 03 HTML / CSS

HTML5图片预览实例分享

Jun 04 HTML / CSS

用HTML5 实现橡皮擦的涂抹效果的教程

May 11 HTML / CSS

html5中的一些标签学习(心得)

Oct 18 HTML / CSS

html5 input输入实时检测以及延时优化

Jul 18 HTML / CSS

HTML5 textarea高度自适应的两种方案

Apr 08 HTML / CSS

html2 canvas svg不能识别的解决方案

Jun 03 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代码

2010/07/17 PHP

Smarty中常用变量操作符汇总

2014/10/27 PHP

php从csv文件读取数据并输出到网页的方法

2015/03/14 PHP

PHP Streams(流)详细介绍及使用

2015/05/12 PHP

PHP parse_ini_file函数的应用与扩展操作示例

2019/01/07 PHP

Prototype使用指南之form.js

2007/01/10 Javascript

javascript Select标记中options操作方法集合

2008/10/22 Javascript

使用jQuery同时控制四张图片的伸缩实现代码

2013/04/19 Javascript

JavaScript 垃圾回收机制分析

2013/10/10 Javascript

动态显示可输入的字数提示还可以输入的字数

2014/04/01 Javascript

浅谈angularJS 作用域

2015/07/05 Javascript

JavaScript中对DOM节点的访问、创建、修改、删除

2015/11/16 Javascript

了解ESlint和其相关操作小结

2018/05/21 Javascript

浅谈node中的cluster集群

2018/06/02 Javascript

Seajs源码详解分析

2019/04/02 Javascript

vue 实现搜索的结果页面支持全选与取消全选功能

2019/05/10 Javascript

Vue实现拖放排序功能的实例代码

2019/07/08 Javascript

详解使用WebPack搭建React开发环境

2019/08/06 Javascript

微信小程序可滑动月日历组件使用详解

2019/10/21 Javascript

ES6箭头函数和扩展实例分析

2020/05/23 Javascript

详解Vue+elementUI build打包部署后字体图标丢失问题

2020/07/13 Javascript

Python中多线程及程序锁浅析

2015/01/21 Python

python&MongoDB爬取图书馆借阅记录

2016/02/05 Python

Python Web程序部署到Ubuntu服务器上的方法

2018/02/22 Python

Python之pymysql的使用小结

2019/07/01 Python

Pytorch自己加载单通道图片用作数据集训练的实例

2020/01/18 Python

python matplotlib模块基本图形绘制方法小结【直线，曲线，直方图，饼图等】

2020/04/26 Python

中国排名第一的外贸销售网站：LightInTheBox.com（兰亭集势）

2016/10/28 全球购物

在c#中using和new这两个关键字有什么意义

2013/05/19 面试题

《找不到快乐的波斯猫》教学反思

2014/02/24 职场文书

企业法人授权委托书

2014/09/25 职场文书

2014年光棍节活动策划方案（创意集锦）

2014/09/29 职场文书

大学生求职自荐信范文

2015/03/04 职场文书

2015年社区创卫工作总结

2015/04/21 职场文书

《莫泊桑拜师》教学反思

2016/02/22 职场文书

PostgreSQL并行计算算法及参数强制并行度设置方法

2022/04/07 PostgreSQL