当前位置：首页 > 网页特效 > 动画效果

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

分类：动画效果日期：2024-05-14 点击(3) 评论(0)

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

简介

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

```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参数来指定动画来回运动的模式。

```html
.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动画来缩放它的大小。
```html
.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;
}       
```        
元素的动画延迟时间设置为负数，表示动画在页面一加载就开始执行，然后在动画过程中再执行相应的延迟时间绝对值的动画延迟。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果