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使用
随机推荐
- 数学 Codeforces Round #219 (Div. 2) B. Making Sequences is Fun
题目传送门 /* 数学:这题一直WA在13组上,看了数据才知道是计算cost时超long long了 另外不足一个区间的直接计算个数就可以了 */ #include <cstdio> #i ...
- Storm编程入门API系列之Storm的可靠性的ACK消息确认机制
概念,见博客 Storm概念学习系列之storm的可靠性 什么业务场景需要storm可靠性的ACK确认机制? 答:想要保住数据不丢,或者保住数据总是被处理.即若没被处理的,得让我们知道. publi ...
- sublime text 3 使用技巧
一.下载 官网下载合适的版本(http://www.sublimetext.com/3) 二.破解 执行 Help->Enter license 粘贴你的License代码 ----- BEGI ...
- js实现浮动框跟随页面滚动，最后停留在原来位置
左边悬浮的二维码会跟随页面向上或者向下滚动,最后停留在原来的位置. <div style="background:red; width:1000px; height:7000px; m ...
- postgreSQL在Centos6下编译安装
1.准备安装源 下载地址:https://www.postgresql.org/ftp/source/ 下载并解压. 2.软件编译安装 配置.检查安装环境 ./configure --prefix=/ ...
- VMware vCenter 6.5 安装及群集配置介绍
一.介绍 VMware vCenter Server 提供了一个可伸缩.可扩展的平台,为虚拟化管理奠定了基础.可集中管理VMware vSphere环境,与其他管理平台相比,极大地提高了 IT 管理员 ...
- spring用来干什么，解决的问题
// 1. 实体类 class User{ } //2. dao class UserDao{ .. 访问db } //3. service class UserService{ UserDao ...
- 00Enterprise Resource Planning
Enterprise Resource Planning 企业资源计划即 ERP (Enterprise Resource Planning),由美国 Gartner Group 公司 ...
- C++输入输出重载
#include <iostream> using namespace std; class Complex2 { public: Complex2(, ) :_x(x), _y(y){ ...
- The content of element type "resultMap" must match ...
mybatis中的mapper文件错误 ①错误原因: <resultMap>标签中需要按照一下顺序编写: <id> <result> <association ...