CSS3打造炫酷的飞机和轮船动画特效

PetitQ 图片/图形 2019-1-21 2.19K 0 0

这是一款非常有意思的纯 CSS3 飞机和轮船动画特效。这组特效中分别使用 CSS3 技术来制作轮船和飞机的动画效果。特效中没有使用图片，各种元素都是通过 CSS 渲染出来的，效果非常的炫酷。

HTML 结构

在轮船的动画特效中，使用了嵌套

也想出现在这里？联系我们吧

的 HTML 结构。各个

作为一个组件构成了整个轮船。而水浪则是使用一组元素构成的。

```
<div class="boat">
```
```
  
```
```
  <div class="wrap">
```
```
    <div class="main">
```
```
      <div class="boat-top-layer">
```
```
        <div class="top">
```
```
          <div class="pole"></div>
```

          <div class="help"><span></span></div>

```
        </div>
```
```
        <div class="bottom"></div>
```
```
      </div>
```
```
      <div class="boat-mid-layer">
```
```
        <div class="top"></div>
```
```
        <div class="bottom"></div>
```
```
      </div>
```
```
      <div class="boat-bot-layer">
```
```
        <div class="top"></div>
```
```
        <div class="bottom"></div>
```
```
      </div>
```
```
    </div>
```
```
  </div>
```
```
  
```
```
  <div class="water">
```

    <div class="drops clearfix drops-1">

```
      <span class="drop drop-a"></span>
```
```
      ...
```
```
    </div>
```

    <div class="drops clearfix drops-2">

```
      <span class="drop drop-a"></span>
```
```
      ...
```
```
    </div>
```
```
  </div>
```
```
</div>
```

CSS 样式

在轮船的 CSS 样式中，通过大量的:before 和:after 伪元素的设置来构建整个船体。例如红色的救生圈就是由 div.help 元素和它的子元素的:before 和:after 伪元素来构建的。

```
.boat .boat-top-layer .top .help{
```
```
  z-index:1;
```
```
  width:30px;
```
```
  height:30px;
```
```
  margin-top:-2px;
```
```
  margin-left:-1px;
```
```
  position:relative;
```
```
  border-radius:50%;
```
```
  border:8px solid #f04850;
```
```
}
```

.boat .boat-top-layer .top .help:before,

```
.boat .boat-top-layer .top .help:after{
```
```
  top:50%;
```
```
  left:50%;
```
```
  position:absolute;
```
```
  background:rgba(0,0,0,.3);
```
```
}
```

.boat .boat-top-layer .top .help:before{

```
  height:2px;
```
```
  width:inherit;
```
```
  margin-top:-1px;
```
```
  margin-left:-15px;
```
```
}
```
```
.boat .boat-top-layer .top .help:after{
```
```
  width:2px;
```
```
  height:inherit;
```
```
  margin-top:-15px;
```
```
  margin-left:-1px;
```
```
}
```
```
.boat .boat-top-layer .top .help span{
```
```
  top:-2px;
```
```
  width:14px;
```
```
  height:14px;
```
```
  overflow:hidden;
```
```
  border-radius:50%;
```
```
  position:relative;
```
```
  display:inline-block;
```
```
}
```

.boat .boat-top-layer .top .help span:before,

.boat .boat-top-layer .top .help span:after{

```
  top:50%;
```
```
  left:50%;
```
```
  z-index:1;
```
```
  background:#fff;
```
```
  position:absolute;
```
```
}
```

.boat .boat-top-layer .top .help span:before{

```
  width:2px;
```
```
  height:inherit;
```
```
  margin-top:-7px;
```
```
  margin-left:-1px;
```
```
}
```

.boat .boat-top-layer .top .help span:after{

```
  height:2px;
```
```
  width:inherit;
```
```
  margin-top:-1px;
```
```
  margin-left:-7px;
```
```
}
```

其它部分的代码及动画效果的实现请参考下载文件。

CSS3 打造炫酷的飞机和轮船动画特效

已有 548 人购买

永久更新：
演示数据：

立即购买

查看演示升级 VIP 立刻购买

演示地址

下载地址

炫酷企业建站作品展示WordPress中文模板

Supro - 极简电商网站模板WordPress汉化主题

Photon - 全屏摄影相册产品展示网站WordPress汉化主题

图片/图形

CSS3打造炫酷的飞机和轮船动画特效

HTML 结构

CSS 样式

CSS3 打造炫酷的飞机和轮船动画特效

相关文章

Blueprint 风格网格布局CSS画廊

鼠标滑过鼠标点击圆形图片扩散jQuery特效

Filerobot 图片编辑器Javascript插件

发表回复取消回复

热销模板

图片/图形

HTML 结构

CSS 样式

CSS3 打造炫酷的飞机和轮船动画特效

相关文章

发表回复 取消回复

热销模板

发表回复取消回复