Animations动画和Keyframes关键帧
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<style>
body {
display: flex; /* 使用Flex布局 */
justify-content: center; /* 水平居中 */
}
.ball {
width: 100px;
height: 100px;
border-radius: 50%; /* 把正方形变成圆形*/
background-color: #FF5722; /* 设置颜色为橙色*/
animation: bounce 0.5s cubic-bezier(.5,0.05,1,.5);
animation-direction: alternate; //alternate(2,4,6)反向动画
animation-iteration-count: infinite;
}
@keyframes bounce {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, 200px, 0) rotateX(45deg); }
}
</style>
<body>
<div class="ball"></div>
<script>
</script>
</body>
</html>
Animations动画和Keyframes关键帧的更多相关文章
- 关键帧动画：@keyframes
关键帧动画:@keyframes: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...
- iOS Programming Controlling Animations 动画
iOS Programming Controlling Animations 动画 The word "animation" is derived from a Latin wor ...
- AngularJS–Animations(动画)
点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 在AngularJS 1.3 中,给一些指令(eg: ngRepeat,ngSw ...
- css3动画（@keyframes和animation的用法）
animation基本用法是: animation: name keeping-time animate-function delay times iteration final; 第一个参数:nam ...
- css动画 aniamtion & @keyframes
MDN-animation文档 animation: [name] [duration] [timing-function] [delay] [iteration-cont] [direction] ...
- android 之 animations 动画
android 提供的了两种机制你可以用来创建简单的动画:tweedned animation(渐变动画) 和 frame-by-frame animation(逐帧动画)(有道翻译的,汗!!!) . ...
- Android Animations动画使用详解
一.动画类型 Android的animation由四种类型组成:alpha.scale.translate.rotate XML配置文件中 alpha 渐变透明度动画效果 scale 渐变尺寸伸缩动画 ...
- CSS3 创建简单的网页动画 – 实现弹跳球动
基础准备对于这个实现,我们需要一个简单的 div ,并且样式类名为 ball : HTML 代码: <div class="ball"></div> 我们将 ...
- css3动画3
1.transition过渡动画 2.@keyframes关键帧动画,配合transform.animation使用
随机推荐
- headroom.js使用
为页面顶部多留些空间.在不需要页头时将其隐藏 需要添加的css代码 .headroom { transition: transform 200ms linear; } .headroom--pinne ...
- Java编程思想读书笔记_第6章
如何创建一个包: 比如创建一个包名为com.huawei 则在一个目录下如(d:\java)创建目录com/huawei 然后在huawei目录下创建一个文件Assist.java package c ...
- 计算机二级C语言冲刺笔记。
2018-03-0618:32:26 风萧萧兮易水寒,壮士一去...... 四级依旧没过,计算机二级接踵而至, default语句在switch语句中可以省略,所以B错误:switch语句中并非每个c ...
- 关于Python多线程condition变量的应用
''' 所谓条件变量,即这种机制是在满足了特定的条件后,线程才可以访问相关的数据. 它使用Condition类来完成,由于它也可以像锁机制那样用,所以它也有acquire方法和release方法,而且 ...
- Selenium学习第二天，了解Selenium工作模式与学习Selenium需要具备的知识与工具。
Selenium学习网站: 1.http://www.ltesting.net/ceshi/open/kygncsgj/selenium/2014/0408/207237.html——好像是对API的 ...
- Android学习笔记（四） JAVA基础知识回顾
一.接口 1)接口中定义的方法都是public权限,并且默认为public,而不是default. 2)接口的实现(implements)是特殊的继承,类似于父类子类的关系,可以向上转型(非常重要). ...
- grunt 全局使用
grunt 不同地方使用时需要将插件下载的当前文件夹,这是因为查找模块时是当前路径,这会造成多个工程使用时会需要下载多次,而这些东西又不应该存在于工程之中,所以应该将所有模块全局安装,然后在工程下面只 ...
- form表单清空、重置
form_live为formID <input type="button" value="重置" onclick="$('#form_live' ...
- HDU_3732_(多重背包)
Ahui Writes Word Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others) ...
- Vue2.0 —生命周期和钩子函数
vue生命周期简介 咱们从上图可以很明显的看出现在vue2.0都包括了哪些生命周期的函数了. 生命周期探究 对于执行顺序和什么时候执行,看上面两个图基本有个了解了.下面我们将结合代码去看看钩子函数的执 ...