论坛交流
首页| 办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库 |  Asp.net  | Flash AS
当前位置 > 文字教程 > div+css教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准，xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

div+CSS教程：水面上会浮动的水母

文章类别：div+css | 发表日期:2012-6-6 12:00:08

div+CSS教程：水面上会浮动的水母


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

@-moz-keyframes jellyfishSwimming{
   0%{-moz-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
   20%{-moz-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
   50%{-moz-transform:translate(-2px,-1px) rotate(-3deg) scale(0.8);}
   70%{-moz-transform:translate(-1px,-3px) rotate(-6deg) scale(0.8);}
   100%{-moz-transform:translate(0px,0px) rotate(-4deg) scale(0.8);}
}
 
@-moz-keyframes jellyfish_headChange{
   0%{-moz-transform:scale(1);}
   5%{-moz-transform:scale(1.1,0.95);}
   20%{-moz-transform:scale(0.95,1.1);}
   50%{-moz-transform:scale(1);}
   55%{-moz-transform:scale(1.1,0.95);}
   70%{-moz-transform:scale(0.95,1.1);}
   100%{-moz-transform:scale(1);}
}
 
@-moz-keyframes jellyfish_tailChange{
   0%{-moz-transform:scale(0.8);}
   5%{-moz-transform:scale(0.9,0.75);}
   20%{-moz-transform:scale(0.7,1);}
   50%{-moz-transform:scale(0.8);}
   55%{-moz-transform:scale(0.9,0.75);}
   70%{-moz-transform:scale(0.7,1);}
   100%{-moz-transform:scale(0.8);}
}

    jellyfishSwimming为整体的游水，变换侧移位置，同时水母是圆的，会摇晃；
    jellyfish_headChange为水母头部的变化，个人觉得水母是要吸一口水，然后吐出来，利用反作用力才游的，所以0-5的时候是吸水变宽变 扁，然后5-20吐水变瘦变长，20-50变为正常，然后50-55再吸水变宽变扁，55-70吐水变瘦变长，70-100变为正常;
    jellyfish_tailChange同jellyfish_headChange，其实可以用同一个，只不过我觉得尾巴相对于头部有点大了，就再缩小些，而且吐水的时候，尾巴可以吐得长些;

超萌水母
    静态的水母已经很可爱了，然而会游泳的水母，那是一定很可爱哦！我们一起看看水母游水的动画代码：
视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058