css动画-模拟正余弦曲线

今天就写一个css3抛物线的动画吧= =

从左到右的抛物线动画,我们就暂且把动作分为匀速向右运动和变速的上下运动。

水平匀速运动我们可以利用 translateX(x):定义 2D 转换,沿着 X 轴移动元素;以及linear:动画从头到尾的速度是相同的  这两个属性值来实现;

上下的匀变速运动可以利用translateY(y):定义 2D 转换,沿着 Y 轴移动元素;以及ease-in-out:动画以低速开始和结束。

 

1.html

1 <div id="container">
2       <div class="demobox">
3            <div class="demo"></div>
4       </div>
5       <div class="demobox">
6             <div class="demo"></div>
7       </div>
8 </div>

把demobox的div做向右的匀速的运动,里面demo的div做上下的变速的运动。

2.css

 1 #container {
 2     height:110px;
 3     font-size:0;
 4     width:140px;
 5 }
 6 .demobox {
 7     float:right;
 8     width:5px;
 9     height:5px;
10     animation:myfirst1 linear 5s infinite;
11     -webkit-animation:myfirst1 linear 5s infinite; 
12 }
13 .demo {
14     width:6px;
15     height:6px;
16     border-radius:3px;
17     background:#90e4e9;
18     animation:myfirst2 ease-in-out 1s infinite alternate;
19     -webkit-animation:myfirst2 ease-in-out 1s infinite alternate;  /*Safari and Chrome */
20 }
21 
22 .demobox:nth-of-type(1) .demo:nth-of-type(1){
23     animation-delay:0s;
24 }
25 .demobox:nth-of-type(2) .demo:nth-of-type(1){
26    animation-delay:0.03s;
27 }
28 
29 @keyframes myfirst1
30 {
31     from {
32         transform:translateX(0px);
33         -webkit-transform:translateX(0px);
34     }
35     to {
36         transform:translateX(1000px);
37         -webkit-transform:translateX(1000px);
38     }
39     
40 }
41 
42 @-webkit-keyframes myfirst1 /* Safari and Chrome */
43 {
44     from {
45         transform:translateX(0px);
46         -webkit-transform:translateX(0px);
47     }
48     to {
49         transform:translateX(1000px);
50         -webkit-transform:translateX(1000px);
51     }
52 }
53 @keyframes myfirst2
54 {
55     0% {
56         transform:translateY(0px);
57         -webkit-transform:translateY(0px);
58     }
59     50% {
60         transform:translateY(100px);
61         -webkit-transform:translateY(100px);
62     }
63     100% {
64         transform:translateY(0px);
65         -webkit-transform:translateY(0px);
66     }
67 }
68 
69 @-webkit-keyframes myfirst2 /* Safari and Chrome */
70 {
71     0% {
72         transform:translateY(0px);
73         -webkit-transform:translateY(0px);
74     }
75     50% {
76         transform:translateY(100px);
77         -webkit-transform:translateY(100px);
78     }
79     100% {
80         transform:translateY(0px);
81         -webkit-transform:translateY(0px);
82     }
83 }

ok,一个正余弦曲线出来啦 @^-^@

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369074.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

UVA-11549 Calculator Conundrum

InputThe first line of the input contains an integer t (1 ≤ t ≤ 200), the number of test cases. Each test casecontains two integers n (1 ≤ n ≤ 9) and k (0 ≤ k < 10 n ) where n is the number of digits this calculatorcan display k is the starting num…

java 当前类_Java获取当前类名的两种方法

适用于非静态方法&#xff1a;this.getClass().getName()适用于静态方法&#xff1a;Thread.currentThread().getStackTrace()[1].getClassName()获取类名&#xff1a;1、在类的实例中可使用this.getClass().getName();但在static method中不能使用该方法&#xff1b;2、在stat…

具有内部类构造函数参数的Java Reflection奇数

关于Java内部类 Java允许成员类&#xff08;在其他类内定义的类&#xff09;&#xff0c;局部类&#xff08;在语句块内定义的类&#xff09;和匿名类&#xff08;无名称的类&#xff09;&#xff1a; class Outer {Object anonymous new Object(){}; // this is an anonymou…

HDOJ 1012-1020

最近感冒了&#xff0c;有点小咳嗽&#xff0c;做题速度比较慢&#xff0c;本以为这周会做的比较少&#xff0c;没想到全是水题。。。我做的也蛮开心的....对自己无语HDOJ 1012这个题目蛮简单&#xff0c;就是输出格式比较烦&#xff0c;处理好格式基本就没问题了HDOJ 1013这个…

静态页面如何实现 include 引入公用代码

一直以来&#xff0c;我司的前端都是用 php 的 include 函数来实现引入 header 、footer 这些公用代码的&#xff0c;就像下面这样&#xff1a; <!-- index.php --><!DOCTYPE html><html lang"en"><head><meta charset"UTF-8"&…

java list 循环赋值_Java List集合的坑(add方法报空指针,循环赋值时list已保存的值会改变)...

先看空指针异常&#xff1a;ListmovieInfos null;这样创建时&#xff0c;list指向为空&#xff0c;修改方法&#xff1a;ListmovieInfos new ArrayList();再看list循环赋值的问题&#xff1a;问题描述&#xff1a;for (i0;i<10;i){movieInfoSum.movieId (int)recommendatio…

