博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
超慢速移动动画使用CSS3实现流畅效果
阅读量:7239 次
发布时间:2019-06-29

本文共 308 字,大约阅读时间需要 1 分钟。

三角碎片以很缓慢的速度旋转移动。假设使用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

你可能感兴趣的文章
数数字
查看>>
配置阿里云Docker镜像加速仓库
查看>>
社交的基本逻辑
查看>>
DBSCAN
查看>>
Maven 使用 二——nexus
查看>>
解决maven的依赖总是无法下载完成
查看>>
【Python3 爬虫】15_Fiddler抓包分析
查看>>
【备忘】EntityFramework 6 升级到 EntityFrameworkCore 注意点
查看>>
xilinx uboot网卡驱动分析
查看>>
Spring Boot系列之配置日志输出等级
查看>>
Java 底层机制(JVM/堆/栈/方法区/GC/类加载)
查看>>
原 在windows上创建文件名以“.”开头的文件
查看>>
实时流处理Storm、Spark Streaming、Samza、Flink孰优孰劣
查看>>
e297: write error in swap file
查看>>
并发错误:事务(进程 ID )与另一个进程已被死锁在 lock 资源上,且该事务已被选作死锁牺牲品...
查看>>
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
查看>>
如何在Solr中实现多core查询
查看>>
Ubuntu下搭建Hyperledger Fabric v1.0环境
查看>>
EventBus 3.0使用详解
查看>>
Linux curl 一例
查看>>