纯CSS 3D纸鸟飞翔动画

来源:https://www.sucaihuo.com/js/2998.html 2017-09-13 21:54浏览(1122) 收藏

一款纯CSS 3D纸鸟飞翔动画,整个飞行有一个3D旋转的特效,可以看到不同角度的飞翔动画,同时还有一些流光飞影的效果,鸟儿的阴影也有一个3D旋转的过程。
纯CSS 3D纸鸟飞翔动画
分类:css3 > transform 难易:初级
查看演示 下载资源 下载积分: 20 积分

页面的head部分,需引入页面的样式文件,代码如下:

<link type="text/css" rel="stylesheet" href="css/style.css">

页面的body部分,用了多个div的嵌套结构来放置不同的元素内容,代码如下:

<div id="sky">
  <div class="bird">
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="wind"></div>
    <div class="bird_body">
      <div class="bird_head"></div>
      <div class="bird_wing_left">
        <div class="bird_wing_left_top"></div>
      </div>
      <div class="bird_wing_right">
        <div class="bird_wing_right_top"></div>
      </div>
      <div class="bird_tail_left"></div>
      <div class="bird_tail_right"></div>
    </div>
  </div>
</div>
标签: 3d纸鸟飞翔
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2