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

原创 已于 2022-04-04 11:44:09 修改 · 738 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#动画

于 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
关注
iOS开发——圆形过渡动画
CocoaChen
02-19 4453
iOS开发——圆形过渡动画在一款新的app——Ping中，用户可以订阅自己感兴趣的主题，该应用会向用户推送相关的文章或段落。该应用在视图的切换时采用了一个非常炫酷的动画效果，如下图所示： 现在我们就来实现这一效果。总的来说，所用到的知识点有： 1、使用代理UIViewControllerAnimatedTransitioning实现控制器间的自定义动画 2、使用UIShapeLayer创建
vue 绕圆形旋转
qq_41775006的博客
01-11 2353
效果图 tenplate <div class="module_box"> <div class="box"> <i><span></span></i> </div> <div class="box2"> <i><span></span&
css3+animation元素绕圈
weixin_38304202的博客
11-29 751
@-webkit-keyframes circle { from{ transform: translate(20%, 20px) rotate(0turn) translate(-20%, -20px) translate(20%,20%) rotate(1turn) translate(-20...
android 跑步帧动画,Android 用Animation-list实现逐帧动画
weixin_34546240的博客
05-26 334
packageorg.shuxiang.test;importandroid.app.Activity;importandroid.graphics.drawable.AnimationDrawable;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandr...
html边框环绕一周动画,尝试无限循环复杂的css动画(边框围绕圆的边缘运行)
weixin_36255893的博客
06-09 976
我正在尝试创建一个无限动画,其中围绕圆圈的新笔划围绕圆周运行.最初笔划是蓝色,然后当它达到360度时,它似乎在同一方向上消失.但实质上,类似的动画正在另一组元素上运行,其中颜色反转.我想把这个循环无限地作为一个加载状态.现在我可以让所描述的行为运行一次.我坚持让它循环,这意味着蓝色边框在消失后再次返回等等.小片包含在演示中 –body {padding: 0;margin: 0;}.outer, ...
css实现边框动画效果
weixin_33739523的博客
11-17 1763
最近写了几个页面都用到css动画，以及很多before,after伪类。在此记录一下成果。css边框循环动画，页面效果如下： 1、沿着边框动画的图形使用before，after伪类写的。当时想用切图来写，后来考虑到优化，就用了css来写。具体代码如下： <div class="div"> <i class="bord...
CSS3动画-沿矩形线运动并发光
零小唬的博客
11-06 491
CSS3动画-沿矩形线运动并发光
CSS3来绘制一个3维立体游泳圈_使用css3绘制出各种几何图形
weixin_35775807的博客
12-23 289
1、圆形示例:思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html:复制代码代码如下:css:复制代码代码如下:.size{width:200px;height: 200px;background: #8BC34A;}.example1{border-radius:100px;}2、自适应椭圆思路：border-radius 这个属性还有...
前端vue2中实现点击div事件时，内部的字体图标转一圈，文字位置不变动，
08-29
方法一（推荐）：使用CSS动画（animation），每次点击时触发一个旋转一圈的动画，动画结束后自动回到原始状态（因为animation默认会回到初始状态）。这样我们不需要改变transform的值，只需要在点击时添加一个动画...
都不是爱心是一个正方形，也没有爱心花瓣
10-17
我们使用的是经典的 **两圆叠加法** 创建心形： ```css .heart { width: 200px; height: 180px; transform: rotate(-45deg); background: red; } .heart:before, .heart:after { content: ""; position: ...
编程素养Day007
dezuo0205的专栏
08-06 278
Q1：JQuery 问答题 jQuery 中有哪些方法可以遍历节点？ 【分析】children()：取得匹配元素的子元素集合； next() ：取得匹配元素后面紧邻的同辈元素； prev()：取得匹配元素前面紧邻的同辈元素； siblings()：取得匹配元素前后的所有同辈元素； closest()： 取得最近的匹配元素； find()：取得匹配元素中的元素集合，包括直接子元素和后...
用动画做出一个正方体并且3d旋转，详解
manognlink的博客
11-29 1022
使用HTML+CSS设置一个3d旋转的盒子
操作元素之修改样式属性
leechoy
06-12 820
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>..
html颜色不断变化,animation动画详解：制作颜色不停变化的正方形
weixin_42315996的博客
06-20 894
通常根据不同内核的浏览器要加上不同的前缀，比如：chrome、safari：@-webkit-keyframes在CSS选择器中，使用animition动画属性声明一个动画(关键帧)格式如下：@keyframes name{from{}to{}}或@keyframes name{0%{}50%{}100%{}}①每个阶段用百分比表示，从0%到100%②起止必须设置，即0%和100%或者from和t...
纯HTML+CSS实现DIV做矩形运动
你的大数据学长
02-18 5643
纯HTML+CSS实现DIV做矩形运动预计效果代码关键代码解释结果展示 预计效果 代码 该代码可在我的GitHub中找到，链接在此 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV做矩形运动</title> ...
前端 animation 动画（用的到的都写了）直接用animate库最方便用法加粗了
SwingDance的博客
07-27 1365
<!--建议直接复制丢到vscode去看，很清楚--> <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <title>Document</title&gt...
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 6191
再看代码： JS部分。
【直流微电网】径向直流微电网的状态空间建模与线性化：一种耦合DC-DC变换器状态空间平均模型的方法 （Matlab代码实现）
最新发布
12-05
【直流微电网】径向直流微电网的状态空间建模与线性化：一种耦合DC-DC变换器状态空间平均模型的方法 （Matlab代码实现）内容概要：本文介绍了径向直流微电网的状态空间建模与线性化方法，重点提出了一种基于耦合DC-DC变换器状态空间平均模型的建模策略。该方法通过对系统中多个相互耦合的DC-DC变换器进行统一建模，构建出整个微电网的集中状态空间模型，并在此基础上实施线性化处理，便于后续的小信号分析与稳定性研究。文中详细阐述了建模过程中的关键步骤，包括电路拓扑分析、状态变量选取、平均化处理以及雅可比矩阵的推导，最终通过Matlab代码实现模型仿真验证，展示了该方法在动态响应分析和控制器设计中的有效性。; 适合人群：具备电力电子、自动控制理论基础，熟悉Matlab/Simulink仿真工具，从事微电网、新能源系统建模与控制研究的研究生、科研人员及工程技术人员。; 使用场景及目标：①掌握直流微电网中多变换器系统的统一建模方法；②理解状态空间平均法在非线性电力电子系统中的应用；③实现系统线性化并用于稳定性分析与控制器设计；④通过Matlab代码复现和扩展模型，服务于科研仿真与教学实践。; 阅读建议：建议读者结合Matlab代码逐步理解建模流程，重点关注状态变量的选择与平均化处理的数学推导，同时可尝试修改系统参数或拓扑结构以加深对模型通用性和适应性的理解。
jira从入门到精通.doc
12-05
jira从入门到精通.doc
css动画沿长方形周长滑动一圈
07-23
CSS 动画可以创建出沿着长方形周长平滑滚动的效果，通常通过结合 `@keyframes` 规则、`transform` 属性以及 `animation` 或 `transition` 属性来实现。首先，你需要定义关键帧（Keyframe），让元素从一个位置开始...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值