编程 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过渡_动力节点Java学院整理

Jul 11 HTML / CSS

css3一款3D字体带阴影效果的实现步骤

Mar 20 HTML / CSS

CSS3弹性盒模型开发笔记（二）

Apr 26 HTML / CSS

浅谈css3中的渐进增强和优雅降级

Dec 01 HTML / CSS

10分钟理解CSS3 Grid布局

Dec 20 HTML / CSS

10分钟入门CSS3 Animation

Dec 25 HTML / CSS

css3翻牌翻数字的示例代码

Feb 07 HTML / CSS

HTML5-WebSocket实现聊天室示例

Dec 15 HTML / CSS

html5 worker 实例(一) 为什么测试不到效果

Jun 24 HTML / CSS

Bootstrap File Input文件上传组件

Dec 01 HTML / CSS

Web前端：CSS最强总结附详细代码

Mar 31 HTML / CSS

CSS中float高度塌陷问题的四种解决方案

Apr 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与C#的值类型指向区别的详解

2013/05/21 PHP

PHP操作FTP类 (上传、下载、移动、创建等)

2016/03/31 PHP

PHP实现上传图片到 zimg 服务器

2016/10/19 PHP

Ext JS 4官方文档之三 -- 类体系概述与实践

2012/12/16 Javascript

js动态改变select选择变更option的index值示例

2014/07/10 Javascript

jQuery不使用插件及swf实现无刷新文件上传

2014/12/08 Javascript

JavaScript新增样式规则(推荐)

2016/07/19 Javascript

ajax实现动态下拉框示例

2017/01/10 Javascript

jQuery中layer分页器的使用

2017/03/13 Javascript

简单谈谈原生js的math对象

2017/06/27 Javascript

Vue.js数据绑定之data属性

2017/07/07 Javascript

提高Node.js性能的应用技巧分享

2017/08/10 Javascript

jQuery EasyUI window窗口使用实例代码

2017/12/25 jQuery

Vue页面骨架屏注入方法

2018/05/13 Javascript

微信小程序websocket实现即时聊天功能

2019/05/21 Javascript

openlayers实现地图测距测面

2020/09/25 Javascript

微信小程序使用前置摄像头拍照

2020/10/22 Javascript

[44:40]Serenity vs Pain 2018国际邀请赛小组赛BO2 第一场 8.19

2018/08/21 DOTA

[41:11]完美世界DOTA2联赛PWL S2 Inki vs Magma 第一场 11.22

2020/11/24 DOTA

python批量添加zabbix Screens的两个脚本分享

2017/01/16 Python

Python 对象中的数据类型

2017/05/13 Python

DataFrame中去除指定列为空的行方法

2018/04/08 Python

python自动化生成IOS的图标

2018/11/13 Python

Python面向对象程序设计多继承和多态用法示例

2019/04/08 Python

python进程的状态、创建及使用方法详解

2019/12/06 Python

python 常见的排序算法实现汇总

2020/08/21 Python

一文带你掌握Pyecharts地理数据可视化的方法

2021/02/06 Python

世界上最大的专业美容用品零售商：Sally Beauty

2017/07/02 全球购物

澳大利亚现代波西米亚风格女装网站：Bohemian Traders

2018/04/16 全球购物

日本高岛屋百货购物网站：TAKASHIMAYA

2019/03/24 全球购物

传播学毕业生求职信

2013/10/11 职场文书

呼啸山庄读书笔记

2015/06/29 职场文书

《黄道婆》教学反思

2016/02/22 职场文书

基于Python实现的购物商城管理系统

2021/04/27 Python

Golang Gob编码(gob包的使用详解)

2021/05/07 Golang

一文搞懂Python Sklearn库使用

2021/08/23 Python