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使用
随机推荐
- c++自动导出lua绑定
cocos 使用bindings-generator脚本代替了toLua++. 编写效率大大提高. 具体的在本机中分享:http://note.youdao.com/noteshare?id=0f41 ...
- [转]微信开发.Net 接入示例
本文转自:http://my.oschina.net/lcak/blog/219618 微信公众平台接口开发官方仅提供了 PHP 接入示例代码, 网上找到的.Net代码多半需要积分下载, 所以自己写了 ...
- [ CERC 2014 ] Vocabulary
\(\\\) \(Description\) 给出三个长度分别为 \(lenA,lenB,lenC\) 的三个字符串 \(A,B,C\) ,其中字符集只包括所有小写字母以及 \(?\) 号. 现在将所 ...
- leetcode692 Top K Frequent Words
思路: 堆.实现: #include <bits/stdc++.h> using namespace std; class Solution { public: inline bool c ...
- ubuntu系统中查看本机cpu和内存信息的命令和用法
https://zhidao.baidu.com/question/192966322.html 写出ubuntu linux系统中查看本机cpu和内存信息的命令和用法,以及如何解读这些命令 ubun ...
- WinRT ListView间隔变色(二)
上文说到,WinRt中,我们不能在Style的Setter使用Binding.这个问题其实从SL5之前,一直都不可以.但是,为了使用强大的Binding,人们也一直想使用各种方法来达到Binding ...
- Vue指令2：v-bind
v-bind 指令可以更新 HTML 属性: <a v-bind:href="url">...</a> 在这里 href 是参数,告知 v-bind 指令将 ...
- TWaver推智能手表挑战华为苹果
2015年的春节刚过,苹果.华为.三星就紧锣密鼓的发布了各自新产品.华为.苹果的智能手表最吸引眼球.TWaver也不甘示弱,立刻连夜推出了更像传统奢侈豪华手表的TWaver Watch,予以反击.看来 ...
- 10JDBC、CURD、XML、XPath
10JDBC.CURD.XML.XPath-2018/07/20 1.JDBC JDBC:java database connectivity JDBC与数据库驱动的关系:接口与实现的关系. JDBC ...
- UVA - 808 Bee Breeding （建立坐标系&找规律）
题目: 输入两个格子的编号a和b(a,b≤10000),求最短距离.例如,19和30的距离为5(一条最短路是19-7-6-5-15-30). 思路: 如图建立坐标系,然后看两个点的向量如果位于二四象限 ...