浙江 杭州

4种炫酷的纯CSS3小球物理运动动特效

系统分类: 网页特效 - css3 - css3 变形 2016-03-29

人气23016

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


这是一组效果非常炫酷的纯CSS3小球物理运动动特效。这组效果动画共有4种效果:小球弹跳效果,小球绕大球旋转效果,小球碰撞效果和小球自旋动画效果。

制作方法

小球物理运动

HTML结构

这组小球动画特效的HTML结构都基本相似:小球使用一个div.wrap作为包裹容器,小球本身是一个空的<div>。所有的小球使用一个大的容器.container作为包裹容器。例如第一种效果的HTML结构如下:

<div id="container">
  <div class='wrap' id='wrap1'>
    <div class='ball' id='ball1'></div>
  </div>

  <div class='wrap' id='wrap2'>
    <div class='ball' id='ball2'></div>
  </div>

  <div class='wrap' id='wrap3'>
    <div class='ball' id='ball3'></div>
  </div>
 
  <div class='wrap' id='wrap4'>
    <div class='ball' id='ball4'></div>
  </div>
  <div class='wrap' id='wrap5'>
    <div class='ball' id='ball5'></div>
  </div>
</div>

 

CSS样式

在第一种小球动画效果中,小球的包裹容器.wrap使用translateX动画不断的向左移动。小球.ball本身使用translateY动画不断的向上移动。这两个动画都通过alternate参数来指定动画来回运动的模式。

.wrap {
  -webkit-animation: translateX 1000ms infinite ease-in-out alternate;
  -o-animation: translateX 1000ms infinite ease-in-out alternate;
  animation: translateX 1000ms infinite ease-in-out alternate;
  position: absolute;
}

.ball {
  width: 50px;
  height: 50px;
  box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.15) inset;
  background-color: #397BF9;
  border-radius: 50%;
  -webkit-animation: translateY 500ms infinite ease-in-out alternate;
  -o-animation: translateY 500ms infinite ease-in-out alternate;
  animation: translateY 500ms infinite ease-in-out alternate;
  border: 2px solid black;
}

 

小球的阴影使用.wrap:after伪元素来制作,并使用了scale动画来缩放它的大小。

.wrap:after {
  content: '';
  width: 50px;
  height: 7.5px;
  background: #eee;
  position: absolute;
  bottom: 0;
  top: 70px;
  border-radius: 50%;
  -webkit-animation: scale 500ms infinite ease-in-out alternate;
  -o-animation: scale 500ms infinite ease-in-out alternate;
  animation: scale 500ms infinite ease-in-out alternate;
}

 

元素的动画延迟时间设置为负数,表示动画在页面一加载就开始执行,然后在动画过程中再执行相应的延迟时间绝对值的动画延迟。

#wrap2, #ball2, #wrap2:after {
  animation-delay: -400ms;
}
...

 

其它小球效果的CSS代码请参考下载文件。

查看演示
下载资源:8
下载资源
错误提交:

格式:zip 大小:70.40KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2213.html 非特殊说明,本文版权归原作者所有,转载请注明出处
4种炫酷的纯CSS3小球物理运动动特效

我当前G币余额:0 已下载次数:8

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有2 评论)