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

已于 2022-04-04 11:44:09 修改
阅读量703 收藏
点赞数 4
文章标签： 动画
于 2022-03-06 09:08:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/A081127/article/details/123305312
版权
这篇博客介绍了如何使用Vue、CSS3和Less创建一个动画效果，让图片沿方形路径跑动一圈后停止。主要技术涉及flex布局、animation动画和v-show。通过在内部和外部div设置动画，并利用overflow: hidden进行隐藏，以及webkitAnimationEnd事件处理转弯和图片的显示隐藏。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

  • 点击就开始跑步，一圈后原地停留
  • 用实现一些功能来去学习，能挖到不少自己不知道的知识点，虽然天天出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
关注
html边框环绕一周动画,尝试无限循环复杂的css动画(边框围绕圆的边缘运行)
weixin_36255893的博客
06-09 953
我正在尝试创建一个无限动画,其中围绕圆圈的新笔划围绕圆周运行.最初笔划是蓝色,然后当它达到360度时,它似乎在同一方向上消失.但实质上,类似的动画正在另一组元素上运行,其中颜色反转.我想把这个循环无限地作为一个加载状态.现在我可以让所描述的行为运行一次.我坚持让它循环,这意味着蓝色边框在消失后再次返回等等.小片包含在演示中 –body {padding: 0;margin: 0;}.outer, ...
CSS3来绘制一个3维立体游泳圈_使用css3绘制出各种几何图形
weixin_35775807的博客
12-23 251
1、圆形示例:思路：给任何正方形元素设置一个足够大的 border-radius ，就可以把它变成一个圆形.代码如下：html:复制代码代码如下:css:复制代码代码如下:.size{width:200px;height: 200px;background: #8BC34A;}.example1{border-radius:100px;}2、自适应椭圆思路：border-radius 这个属性还有...
css3+animation元素绕圈
weixin_38304202的博客
11-29 719
@-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 301
packageorg.shuxiang.test;importandroid.app.Activity;importandroid.graphics.drawable.AnimationDrawable;importandroid.os.Bundle;importandroid.view.View;importandroid.view.View.OnClickListener;importandr...
css实现边框动画效果
weixin_33739523的博客
11-17 1734
最近写了几个页面都用到css动画，以及很多before,after伪类。在此记录一下成果。css边框循环动画，页面效果如下： 1、沿着边框动画的图形使用before，after伪类写的。当时想用切图来写，后来考虑到优化，就用了css来写。具体代码如下： <div class="div"> <i class="bord...
CSS3动画-沿矩形线运动并发光
零小唬的博客
11-06 459
CSS3动画-沿矩形线运动并发光
Android开发笔记（一百三十二）矢量图形与矢量动画
aqi00的博客
02-09 6259
矢量图形VectorDrawable 与水波图形RippleDrawable一样，矢量图形VectorDrawable也是Android5.0之后新增的图形类。矢量图不同于一般的图形，它是由一系列几何曲线构成的图像，这些曲线以数学上定义的坐标点连接而成。具体到实现上，则需开发者提供一个xml格式的矢量图形定义，然后系统根据矢量定义自动计算该图形的绘制区域。因为绘图结果是动态计算得到，所以不管缩放
iOS开发——圆形过渡动画
CocoaChen
02-19 4405
iOS开发——圆形过渡动画在一款新的app——Ping中，用户可以订阅自己感兴趣的主题，该应用会向用户推送相关的文章或段落。该应用在视图的切换时采用了一个非常炫酷的动画效果，如下图所示： 现在我们就来实现这一效果。总的来说，所用到的知识点有： 1、使用代理UIViewControllerAnimatedTransitioning实现控制器间的自定义动画 2、使用UIShapeLayer创建
css_loading动画19种
01-03
11. **螺旋动画**：一条线沿螺旋路径移动，形成螺旋状的加载效果，可以通过调整螺旋的圈数和速度来改变视觉感受。 12. **波浪滚动**：类似海洋波浪起伏的效果，通过控制元素的位移和透明度来实现。 13. **翻页加载...
编程素养Day007
dezuo0205的专栏
08-06 236
Q1：JQuery 问答题 jQuery 中有哪些方法可以遍历节点？ 【分析】children()：取得匹配元素的子元素集合； next() ：取得匹配元素后面紧邻的同辈元素； prev()：取得匹配元素前面紧邻的同辈元素； siblings()：取得匹配元素前后的所有同辈元素； closest()： 取得最近的匹配元素； find()：取得匹配元素中的元素集合，包括直接子元素和后...
html颜色不断变化,animation动画详解：制作颜色不停变化的正方形
weixin_42315996的博客
06-20 845
通常根据不同内核的浏览器要加上不同的前缀，比如：chrome、safari：@-webkit-keyframes在CSS选择器中，使用animition动画属性声明一个动画(关键帧)格式如下：@keyframes name{from{}to{}}或@keyframes name{0%{}50%{}100%{}}①每个阶段用百分比表示，从0%到100%②起止必须设置，即0%和100%或者from和t...
前端 animation 动画（用的到的都写了）直接用animate库最方便用法加粗了
SwingDance的博客
07-27 1331
<!--建议直接复制丢到vscode去看，很清楚--> <!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"/> <metaname="viewport"content="width=device-width,initial-scale=1.0"/> <title>Document</title&gt...
用动画做出一个正方体并且3d旋转，详解
manognlink的博客
11-29 952
使用HTML+CSS设置一个3d旋转的盒子
vue 绕圆形旋转
qq_41775006的博客
01-11 2282
效果图 tenplate <div class="module_box"> <div class="box"> <i><span></span></i> </div> <div class="box2"> <i><span></span&
纯HTML+CSS实现DIV做矩形运动
你的大数据学长
02-18 5606
纯HTML+CSS实现DIV做矩形运动预计效果代码关键代码解释结果展示 预计效果 代码 该代码可在我的GitHub中找到，链接在此 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>DIV做矩形运动</title> ...
操作元素之修改样式属性
leechoy
06-12 733
<!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>..
分享一个可交互的小场景（二）
一起学习一起进步~
06-25 5966
再看代码： JS部分。
基于模糊故障树的工业控制系统可靠性分析与Python实现
最新发布
04-26
内容概要：本文探讨了模糊故障树（FFTA）在工业控制系统可靠性分析中的应用，解决了传统故障树方法无法处理不确定数据的问题。文中介绍了模糊数的基本概念和实现方式，如三角模糊数和梯形模糊数，并展示了如何用Python实现模糊与门、或门运算以及系统故障率的计算。此外，还详细讲解了最小割集的查找方法、单元重要度的计算，并通过实例说明了这些方法的实际应用场景。最后，讨论了模糊运算在处理语言变量方面的优势，强调了在可靠性分析中处理模糊性和优化计算效率的重要性。 适合人群：从事工业控制系统设计、维护的技术人员，以及对模糊数学和可靠性分析感兴趣的科研人员。 使用场景及目标：适用于需要评估复杂系统可靠性的场合，特别是在面对不确定数据时，能够提供更准确的风险评估。目标是帮助工程师更好地理解和预测系统故障，从而制定有效的预防措施。 其他说明：文中提供的代码片段和方法可用于初步方案验证和技术探索，但在实际工程项目中还需进一步优化和完善。
风力发电领域双馈风力发电机（DFIG）Simulink模型的构建与电流电压波形分析
04-26
内容概要：本文详细探讨了双馈风力发电机（DFIG）在Simulink环境下的建模方法及其在不同风速条件下的电流与电压波形特征。首先介绍了DFIG的基本原理，即定子直接接入电网，转子通过双向变流器连接电网的特点。接着阐述了Simulink模型的具体搭建步骤，包括风力机模型、传动系统模型、DFIG本体模型和变流器模型的建立。文中强调了变流器控制算法的重要性，特别是在应对风速变化时，通过实时调整转子侧的电压和电流，确保电流和电压波形的良好特性。此外，文章还讨论了模型中的关键技术和挑战，如转子电流环控制策略、低电压穿越性能、直流母线电压脉动等问题，并提供了具体的解决方案和技术细节。最终，通过对故障工况的仿真测试，验证了所建模型的有效性和优越性。 适用人群：从事风力发电研究的技术人员、高校相关专业师生、对电力电子控制系统感兴趣的工程技术人员。 使用场景及目标：适用于希望深入了解DFIG工作原理、掌握Simulink建模技能的研究人员；旨在帮助读者理解DFIG在不同风速条件下的动态响应机制，为优化风力发电系统的控制策略提供理论依据和技术支持。 其他说明：文章不仅提供了详细的理论解释，还附有大量Matlab/Simulink代码片段，便于读者进行实践操作。同时，针对一些常见问题给出了实用的调试技巧，有助于提高仿真的准确性和可靠性。
css动画沿长方形周长滑动一圈
07-23
CSS 动画可以创建出沿着长方形周长平滑滚动的效果，通常通过结合 `@keyframes` 规则、`transform` 属性以及 `animation` 或 `transition` 属性来实现。首先，你需要定义关键帧（Keyframe），让元素从一个位置开始移动到另一个位置，形成一个完整的圆形路径。假设你的长方形宽度为 `width`，高度为 `height`，初始位置为左上角。 ```css /* 定义关键帧 */ @keyframes rotate-around { 0% { transform: translateX(0) translateY(0); } 50% { transform: translateX(-width) translateY(-height); } 100% { transform: translateX(0) translateY(0); /* 回到起点 */ } } /* 应用动画到需要滚动的元素 */ .rectangle { width: 100px; height: 100px; position: relative; /* 确保元素有定位 */ animation-name: rotate-around; animation-duration: 4s; /* 滚动一圈所需时间 */ animation-iteration-count: infinite; /* 循环播放 */ } ``` 在这个例子中，`.rectangle` 元素会不断地沿着长方形的边框做循环滚动，给人一种环绕一周的感觉。你可以调整关键帧的位置、动画速度和持续次数来定制你需要的效果。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值