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，一个正余弦曲线出来啦 @^-^@

css动画-模拟正余弦曲线相关推荐

html和css如何制作小球,[网页设计]使用CSS3动画模拟实现小球自由落体效果
[网页设计]使用CSS3动画模拟实现小球自由落体效果 0 2015-07-20 14:00:03 使用纯CSS代码模拟实现小球自由落体效果: html代码如下:1 2 CSS样式代码:/*ball样式 ...
使用HTML+CSS+JS模拟比赛晋级的动画功能
使用HTML+CSS+JS模拟比赛晋级的动画功能 1.需求描述 2.代码实现 3.效果演示系统:Win10 Chrome:106.0.5249.119 演示视频:[英雄联盟]S12全球总决赛冠军预测 ...
css3 3d 太阳系,使用css3的动画模拟太阳系恒星公转
原标题:使用css3的动画模拟太阳系恒星公转本文介绍使用css3的animation画一个太阳系恒星公转的动画,再加以改进,讨论如何画椭圆的运行轨迹.然后分析京东和人人网使用animation的实际 ...
html和css制作动漫岛,CSS动画
transition 早期要实现动画效果,都是依赖于JavaScript或Flash来完成.但在CSS3中新增加了一个新的模块transition,它可以通过一些简单的CSS事件来触发元素的外观变化, ...
谈谈一些有趣的CSS题目（十四）-- 纯 CSS 方式实现 CSS 动画的暂停与播放！
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
[京东实践干货]手把手教你实现「京喜工厂」的CSS动画效果
0 契机与背景今年Q1(2020年第一季度)参与了京喜事业部「京喜工厂」业务的前端开发.用户可以通过「京喜工厂」参与口罩.抽纸.大米等商品的"在线生产",既能趣味造物,又能免费领 ...
css动画和js动画比较！
原文地址:http://css-tricks.com/myth-busting-css-animations-vs-javascript/ 译文地址:https://github.com/classi ...
CSS 动画相关属性动态实例大全（82种），2023年祝福第二弹（送你一只守护兔）(下），守护兔源代码免费下载
2023年春节祝福第二弹--送你一只守护兔(下) CSS 动画相关属性动态实例大全(82种).守护兔源代码免费下载本文目录: 五.CSS3 动画相关属性实例大全 (1).CSS3的动画基本属性 (2 ...
人体运动轨迹的人工智能动画模拟
作为博客文章的处女秀,我将简要介绍一下我的研究领域.从现在起,我将之命名为"人体运动轨迹的人工智能动画模拟"(Physically-Based Animation ,下文简称PBA ...

css动画-模拟正余弦曲线

css动画-模拟正余弦曲线相关推荐

最新文章

热门文章