图片/图形

纯CSS3小球物理运动动特效

也想出现在这里?联系我们
创客云

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

HTML 结构

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

也想出现在这里?联系我们
创客主机
  1. <div id="container">
  2.   <div class='wrap' id='wrap1'>
  3.     <div class='ball' id='ball1'></div>
  4.   </div>
  5.  
  6.   <div class='wrap' id='wrap2'>
  7.     <div class='ball' id='ball2'></div>
  8.   </div>
  9.  
  10.   <div class='wrap' id='wrap3'>
  11.     <div class='ball' id='ball3'></div>
  12.   </div>
  13.  
  14.   <div class='wrap' id='wrap4'>
  15.     <div class='ball' id='ball4'></div>
  16.   </div>
  17.   <div class='wrap' id='wrap5'>
  18.     <div class='ball' id='ball5'></div>
  19.   </div>
  20. </div>

CSS 样式

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

  1. .wrap {
  2.   -webkit-animation: translateX 1000ms infinite ease-in-out alternate;
  3.   -o-animation: translateX 1000ms infinite ease-in-out alternate;
  4.   animation: translateX 1000ms infinite ease-in-out alternate;
  5.   position: absolute;
  6. }
  7.  
  8. .ball {
  9.   width: 50px;
  10.   height: 50px;
  11.   box-shadow: 0 -5px 0 rgba(0, 0, 0, 0.15) inset;
  12.   background-color: #397BF9;
  13.   border-radius: 50%;
  14.   -webkit-animation: translateY 500ms infinite ease-in-out alternate;
  15.   -o-animation: translateY 500ms infinite ease-in-out alternate;
  16.   animation: translateY 500ms infinite ease-in-out alternate;
  17.   border: 2px solid black;
  18. }

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

  1. .wrap:after {
  2.   content: '';
  3.   width: 50px;
  4.   height: 7.5px;
  5.   background: #eee;
  6.   position: absolute;
  7.   bottom: 0;
  8.   top: 70px;
  9.   border-radius: 50%;
  10.   -webkit-animation: scale 500ms infinite ease-in-out alternate;
  11.   -o-animation: scale 500ms infinite ease-in-out alternate;
  12.   animation: scale 500ms infinite ease-in-out alternate;
  13. }

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

  1. #wrap2, #ball2, #wrap2:after {
  2.   animation-delay: -400ms;
  3. }
  4. ...

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

下载地址

本文由 云模板 作者:PetitQ 发表,转载请注明来源!

也想出现在这里?联系我们
创客主机

热评文章

发表评论

热销模板

Nastik - 创意企业作品展示网站WordPress汉化模板

Envato

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!

12

12.12 惠不可挡

每逢双12,难免心潮澎湃,亲们,准备好了吗?

①、原版主题安装冬日暖心价60元/次(原价120元/次) ---》详询客服

①、云主机买一年送一年,买两年送两年,高速、稳定、免备案 ---》云主机

③、双十二限时促销,在模板市场购买任意模板赠送VIP年度会员火热进行中 ---》云模板

咨 询 客 服