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使用
随机推荐
- CSS之浮动元素
<html> <head> <meta charset="utf-8"> <title></title> <sty ...
- ADB Usage Complete / ADB 用法大全
ADB,即 Android Debug Bridge,它是 Android 开发/测试人员不可替代的强大工具,也是 Android 设备玩家的好玩具. 持续更新中,欢迎提 PR 和 Issue 补充指 ...
- Windows Install Twisted 安装Twisted
1.下载twisted exe https://twistedmatrix.com/Releases/Twisted/15.4/ (注意最新版16.x没有适用于windows的exe,只能用旧版) 2 ...
- maxItemsInObjectGraph解释
maxItemsInObjectGraph:一个整数,指定要序列化或反序列化的最大项数,可以限制对象图中要序列化的项数.默认的就是65535,当客户端与WebService之间传递的是对象要序列化的个 ...
- 安装linux mint 18.3 后要做的
使用u盘安装的linux mint 18.3,安装过程基本顺利 发现在安装过程中使用中文语言的话会使得下载附加软件的速度快很多 安装完成之后要做的事情有: 1.字体 默认的楷体字比较难看,在软件管理器 ...
- [ TJOI 2007 ] 线段
\(\\\) \(Description\) 一个\(N\times N\) 的网格,每行有一段要必走,求从\((1,1)\)到\((N,N)\)的最短路长度. \(N\le 2\times10^4\ ...
- pycharm永久激活（转载）
转载自CSDN--http://blog.csdn.net/mr_hhh/article/details/79062747 2018-02-2417:30:52 今天再补充一个教程,关于pycharm ...
- Android基础TOP6_2:Gallery +Image完成画廊
Activity: <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmln ...
- 一次“MySQL server has gone away”故障及其解决
1,问题现象 某次测试发现,程序失去响应.由于程序集成了EurekaLog组件,弹出了错误框.查看其给出的Call Stack信息,发现没有发生线程死锁(DeadLock=0;),问题在于 Wait ...
- Eclipse 编译java文件后出错 左树无红叉
问题描述: 今天遇见让人郁闷的问题,在项目工程中java文件编译通不过,eclipse在java文件中标示错误,但是却不不能在navigator的视图中像平常一样出现小红叉.通过clean proje ...