超慢速移动动画使用CSS3实现流畅效果

最新推荐文章于 2022-09-28 07:00:00 发布
最新推荐文章于 2022-09-28 07:00:00 发布
阅读量2.7k 收藏
点赞数
分类专栏： HTML5 HTML AJAX/jQuery/Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/china_skag/article/details/33763889
版权
HTML 同时被 3 个专栏收录
111 篇文章 0 订阅
订阅专栏
AJAX/jQuery/Javascript
41 篇文章 0 订阅
订阅专栏
HTML5
39 篇文章 0 订阅
订阅专栏

三角碎片以非常缓慢的速度旋转移动，如果使用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




china_skag
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一、动画 - 过渡效果transition
gaoya7305的博客
06-14 1512
动画，过渡效果transition
3D转换
chenyiboke的博客
11-17 792
3D 转换 我们生活的环境是3D的，照片就是3D物体在2D平面呈现的例子。 **有什么特点：** 近大远小。 物体后面遮挡不可见。 当我们在网页上构建3D效果的时候参考这些特点就能产出3D效果。 1. 三维坐标系 三维坐标系其实就是指立体空间，立体空间是由3个轴共同组成的。 x轴 ： 水平向右 注意： x右边是正值，左边是负值。 y轴 ： 垂...
纯css3带动画效果的左右滑动按钮
12-13
这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动，按钮开关滑动时带有很炫的动画和渐变效果。
css3滑动图片动画效果
11-05
css3滑动图片动画效果 css3滑动图片动画效果 css3滑动图片动画效果
CSS3实现超慢速移动动画效果非常流畅无卡顿
09-25
三角碎片以非常缓慢的速度旋转移动，如果使用JS实现会出现一像素一像素移动的卡顿而使用CSS3会获得非常理想的效果
《CSS3》动画属性
weixin_47181056的博客
06-28 702
每天收获一点点
网页模板——纯CSS3实现8组超炫酷鼠标滑过图片动画特效源码.zip
11-23
在本资源中，我们拥有一个名为“网页模板——纯CSS3实现8组超炫酷鼠标滑过图片动画特效源码.zip”的压缩包，它包含了利用纯CSS3技术创建的8种不同的图片动画特效。这些特效在鼠标滑过图片时会呈现出炫酷的视觉效果，...
jQuery中使用animate自定义动画的方法
10-22
本文将详细介绍如何使用`animate`方法来实现元素的自定义动画效果。 #### 动画实现基本原理 `animate`方法允许我们在指定的CSS属性上创建动画效果。它可以接受一个或多个CSS属性的键值对组成的对象，并按照指定的...
纯 CSS3 实现的窗帘菜单 Accordion
03-21
纯 CSS3 实现的窗帘菜单 Accordion，供大家一起共同分享学习。
一篇文章吃透 CSS3 属性： transition过渡 与 transform动画
weixin_52212950的博客
09-28 1万+
transition 过渡与transform动画 这两个新属性的参数确实比较复杂，它们可以做出 CSS 的一些基础动画效果，平移，旋转，倾角......等等，这些也是我早期学习 CSS 的难记易忘之处，今天给大家详细总结出来。一：transition 过渡transition 可以做出 CSS 的过渡效果，例如要过渡的属性名称，要过渡的时间，过渡的延迟等待时间，过渡的速度变化（过渡类型）
HTML5 - 用CSS3动画制作场景切换效果（移动，旋转，淡入淡出等）
热门推荐
u014063717的博客
03-17 4万+
两个场景（即两个div视图）切换的时候，如果想添加个过渡动画，除了可以使用js来实现，还可以通过CSS3的animation属性来实现。 （注意：Internet Explorer 9 以及更早的版本不支持 animation 属性。）下面做了个过渡动画汇总，包含常见的动画效果，效果图如下： 点击此处查看运行效果。 代码如下：<!DOCTYPE html> <html> <head> <m
CSS3图片上下移动的动画效果
weixin_44538151的博客
01-25 1万+
CSS3图片上下移动的动画效果 开发工具与关键技术：Adobe Dreamweaver CC 2018 作者：昨夜星辰 撰写时间：2019年1月17日 下面我们使用Adobe Dreamweaver CC 2018来实行CSS3中的动画效果， 以及输出的截图： 一．实现CSS3上下移动的效果的，首先创建一个div把你要移动的样式放进去，再...
js控制div匀速移动和停止
h_qingyi的博客
11-30 1万+
JS实现对象匀速、变速移动和停止 JS实现对象匀速移动和停止 HTML： JS：实现向右运动 var timer=null;window.onload=function(){var odiv=document.getElementById('d1');var obtn=document.getElementById('btn');clearInt
抽屉效果功能实现
ITcontend的专栏
12-02 2582
抽屉效果功能实现，代码详细实现
用CSS3实现移动效果
Andone_hsx的博客
12-17 6449
任务描述 本关任务：用CSS3实现物体移动效果。 效果如下： 相关知识 为了完成本关任务，你需要掌握：1.transform属性，2.transition属性。 transform属性 下面是基本的html结构，： &lt;div class="move"&gt; &lt;p&gt;向上移动&lt;/p&gt; &lt;/div&gt; 效果如下： 现在需要平滑的往上移...
animation+transform实现轨迹平移
还没想好
08-24 5576
之前通过animation+transtion实现平移，transtion通过定义left和top值来移动； 其中 animation是定义一个动画，可以通过百分数来定义每个时刻的状态 基本的需要：  -webkit-animation-name: Aname; -webkit-animation-duration: 30s; 本次操作实现，太阳落山的轨迹，用了transform属性，可...
解决移动端滑动不流畅问题
qq_35458527的博客
03-13 8963
//-webkit-overflow-scrolling : touch; 苹果css解决不流畅方法 var overscroll = function(el) { el.addEventListener('touchstart', function() { var top = el.scrollTop , totalScroll = el.scrollHeight , currentS...
css hover效果慢速自定义
最新发布
06-09
您可以使用CSS的`transition`属性来定义hover效果的缓慢过渡。例如，您可以使用以下代码来使颜色在hover时从灰色变成红色，并在200毫秒内进行平滑的过渡： ``` .element { background-color: #ccc; transition: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值