animation动画--跳动

给大家分享一个小案例，让静态的一行字与一个球变为动态跳动
第一个文字动画

<title></title><style>.box{width: 600px;height: 150px;margin: auto;margin-top: 300px;background-color: deepskyblue;}.box p{display: inline-block;font-size: 50px;text-align: center;margin-left: 20px;animation: dong 2s infinite; /*设置动画效果，dong与后面的动画设置相连接 完整运动时间为两秒，一直循环*/}/*选择第二个p标签*/.box p:nth-of-type(2){animation-delay: 0.5s;}.box p:nth-of-type(3){animation-delay: 0.75s;}.box p:nth-of-type(4){animation-delay: 1s;}.box p:nth-of-type(5){animation-delay: 1.25s;}.box p:nth-of-type(6){animation-delay: 1.5s;}.box p:nth-of-type(7){animation-delay: 1.75s;}.box p:nth-of-type(8){animation-delay: 2s;}/*动画设置*/@keyframes dong{0%{}50%{transform: translateY(-50px)}100%{}}</style></head><body><div><div class="box"><p>正</p><p>在</p><p>加</p><p>载</p><p>中</p><p>.</p><p>.</p><p>.</p></div></div></body>

第二个小球跳动动画

<title></title><style>.div{margin: 0 auto;width: 800px;height: 700px;margin-top: 100px;}.box1{width: 80px;height: 80px;border-radius: 50%;background-image: linear-gradient(blue,black);/*给小球添加一个颜色渐变*/margin-top: 500px;margin-left: 400px;animation:dong 2s infinite;}.box2{width: 80px;height: 10px;border-radius: 50%;background-color: cadetblue;margin-left: 400px;}@keyframes dong{0%{} 50%{ transform: translateY(-300px);}100%{}}</style></head><body><div class="div"><div class="box1"></div><div class="box2"></div></div> </body>

animation动画--跳动相关推荐

【Android 基础】Animation 动画介绍和实现
转载自:http://www.cnblogs.com/yc-755909659/p/4290114.html 1.Animation 动画类型 Android的animation由四种类型组成: XM ...
css animation动画完成后隐藏_如何使用CSS实现旋转地球动画效果
旋转地球功能实现主要借助于CSS动画效果完成,通过移动地图背景图层,云彩图层等,在视觉上呈现出旋转地球效果.旋转地球最终实现效果如下图所示: 旋转地球效果展示设计思路与核心技术旋转地球效果实现主要 ...
web 移动端 ios 浏览器中 animation 动画异常
关键字:animation,ios,移动端,异常解决问题的办法:页面dom加载完毕时延时给dom加上动画类名.即在vue的mounted钩子中用定时器延时100ms左右给需要动画的dom加上类名. ...
CSS3 Animation动画的十二原则
[本文系外部转贴,原文地址:https://cssanimation.rocks/principles/] 编者注:鉴于KM不能插入iframe直接演示效果,只能给链接跳转页面看代码了:(Animat ...
python【Matlibplot绘图库】Animation动画（真の能看懂~！）
文章目录 1 代码 2 效果 3 解释 1 代码 from matplotlib import pyplot as plt from matplotlib import animation impor ...
【Flutter】Animation 动画 ( AnimatedBuilder 动画使用流程 | 创建动画控制器 | 创建动画 | 创建动画作用的组件 | 关联动画与组件 | 动画执行 )
文章目录 ◯.AnimatedBuilder 引入一.创建动画控制器二.创建动画三.创建动画作用的组件四.创建 AnimatedBuilder 关联动画与组件五.动画运行六.完整代码示例 ...
【Flutter】Animation 动画 ( AnimatedWidget 动画使用流程 | 创建动画控制器 | 创建动画 | 创建 AnimatedWidget 动画组件 | 动画运行 )
文章目录 ◯.AnimatedWidget 组件引入一.创建 AnimatedWidget 动画组件二.创建动画控制器三.创建动画四.动画运行五.完整代码示例六.相关资源 Animated ...
【Flutter】Animation 动画 ( Flutter 动画基本流程 | 创建动画控制器 | 创建动画 | 设置值监听器 | 设置状态监听器 | 布局中使用动画值 | 动画运行 )
文章目录一.创建动画控制器二.创建动画三.设置值监听器四.设置状态监听器五.布局中使用动画值六.动画运行七.完整代码示例八.相关资源 Flutter 动画基本流程 : ① 创建动画控制 ...
【Flutter】Animation 动画 ( Flutter 动画的核心类 | Animation | CurvedAnimation | AnimationController | Tween )
文章目录一.动画的核心类 Animation 二.动画的核心类 CurvedAnimation 三.动画的核心类 AnimationController 四.动画的核心类 Tween 五.相关资源 ...
【Flutter】Animation 动画 ( Flutter 动画类型 | Flutter 动画的核心类 )
文章目录一.Flutter 动画类型二.Flutter 动画的核心类三.相关资源 Flutter Animation 动画 : Flutter 动画类型为 Widget 组件添加动画为动画添 ...

animation动画--跳动

animation动画--跳动相关推荐

最新文章

热门文章