文档章节

css动画学习

d
 dewfall123
发布于 2017/07/08 17:19
字数 141
阅读 0
收藏 0

定义: animation:名字 + 时间

@keyframes 名字 {

}

: border-radius: 足够大  形状变成圆形 translateY(数值) :定义y轴转换

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:20px;
    height:20px;
    background:blue;
    border-radius: 100px;
    animation:bounce 1s ease-in-out;
}

@keyframes bounce
{
    0%   {transform:translateY(0);} 
    50%   {transform:translateY(200px);} 
    100% {transform:translateY(0);}
}
}
</style>
</head>
<body>

<div></div>


</body>
</html>

自定义调速函数: cubic-bezier(x1,y1, x2,y2)   感觉像定制出发和回归的方向

尝试效果:

<!DOCTYPE html>
<html>
<head>
<style> 
div
{
    width:20px;
    height:20px;
    background:blue;
    border-radius: 100px;
    animation:bounce 1s cubic-bezier(.62 ,0 , 1, 1);
}

@keyframes bounce
{
    0%   {transform:translateY(0);} 
    100%   {transform:translateY(300px);} 
}
}
</style>
</head>
<body>

<div></div>


</body>
</html>

 

 

 

 

 

 

 

 

© 著作权归作者所有

d
粉丝 0
博文 1
码字总数 141
作品 0
海淀
私信 提问
CSS3 创建简单的网页动画 – 实现弹跳球动

基础准备 对于这个实现,我们需要一个简单的 ,并且样式类名为 : HTML 代码: 我们将使用 Flexbox 布局,把球放到页面中间,尺寸为 100px * 100px,背景色为橘黄色。 CSS 代码: 创建 Keyfra...

IT智云编程
2018/10/29
0
0
transform,transition,animation的混合使用——结业篇

css动画的动画制作没有什么特别高深的地方,引入少量的css代码就能实现丰富多彩的页面效果是作为一个web前端开发者所推崇的,但我想要强调的是掌握并深入的理解css的基础,以及灵活的运用是做...

缘自世界
2017/05/24
0
0
程序员2600行代码写个易懂28个纯css3加载loading动画特效

     28个纯css3加载loading动画特效      css3加载loading动画特效      css3加载loading动画特效   写在前面   今日在逛论坛时看到一位程序员共享了他做的一个用纯CSS3加载...

学习web前端
2017/10/23
0
0
编写自己的代码库(css3常用动画的实现)

1.前言 在月初的时候,发了CSS3热身实战--过渡与动画(实现炫酷下拉,手风琴,无缝滚动)。js的代码库也发过两次,两篇文章。之前也写了css3的热身实战,既然热身完了,是时候开始封装css3的...

守候i
2017/12/06
0
0
学习 svg 笔记(一) SVG 动画

在前一篇学习 kityminder 中我们遇到到了动画, 为此先补充学习 svg 动画的知识, 以及相关的 kity 如何封装动画 到 kity.Animator 中的问题. 购买的图书 《SVG精髓》有一个良好的示例网站, 位...

刘军兴
2015/11/30
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Jenkins系列_插件安装及报错处理

进入Jenkins之后我们可以进行插件的安装,插件管理位于以下模块: 发现上面报了一堆错误,是因为插件的依赖没有安装好,那么这一节,就先把这些错误解决掉吧。解决完成后,也就基本会使用插件...

shzwork
今天
2
0
mysql mysql的所有查询语句和聚合函数(整理一下,忘记了可以随时看看)

查询所有字段 select * from 表名; 查询自定字段 select 字段名 from 表名; 查询指定数据 select * from 表名 where 条件; 带关键字IN的查询 select * from 表名 where 条件 [not] in(元素...

edison_kwok
昨天
9
0
解决多线程并行加载缓存问题(利用guava实现)

依赖 com.google.guava:guava:20.0 import com.google.common.cache.Cache;import com.google.common.cache.CacheBuilder;import java.util.concurrent.ExecutionException;import j......

暗中观察
昨天
3
0
利用VisualVM 内存查看

准备工作,建几个测试类。等下就是要查看这几个类里面的属性 package visualvm;public class MultiObject { private String str; private int i; MultiObject(String str...

冷基
昨天
2
0
组装一台工作游戏两用机

一、配置清单如下: 分类 项目 价格(元) 主板 华硕(ASUS)TUF Z370-PLUS GAMING II 电竞特工 Z370二代 支持9代CPU 1049 CPU 英特尔(Intel) i7 8700K 酷睿六核 盒装CPU处理器 2640 风扇 九...

mbzhong
昨天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部