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 ...
随机推荐
- C++中队列的建立和操作
什么是队列结构 队列结构是从数据运算来分类的,也就是说队列结构具有特殊的运算规则.而从数据的逻辑结构来看,队列结构其实就是一种线性结构.如果从数据的存储结构来进一步划分,队列结构可以分成两类. 顺序队 ...
- ubuntu-12.04.5安装cacti笔记
坑啊,磨磨蹭蹭按了一个星期.按了3个版本. 第一次:cacti-0.8.7e.tar.gz 安装完之后,Host: Localhost->Memory Usage...四张图始终出不了.点击进去 ...
- redis系列:通过共同好友案例学习set命令
前言 这一篇文章将讲述Redis中的set类型命令,同样也是通过demo来讲述,其他部分这里就不在赘述了. 项目Github地址:https://github.com/rainbowda/learnW ...
- 关于PHP在企业级开发领域的访谈——企业级开发,PHP准备好了吗?
关于PHP在企业级开发领域的访谈 ——企业级开发,PHP准备好了吗? 转自:http://www.nowamagic.net/librarys/veda/detail/256 虽然PHP是Web应用开 ...
- C# 写 LeetCode easy #20 Valid Parentheses
20.Valid Parentheses Given a string containing just the characters '(', ')', '{', '}', '[' and ']', ...
- C# Object reference not set to an instance of an object.
一.问题 Object reference not set to an instance of an object. (你调用的对象是空的) 二.解决问题 在使用 c# 的查询时,先筛选后在关联其他表 ...
- Linux基础学习(一)
前言:这个学习笔记是为了督促自己能够更好的学习Linux的有关知识. 参考书目 鸟哥的linux私房菜 Chapter 1:入门建议 新手建议:重点 基础一定一定要学好 那么什么是基础呢? 先从Lin ...
- mysql设置最大连接数量
mysql>mysql -uuser -ppassword(命令行登录MySQL) mysql>show variables like 'max_connections';(查可以看当前的 ...
- 清北刷题冲刺 10-28 p.m
水题(贪心) (water) Time Limit:1000ms Memory Limit:128MB 题目描述 LYK出了道水题. 这个水题是这样的:有两副牌,每副牌都有n张. 对于第一副牌的每 ...
- PCB生产企业自动化立体仓库/智能仓库库系统WMS/WCS解决方案
PCB生产企业自动化立体仓库/智能仓库库系统WMS/WCS解决方案 自动化立体仓库智能仓储系统WMS/WCS重要性调查 调查1(物流成本占总生产成本比例数据)1979年英国的第一次调查表明,在从原材料 ...