css动画-模拟正余弦曲线
2018-06-24 01:54:26来源:未知 阅读 ()
今天就写一个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,一个正余弦曲线出来啦 @^-^@
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- DIV居中的经典方法 2020-06-13
- CSS中的float和margin的混合使用 2020-06-11
- Html/css 列表项 区分列表首尾 2020-06-11
- css与javascript重难点,学前端,基础不好一切白费! 2020-06-11
- ie8下透明度处理 2020-06-11
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash