阅读 7414
CSS实现一只自由飞翔的鸟儿🐦

CSS实现一只自由飞翔的鸟儿🐦

「这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战

🎄 前言

前几天在逛社区时,偶然发现一个非常赏心悦目得 小鸟飞翔效果,并且是纯 css 实现的。

这不由让我大感惊奇, css 的世界可谓是渊博如海,让人又爱又恨。

我是一只小小小小鸟,想要飞呀飞却飞也飞不高,我寻寻觅觅寻寻觅觅一个,温暖的怀抱~~~ 🐤🐥🐥🐤

🍂 进入正题,接下来咱们就来一起实现自由的小鸟🐦吧。

学习本文,你可以学习到以下知识🍔:

  • border 绘制简单几何图形
  • transformanimation 知识
  • 收获一只可爱的飞鸟

📕 border 属性学习

border 是个非常神奇、非常强大的属性,通过设置四个方向的 border 可以实现很多简单的几何图形。

下面用几个例子带大家学习 border 的渲染机制:

  1. 设置 divwidthheight0,设置四个方向的 border 颜色不同。
border-left: 30px solid red;
border-right: 30px solid blue;
border-top: 30px solid green;
border-bottom: 30px solid pink;
复制代码

border.png

  1. 分别设置 height: 20px;width: 0 width: 20px;height:0width: 20px;height:20px

borderwh.png

上图按照步骤 2 的顺序设置

  1. 不设置 border-top

border-top.png

左侧图为设置 height: 20px 不设置 border-top;右侧图为设置 width: 20px 不设置 border-top

📄 border绘制简单图形总结

通过上面三个案例,我们可以总结出 border 属性绘制简单图形的规律:

  1. border 共分四个方向,每个方向绘制其中一块,如果宽高都为 0 ,每个方向绘制成三角形;否则绘制成梯形。
  2. border 的宽度为绘制梯形的高
  3. height 影响 border-leftborder-rightwidth 影响 border-topborder-bottom (例如示例 2 设置)
  4. 当一个方向未绘制时, border 会只绘制对立方向部分,并且只会绘制一般(例如示例 3 设置,会被腰斩)

🐣 绘制鸟儿

bird.png

由上面图可以看到小鸟共有四个部位: 头部、主体、两翼、尾巴,都由简单的几何图形构成。所以都可以通过 border 实现,下面来实现以下头部和两翼部分。

🐱‍🚀 头部实现

头部是个三角形,直接看代码

/* 设置 bottom 显示, left/right 为透明 */
border-right: 15px solid transparent;
border-bottom: 30px solid #6b83fa;
border-left: 15px solid transparent;
复制代码

birdhead.png

🛫 实现右翼

右翼由两部分,分别是直角梯形和直角三角形。通过 border 部分示例 3 可知,如果不设置 border-topborder-left/right 的设置效果也会被腰斩,形成一个直角边,咱们就利用这个特性,就可以完成直角三角形和直角梯形的设置。

  1. 直角三角形实现
/* 设置 border-left, borde-bottom 为透明 */
border-left: 30px solid #c0a9e0;
border-bottom: 30px solid transparent;
复制代码
  1. 直角梯形实现
/* 设置 height 拉长 left 形成梯形效果 */
height: 30px;
border-left: 30px solid #8567f0;
border-bottom: 10px solid transparent;
复制代码

🎈 鸟儿组装

  1. 鸟儿组装

通过 position: relativeposition: absolute 将图形组装起来,组装后的小鸟如下图

bird1.gif

因为只是通过定位组装小鸟,小鸟的所有部位处于同一平面,看起来十分生硬。

  1. 让鸟儿更立体

通过 transform: rotatetransform-origin 属性将小鸟的头部,尾部,两翼旋转一下,形成立体感

例如头部:

/* 设置 transform 的基点 */
transform-origin: 50% 100%;
/* 沿 x 轴偏移,负值逆时针旋转*/
transform: rotateX(-20deg);
复制代码

经过 rotate 变换后的小鸟,是不是就生动多了。

bird2.gif

🌀 实现风

风的实现并不难,是通过 div 标签与 :before 配合实现。

.wind {
    position: absolute;
    width: 4px;
    height: 200px;
    /* 风是移动的,通过 overflow 可以限制风的长度 */
    overflow: hidden;
}
.wind:before {
    before {
    content: "";
    position: absolute;
    width: 4px;
    height: 300px;
    background: rgba(100, 200, 207, 0.3);
    transform: translateY(-300px);
    -webkit-animation: wind 2331ms 1268ms linear infinite; 
    animation: wind 2331ms 1268ms linear infinite;
}
复制代码

就可以实现 wind ,之后依次按照上述实现 10wind ,实现后的效果如下:

wind.png

10wind 重叠在一起了,使用 transform: translate3d 依次设置 wind 位置,不断调整,最终实现效果如下:

wind3d.gif

🎡 让风动起来

风动起来的效果实现原理非常简单:.wind 设置 height: 200px ,超出 200px 会隐藏, :before 伪类中可以使用 animation 属性,移动 wind 的 translateY

@-webkit-keyframes wind {
    0% {
        transform: translateY(-300px);
    }
    100% {
        transform: translateY(200px);
    }
}
.wind:before {
    transform: translateY(-300px);
    /* 设置每个风的延迟时间和持续时间都不相同 */
    animation: wind 2249ms 3544ms linear infinite;
}
复制代码

风就动起来了,现在看起来效果就很赏心悦目了,就差飞翔的鸟儿了。

wind3dmove.gif

🚀 飞翔吧小鸟

再让鸟儿飞起来之前,我们首先来设置一些基本属性

初始化3D

  1. 设置 transform-style: preserve-3d 开启 3D 渲染
  2. 设置 perspective: 设置视距,让飞翔的鸟儿看起来更符合人类视觉效果
  3. 设置 drop-shadow: 真实世界的飞鸟怎么能没有影子那。

两翼动画

让鸟儿飞起来最重要的就是两翼动起来,分别设置两个动画 wingRightwindLeft

/* 两翼翅膀的时针相反,因此动画是反的 */
@keyframes wingRight {
    0% {
        transform: rotateY(40deg);
    }
    100% {
        transform: rotateY(-40deg);
    }
}
@-webkit-keyframes wingLeft {
    0% {
        transform: rotateY(-40deg);
    }
    100% {
        transform: rotateY(40deg);
    }
}
复制代码

设置完动画后,还有至关重要的一步,要设置 transform-origin ,以右翼为例子,翅膀应该沿红框标识线旋转

birdfly.png

transform-origin 默认值为 50% 50% 0,很明显是无法满足旋转要求的,根据浏览器坐标系的知识,因此设置右翼 transform-origin0 0 ,同理设置左翼为 100% 0

整体动画

光在一个平面中飞翔不免有几分无聊和乏味,作为天空中的精灵,鸟儿应该自由的飞翔。给鸟儿添加绕 z360° 旋转的动画。

flybird.gif

🛕 源码仓库

传送门: flybird

如果感觉有帮助的话,别忘了给小包点个 ⭐ 。

💘 往期精彩文章

💥 后语

伙伴们,如果大家感觉本文对你有一些帮助,给阿包点一个赞👍或者关注➕都是对我最大的支持。

另外如果本文章有问题,或者对文章其中一部分不理解,都可以评论区回复我,我们来一起讨论,共同学习,一起进步!

如果感觉评论区说不明白,也可以添加我的微信(li444186976)或者 qq(3315161861) 详细交流,名字都是战场小包。

文章分类
前端
文章标签