css动画-模拟正余弦曲线
今天就写一个css3抛物线的动画吧= =
从左到右的抛物线动画,我们就暂且把动作分为匀速向右运动和变速的上下运动。
水平匀速运动我们可以利用 translateX(x):定义 2D 转换,沿着 X 轴移动元素;以及linear:动画从头到尾的速度是相同的 这两个属性值来实现;
上下的匀变速运动可以利用translateY(y):定义 2D 转换,沿着 Y 轴移动元素;以及ease-in-out:动画以低速开始和结束。
1.html
<div id="container">
<div class="demobox">
<div class="demo"></div>
</div>
<div class="demobox">
<div class="demo"></div>
</div>
</div>
把demobox的div做向右的匀速的运动,里面demo的div做上下的变速的运动。
2.css
#container {
height:110px;
font-size:;
width:140px;
}
.demobox {
float:right;
width:5px;
height:5px;
animation:myfirst1 linear 5s infinite;
-webkit-animation:myfirst1 linear 5s infinite;
}
.demo {
width:6px;
height:6px;
border-radius:3px;
background:#90e4e9;
animation:myfirst2 ease-in-out 1s infinite alternate;
-webkit-animation:myfirst2 ease-in-out 1s infinite alternate; /*Safari and Chrome */
} .demobox:nth-of-type(1) .demo:nth-of-type(1){
animation-delay:0s;
}
.demobox:nth-of-type(2) .demo:nth-of-type(1){
animation-delay:0.03s;
} @keyframes myfirst1
{
from {
transform:translateX(0px);
-webkit-transform:translateX(0px);
}
to {
transform:translateX(1000px);
-webkit-transform:translateX(1000px);
} } @-webkit-keyframes myfirst1 /* Safari and Chrome */
{
from {
transform:translateX(0px);
-webkit-transform:translateX(0px);
}
to {
transform:translateX(1000px);
-webkit-transform:translateX(1000px);
}
}
@keyframes myfirst2
{
0% {
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
50% {
transform:translateY(100px);
-webkit-transform:translateY(100px);
}
100% {
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
} @-webkit-keyframes myfirst2 /* Safari and Chrome */
{
0% {
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
50% {
transform:translateY(100px);
-webkit-transform:translateY(100px);
}
100% {
transform:translateY(0px);
-webkit-transform:translateY(0px);
}
}
ok,一个正余弦曲线出来啦 @^-^@
css动画-模拟正余弦曲线的更多相关文章
- 15个来自 CodePen 的酷炫 CSS 动画效果【下篇】
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
- 深入浅出 CSS 动画
本文将比较全面细致的梳理一下 CSS 动画的方方面面,针对每个属性用法的讲解及进阶用法的示意,希望能成为一个比较好的从入门到进阶的教程. CSS 动画介绍及语法 首先,我们来简单介绍一下 CSS 动画 ...
- 梅须逊雪三分白,雪却输梅一段香——CSS动画与JavaScript动画
CSS动画并不是绝对比JavaScript动画性能更优越,开源动画库Velocity.js等就展现了强劲的性能. 一.两者的主要区别 先开门见山的说说两者之间的区别. 1)CSS动画: 基于CSS的动 ...
- Css动画形式弹出遮罩层,内容区上下左右居中于不定宽高的容器中
<!DOCTYPE html> <html> <head> </head> <body id="body"> <! ...
- CSS动画与GPU
写在前面 满世界的动画性能优化技巧,例如: 只允许改变transform.opacity,其它属性不要动,避免重新计算布局(reflow) 对动画元素应用transform: translate3d( ...
- 谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 你所不知道的 CSS 动画技巧与细节
怕标题起的有点大,下述技巧如果你已经掌握了看看就好,欢迎斧正,本文希望通过介绍一些 CSS 不太常用的技巧,辅以一些实践,让读者可以更加深入的理解掌握 CSS 动画. 废话少说,直接进入正题,本文提到 ...
- 这样使用 GPU 渲染 CSS 动画(转)
大多数人知道现代网络浏览器使用GPU来渲染部分网页,特别是具有动画的部分. 例如,使用transform属性的CSS动画看起来比使用left和top属性的动画更平滑. 但是如果你问,“我如何从GPU获 ...
- CSS动画详解及transform、transition、translate的区别
刚看完一节慕课网的css动画,在此总结下 1. 先说下 transform.transition.translate的区别 transform 和 transition是css的2个属性,transl ...
随机推荐
- css中的定位属性position(转)
css中的定位属性position 同样的也是上课的时候发现学生难以理解的一些问题拿出来记录一下,希望帮助初学者. 在css中定位属性position的运用在页面中是很常用的,特别是一些结合js来 ...
- 第三方登录---微信(使用laravel插件)
转发: https://www.jianshu.com/p/7be757655814 TP框架: http://www.php.cn/php-weizijiaocheng-363509.html
- Spark 中的 RPC 的几个类
Spark 中 RPC 部分的涉及了几个类,有点晕,在此记录一下 1. RpcEndpoint: RPC的一个端点.给定了相应消息的触发函数.保证 `onStart`, `receive` and ...
- bzoj 3722: PA2014 Final Budowa
3722: PA2014 Final Budowa Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 303 Solved: 108[Submit][St ...
- 清北刷题冲刺 10-28 p.m
水题(贪心) (water) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK出了道水题. 这个水题是这样的:有两副牌,每副牌都有n张. 对于第一副牌的每 ...
- 洛谷P1092 虫食算
P1092 虫食算 题目描述 所谓虫食算,就是原先的算式中有一部分被虫子啃掉了,需要我们根据剩下的数字来判定被啃掉的字母.来看一个简单的例子: http://paste.ubuntu.com/2544 ...
- bzoj4435: [Cerc2015]Juice Junctions(最小割树+hash)
传送门 首先最大流等于最小割,那么可以转化为最小割树来做(不知道什么是最小割树的可以看看这题->这里) 具体的做法似乎是$hash[i][j]$表示最小割为$i$时点$j$是否与$S$连通 然后 ...
- iOS回顾笔记( 01 )-- XIB和纯代码创建应用的对比
header{font-size:1em;padding-top:1.5em;padding-bottom:1.5em} .markdown-body{overflow:hidden} .markdo ...
- EL表达式的语法介绍及九大隐含对象
一. 简介 > JSP表达式 <%= %> 用于向页面中输出一个对象. > 到JSP2.0时,在我们的页面中不允许出现 JSP表达式和 脚本片段. > 使用EL表达式来代 ...
- vue散碎知识点学习
1. vue散碎知识点学习 1.1. 特点 数据渲染/数据同步 组件化/模块化 其他功能路由,ajax,数据流 1.2. Vue.js学习资源 vuejs中文官网:http://cn.vuejs.or ...