用两层animation动画设置沿方形跑一圈

原创 已于 2022-04-04 11:44:09 修改 · 757 阅读 · 0
标签
#动画
于 2022-03-06 09:08:50 首次发布
这篇博客介绍了如何使用Vue、CSS3和Less创建一个动画效果，让图片沿方形路径跑动一圈后停止。主要技术涉及flex布局、animation动画和v-show。通过在内部和外部div设置动画，并利用overflow: hidden进行隐藏，以及webkitAnimationEnd事件处理转弯和图片的显示隐藏。

 

  • 点击就开始跑步，一圈后原地停留
  • 用实现一些功能来去学习，能挖到不少自己不知道的知识点，虽然天天出bug，每次都有新问题，新的知识盲区，最后都一一克服。
  • 因为刚好学了vue.2就在vue.lic里面写了，暂时只有一个页面
  • 用到的技术，less, css3, vue.2(原生js也差不多)用了flex,animation和简单的v–show
  • 动画里放了两层div，里层是五张图片，里层是五张图主轴排列大小，实现第一层原地动画，图片方向用flex-direction实现方向排列方式，外层是一张图片的大小，设置是 overflow: hidden;使多余的四张图片实现隐藏、再设置动画。转弯里用webkitAnimationEnd动画结束事件实现显示隐藏
  •  

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdW5nYW1l,size_20,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdW5nYW1l,size_20,color_FFFFFF,t_70,g_se,x_16watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBAdW5nYW1l,size_20,color_FFFFFF,t_70,g_se,x_16

 

 

 

 

 

 

 

 

 

 

 

