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

已于 2022-04-04 11:44:09 修改
阅读量634 收藏
点赞数 4
文章标签： 动画
于 2022-03-06 09:08:50 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/A081127/article/details/123305312
版权

 

  • 点击就开始跑步，一圈后原地停留
  • 用实现一些功能来去学习，能挖到不少自己不知道的知识点，虽然天天出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_16

最低0.47元/天 解锁文章
ungame
关注
  • 4
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
html边框环绕一周动画,尝试无限循环复杂的css动画(边框围绕圆的边缘运行)
weixin_36255893的博客
06-09 875
我正在尝试创建一个无限动画,其中围绕圆圈的新笔划围绕圆周运行.最初笔划是蓝色,然后当它达到360度时,它似乎在同一方向上消失.但实质上,类似的动画正在另一组元素上运行,其中颜色反转.我想把这个循环无限地作为一个加载状态.现在我可以让所描述的行为运行一次.我坚持让它循环,这意味着蓝色边框在消失后再次返回等等.小片包含在演示中 –body {padding: 0;margin: 0;}.outer, ...
一种使用Unity Animation的简单动画混合
08-27
利用Unity官方Animation示例里的两种动画节点，来实现外部输入index值时，自动将目前动画clip自动混合过度到指定index动画clip的功能。
css实现边框跑马灯效果
TarkuNi的博客
07-03 3593
先上效果图 1.先整个div边框 <div class="box horse_run">小马跑起来~</div> 2.书写css样式 .box { height: 300px; width: 400px; box-shadow: 0 0 3px orange; text-align: center; line-height: 280px; } .horse_run { background-image: linear-gradient(90de
transform，transition，animation 的混合使用——结业篇
weixin_34326558的博客
05-24 190
css动画的动画制作没有什么特别高深的地方，引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的，但我想要强调的是掌握并深入的理解css的基础，以及灵活的运用是做出一个画面美观、代码简洁、性能高效的css动画的必备技能。今天，我也就不再多做赘述，我就来说一说我在做css动画的心得体会。 我把css动画的制作分为3个阶段：学习（初步）阶段、模仿阶段、自我开发阶段。 学习...
旋转、缩放、移动：掌握CSS Transform动画的终极指南！
最新发布
云端源想的博客
04-11 1410
CSS变形动画是利用CSS3的transform属性创建的动画效果。它可以使元素旋转、缩放、倾斜甚至翻转，让静态的网页元素动起来，为用户带来更加丰富的交互体验。
css3+animation元素绕圈
weixin_38304202的博客
11-29 663
@-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 256
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 1675
最近写了几个页面都用到css动画，以及很多before,after伪类。在此记录一下成果。css边框循环动画，页面效果如下： 1、沿着边框动画的图形使用before，after伪类写的。当时想用切图来写，后来考虑到优化，就用了css来写。具体代码如下： <div class="div"> <i class="bord...
CSS3动画-沿矩形线运动并发光
零小唬的博客
11-06 385
CSS3动画-沿矩形线运动并发光
编程素养Day007
dezuo0205的专栏
08-06 188
Q1：JQuery 问答题 jQuery 中有哪些方法可以遍历节点？ 【分析】children()：取得匹配元素的子元素集合； next() ：取得匹配元素后面紧邻的同辈元素； prev()：取得匹配元素前面紧邻的同辈元素； siblings()：取得匹配元素前后的所有同辈元素； closest()： 取得最近的匹配元素； find()：取得匹配元素中的元素集合，包括直接子元素和后...
html颜色不断变化,animation动画详解：制作颜色不停变化的正方形
weixin_42315996的博客
06-20 722
通常根据不同内核的浏览器要加上不同的前缀，比如：chrome、safari：@-webkit-keyframes在CSS选择器中，使用animition动画属性声明一个动画(关键帧)格式如下：@keyframes name{from{}to{}}或@keyframes name{0%{}50%{}100%{}}①每个阶段用百分比表示，从0%到100%②起止必须设置，即0%和100%或者from和t...
CSS3中的Transition过度与Animation动画属性使用要点
12-13
这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑地以动画效果改变CSS的属性值，它的语法如下： CSS Code复制内容到剪贴板 transition: property duration timing-function delay; /...
Flutter Animation动画开发之——repeat循环播放
01-20
简介 我们知道AnimationController.forward()可以正向播放动画，AnimationController.reverse()可以反向播放动画，播完即...下面的示例中有一个绿色的方形，其宽高从100变大到200，然后再重头开始，不断循环 放款中间
微信小程序实现animation动画
11-27
调用动画操作方法后要调用 step() 来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的所有动画会同时开始，一组动画完成后才会进行下一组动画。step 可以传入一个跟 wx.createAnimation() ...
微信小程序的动画效果：使用animation快速制作切换动画
03-29
作者：进击的Jary，来自授权地址 ...所以个人而言感觉跟如果习惯了用JQ去操纵DOM的开发者很不习惯。需要一个习惯的过程。 三、小程序不能引用JQ 　小程序虽然可以引用外部JS。但是我一引用就出现异
html div添加天气,web前端入门到实战：纯CSS写一个动态太阳的天气图标
weixin_42443651的博客
06-04 425
效果效果图如下实现思路div实现太阳的一条矩形光影before伪元素制作另一条光影矩形，和已有的转变90°after伪元素画个圆实现太阳样式dom结构用两个嵌套的div容器，父容器来控制图标显示的位置，子容器用来写太阳的一条光影矩形的样式。css样式1、定义父容器样式，控制图标位置，顺便给整个页面加个背景色，方便预览body{background: rgba(73, 74, 95, 1);}.co...
长方形面积+鼠标跟随动画
tiantianzs的博客
05-05 392
title: 长方形面积 + 鼠标跟随动画 tags: codepen category: 前端开发 参考内容 https://www.bilibili.com/video/BV1Fy4y1g71h?spm_id_from=333.337.top_right_bar_window_history.content.click https://codepen.io/tiansztiansz/pen/BaJEBxK 效果演示 https://codepen.io/tiansztiansz/pen/QWQbYpg.
threejs地球、星空、世界轮廓绘制、飞线、坐标涟漪 、旋转动画（下篇）
星宇大前端
01-07 6253
threejs 漂亮地球下篇，主要讲涟漪动画、飞线和渲染动画
用动画做出一个正方体并且3d旋转，详解
manognlink的博客
11-29 828
使用HTML+CSS设置一个3d旋转的盒子
同一个如何同时执行两段animation动画
06-09
如果您想要同时执行两个animation动画，可以使用CSS3的animation属性来实现。您可以设置多个animation动画，并将它们应用于同一个元素，这样它们就会同时执行。 例如，下面的代码将同时执行两个animation动画： ``...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值