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使用
随机推荐
- Windows平台下Oracle 11g R2监听文件日志过大，造成客户端无法连接的问题处理
近期部署在生产环境的应用突然无法访问,查看应用日志发现无法获取数据库连接. SystemErr R Caused by: oracle.net.ns.NetException: The Network ...
- EditText(5)如何控制输入键盘的显示方式及参数表
参考: https://developer.android.com/training/keyboard-input/visibility.html 1,进入Activity时,EditText就获得焦 ...
- 重新学习Java——对象和类（一）
之前通过记笔记的方法,对于<Java核心技术>这本书的前一章进行了重新的复习,感觉效果很好,比单独看书带来了更好的复习效果,了解了很多以前不是很注意的一些细节,但是在一些自己较为熟悉的地方 ...
- Linux学习笔记之Linux命令
1. blkid 查看当前系统中所有已挂载文件系统的类型
- Java屏幕截图及剪裁
Java标准API中有个Robot类,该类可以实现屏幕截图,模拟鼠标键盘操作这些功能.这里只展示其屏幕截图. 截图的关键方法createScreenCapture(Rectangle rect) ,该 ...
- Git——github高级
分支管理 分支不是越多越好,只求一个稳定的分支,即master不要轻易去更改 对应master要有一个开发者分支,保证mater分支的稳定性 所有的功能都在开发者分支上进行 在所有功能开发后新建发布分 ...
- 【DVWA】【SQL Injection】SQL注入 Low Medium High Impossible
1.初级篇 low.php 先看源码,取得的参数直接放到sql语句中执行 if( isset( $_REQUEST[ 'Submit' ] ) ) { // Get input $id = $_REQ ...
- POJ_2255_Tree Recovery
Tree Recovery Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 12342 Accepted: 7712 De ...
- MySQL（四）DQL语言——条件查询
摘要:条件查询:条件表达式,逻辑表达式,模糊查询,like,通配符,转义字符,escape关键字,between and,in,is null,is not null,安全等于. 条件查询语法: SE ...
- 洛谷——P2158 [SDOI2008]仪仗队
P2158 [SDOI2008]仪仗队 找规律大水题嘛,如果你做过P1170 兔八哥与猎人 这题得到的规律是$a,b,c,d$,若$gcd(a-b,c-d)==1$ 那么$a,b$就能看到$c,d$ ...