ros使用时的注意事项技巧

1.rosrun package-name executable-name 比如 rosrun turtlesim turtlesim_node 2.一旦启动roscore后,便可以运行ROS程序了。ROS程序的运行实例被称为节点(node)&#xff0c;roscore叫做节点管理器 3.查看节点列表rosnode list 4.需要注意节点名并不一定与对应可执行文件名称相…

分享几道经典的javascript面试题

这几道题目还是有一点意思的&#xff0c;大家可以研究一番&#xff0c;对自己的技能提升绝对有帮助。 1、调用过程中输出的内容是什么 function fun(n, o) {console.log(o);return {fun : function(m) {return fun(m, n);}} }var a fun(0);a.fun(1);a.fun(2);a.fun(3);var…

Rete之外的生活– RIP Rete 2013 :)

我只是对我的新算法进行最后的修改。 它合并了Leaps &#xff0c; 面向集合的Match和Left / Right取消链接的概念 &#xff0c;以及我自己的一些想法。 该代码已提交&#xff0c;但我正在积累工作并编写更多测试。 我将在一周左右的时间内写一个完整的博客&#xff0c;详细介绍…

Ubuntu+vscode打不开

前沿: vscode链接参考链接 问题: 之前在Ubuntu上安装chrome, 结果chrome没装成功, 还把vscode给qiu坏了, 貌似是当时安装chrome时提示要升级一个包. 后来发现当时是修改了libnss这个包的版本: 解决方法: # 将libnss给downgrade一下就OK了. sudo apt install libnss32:3.21-1ubu…

java线程死锁代码_java线程死锁代码示例

死锁是操作系统层面的一个错误&#xff0c;是进程死锁的简称&#xff0c;最早在 1965 年由 Dijkstra 在研究银行家算法时提出的&#xff0c;它是计算机操作系统乃至整个并发程序设计领域最难处理的问题之一。事实上&#xff0c;计算机世界有很多事情需要多线程方式去解决&#…

【2018】判定三角形

Time Limit: 3 second Memory Limit: 2 MB 输入三个正整数&#xff0c;若能用这三个数作为边长组成三角形&#xff0c;则判断三角形的形状&#xff0c;如果是等边三角形就输出“DB”&#xff0c;如果是等腰三角形就输出“DY”&#xff0c;否则就输出“YB”&#xff1b;如果不能…

纯css隐藏移动端滚动条解决方案(ios上流畅滑动)

html代码展示&#xff08;直接复制代码保存至本地文件运行即可&#xff09;&#xff1a; <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, init…

Spring Data Solr教程:配置

在我的Spring Data Solr教程的上一部分中&#xff0c;我们了解到Solr提供了一个类似REST的HTTP API&#xff0c;该API可用于向Solr索引添加信息并针对索引数据执行查询。 问题在于&#xff0c;在开发环境中运行单独的Solr实例有点麻烦。 但是&#xff0c;并非所有希望都因此而…

JavaAppArguments.java

思路&#xff1a;定义一个String类型的变量&#xff0c;用来接收每次args读取到的值&#xff0c;然后把String转换为int,然后计算输出sum。 流程图&#xff1a; 源代码&#xff1a; 截图&#xff1a; 转载于:https://www.cnblogs.com/xiaohaigege666/p/7635907.html

webpack 引入jquery和第三方jquery插件

1、引入jquery jQuery 直接在 html 中引入&#xff0c;然后在 webpack 中把它配置为全局即可。 index.html: <!DOCTYPE html><html><head><meta charset"UTF-8"><title><% htmlWebpackPlugin.options.title %></title>&…

Spring Data Solr教程:CRUD(差不多)

在我的Spring Data Solr教程的上一部分中&#xff0c;我们学习了如何配置Spring Data Solr。 现在该迈出一步&#xff0c;了解我们如何管理Solr实例中存储的信息。 此博客文章描述了我们如何向Solr索引添加新文档&#xff0c;如何更新现有文档的信息以及如何从索引中删除文档。…

数独项目--关键代码展示:

关键代码展示&#xff1a; //判断该数字在当前数独是否符合要求 int judge(int num, int ple){ int x ple / 9; //x表示数字的纵坐标 int y ple % 9; //y表示数字的横坐标 int qulx x / 3; int quey y / 3; //que表示9宫格的区域 for (int i 0; i < 9; i){ if (…

java svn 版本号_eclipse中的Java文件自动根据svn版本号生成注释

经常在java代码中看到以下的注释($Rev: $Date),是不是很酷,怎么生成的呢&#xff1f;/*** A FilterChain is an object provided by the servlet container to the developer* giving a view into the invocation chain of a filtered request for a resource. Filters* use th…

〖Mysql〗-- python操作数据库

【数据库进阶】 python 操作MYSQL数据库主要有两种方式&#xff1a;    使用原生模块&#xff1a;pymysql  ORM框架&#xff1a;SQLAchemy 一、pymysql 1.1下载安装模块 12第一种&#xff1a;cmd下&#xff1a;执行命令下载安装&#xff1a;pip3 install pymysql第二种&…