最低0.47元/天 解锁文章
ungame
关注
android 跑步帧动画,Android 用Animation-list实现逐帧动画
weixin_34546240的博客
05-26 359
packageorg.shuxiang.test;importandroid.app.Activity;importandroid.graphics.drawable.AnimationDrawable;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandr...
CSS3动画-沿矩形线运动并发光
零小唬的博客
11-06 544
CSS3动画-沿矩形线运动并发光
css实现边框动画效果
weixin_33739523的博客
11-17 1796
最近写了几个页面都用到css动画，以及很多before,after伪类。在此记录一下成果。css边框循环动画，页面效果如下： 1、沿着边框动画的图形使用before，after伪类写的。当时想用切图来写，后来考虑到优化，就用了css来写。具体代码如下： <div class="div"> <i class="bord...
html边框环绕一周动画,尝试无限循环复杂的css动画(边框围绕圆的边缘运行)
weixin_36255893的博客
06-09 1004
我正在尝试创建一个无限动画,其中围绕圆圈的新笔划围绕圆周运行.最初笔划是蓝色,然后当它达到360度时,它似乎在同一方向上消失.但实质上,类似的动画正在另一组元素上运行,其中颜色反转.我想把这个循环无限地作为一个加载状态.现在我可以让所描述的行为运行一次.我坚持让它循环,这意味着蓝色边框在消失后再次返回等等.小片包含在演示中 –body {padding: 0;margin: 0;}.outer, ...
编程素养Day007
dezuo0205的专栏
08-06 298
Q1：JQuery 问答题 jQuery 中有哪些方法可以遍历节点？ 【分析】children()：取得匹配元素的子元素集合； next() ：取得匹配元素后面紧邻的同辈元素； prev()：取得匹配元素前面紧邻的同辈元素； siblings()：取得匹配元素前后的所有同辈元素； closest()： 取得最近的匹配元素； find()：取得匹配元素中的元素集合，包括直接子元素和后...
animation(动画)实现正方形跑一圈
为千万同胞少走弯路而写文！！！
11-22 175
animation实现正方形跑一圈
css过度动画案例解析（transition和animation）
mengxiang_go的博客
03-30 1212
先把html放上（只放核心部分） 例一 ，正方形变为圆形的过度动画-套路解析 1、设置变化前div的样式  = >=>=> 2、设置变化后div的样式 3、用transition来串联变化前和变化后 那我们先来看变化前css的属性设置： #d1{ width:200px; height:200px; background:blue; }2、再看变化后css的属性设置：
loading加载事件的动画
weixin_44540436的博客
01-20 997
作者：马光佳 撰写时间：2019.1.20 1、搭建结构的HTML代码如下： @*背景渐变*@ &amp;amp;lt;div class=&amp;quot;wrapper&amp;quot;&amp;amp;gt; @*文字*@ &amp;amp;lt;div class=&amp;quot;logo&amp;quot;&amp;amp;gt;loading&amp;amp;lt;/div&amp
animation动画使用教程(详解)
为千万同胞少走弯路而写文！！！
11-22 501
animation动画属性介绍
css 外圆角旋转,CSS动画实例：旋转的圆角正方形
weixin_39925959的博客
08-04 315
在页面中放置一个类名为container的层作为效果呈现容器，在该层中再定义十个名为shape的层层嵌套的子层，HTML代码描述如下：分别为container和shape定义CSS样式规则如下：.container{margin: 0 auto;width: 650px;height: 650px;position: relative;overflow: hidden;border: 4px so...
让一个动画一直执行的属性是_「Web前端开发进阶篇」CSS3 动画
weixin_39998859的博客
11-29 780
点击上方“Web前端进阶指南”关注我呦跟程序员小强一起学前端上一篇我们讲了CSS3 2D/3D转化以及一些过渡的内容，主要说了使用2D/3D让元素改变形状、大小、位置的一些属性和方法，这一篇呢，我们主要来讲CSS3动画，这也是我们学习CSS3的主要目的，就是做动画。CSS3动画是什么？这个动画不是动画片啊，就跟上一篇说的CSS3过渡一个性质，都是从一种样式逐渐变化为另一种样式的效果，你可以改变任意...
调动动画
weixin_49756833的博客
05-17 208
我要讲的是一个span标签在一个设置的路线上无限的游走。 先看页面布局： 我把div标签设置了一个正方形并且在里面放了一张图片，不为别的，就为了美观，span标签我把它设置成了一个小圆球。 我主要是用translate（）方法来完成的。它的定义是元素从当前位置移动，根据给定的left（x 坐标） 和 top（y 坐标） 位置参数： Translate我是把它放在一个@keyframes里的，简单理解一下keyframes这个属性： 通过 @keyframes ...
加载动画——旋转Spinner与点加载的实现
最新发布
qq_37048082的博客
06-07 2620
你可能会问，系统有组件，干嘛还要自己写？说实话，就一个环形转圈，样式固定。你改改颜色、改改大小还行，想做更个性化的效果就没辙了。完全可控：颜色、速度、大小、形状，全都能自定义品牌一致性：可以和你的应用主题风格完全统一组合灵活：旋转 + 缩放 + 透明度，想怎么搭怎么搭不过也别过度设计。加载动画毕竟是功能性组件，花里胡哨反而影响体验。PC端屏幕上，一个干净的旋转环或者几个跳动的小点，够用了。
实现一个有趣的电商直播源码加载组件动画
QQ1981747098的博客
10-12 217
前言 Flutter 官方提供了诸如 CircularProgressIndicator和 LinearProgressIndicator两种常见的加载指示组件，但是说实话，实在太普通。 我们电商直播源码开发介绍到了动画环节，那我们自己来一个有趣的加载指示组件吧。 接口定义 遵循接口先行的习惯，我们先设计对外的接口。对于一个动画加载组件，我们需要支持两个属性： 尺寸：可以由调用者决定尺寸的大小，以便应用在不同的场合。由于风车加载是个正方形，我们定义参数名为 size，类型为 double。 速度
一个前端菜鸟的自学之路-手写CSS加载动画
weixin_44945653的博客
02-21 362
菜鸟的第一篇文章之CSS加载动画 效果预览 逆时针旋转效果 下面是编码思路 首先需要先做出一个圆环 动画中的小圆点使用background-color: 背景颜色做，要组成一个圆形需要8个小圆点。 首先使用div容器做一个宽高都为40px的正方形，然后用position: absolute;将小圆点定位在四个角。 用同样的方法再做一个div容器覆盖到第一个上面，使用transform: rotate(45deg);将容器顺时针旋转45度，再去掉border边框就得到了一个由8个小圆点组成的圆形。 然
[官方培训]14-摄像机动画运镜 李文磊 Epic 笔记
Tcohneyn的博客
09-28 1516
除了上述自带的摄像机程序动画外，我们可以通过UE的蓝图脚本去编写一些自定义的程序动画的行为，并在编辑器里可以实时预览。首先我们先看一下大的一个应用流程，然后再具体看一下逻辑层面怎么来实现各种效果。我们可以利用引擎自带的virtual camera的插件结合camera的modified component模块来实现这样的效果。打开以后就可以在camera component下添加一个叫VCAM的模块。在VCAMERA模块下，我们就可以为其添加camera的modifier的次级模块。
使用html+css制作方块运动时间为5s且重复运动的动画
狮子座的男孩
04-15 1635
Ⅰ、问题描述： 使用html+css实现方块规律移动； **要求：**将方块轨迹设置成为在一个矩形内移动，设置运行时间为5s的重复运动； Ⅱ实现过程如下： 1、运行软件VScode，亲测可实现； 2、运行代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"
每天10个前端小知识 【Day 16】
夏天的博客
02-16 6973
每天学习10个趣味前端小知识，快来看看吧！
2.10-css渐变、过渡、2d、3d
qq_45059908的博客
08-09 221
线性渐变--CSS3线性渐变中的角度渐变，角度渐变是水平线和渐变线之间的角度，以圆心为起点进行发散 盒子的background-image属性可以用linear-gradient()形式创建线性渐变背景 径向渐变 radial-gradient()形式创建径向渐变背景 过渡 transition过渡 1、所有数值类型的属性都可以参与过渡，比如width、height、left、top、border-radius 2、背景颜色和文字都可以被过渡 3、所有变形（包括...
CSS实现3D球面字符云
qq_40289557的博客
11-27 1109
在大屏可视化应用中，使用3D的场景有很多，复杂的交互动画通常是使用Three.js或echarts-gl来实现，但是在一些简单的3D场景中，CSS也可以实现一些不错的展示效果.
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值