CSS3动画——飞行的小精灵

已于 2024-08-27 23:30:01 修改
阅读量3.2k 收藏 27
点赞数 24
分类专栏： CSS-效果 文章标签： css3 css 前端
于 2024-08-25 01:17:37 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73777400/article/details/141508017
版权

CSS3动画——飞行的小精灵

今天的这段代码通过多层结构、渐变色、圆角、多种动画效果以及细节处理，成功地创造了一个充满活力和趣味性的飞行小精灵动画效果。
效果如下：

飞行的小精灵

源代码如下：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>飞行的小精灵</title>
  <style>
    * {
      padding: 0;
      margin: 0;
    }

    body {
      background-color: rgb(15, 17, 29);
      width: 100%;
      overflow: hidden;
    }

    div {
      width: 150px;
      height: 150px;
    }


    ul {
      display: block;
      width: 100%;
      height: 100%;
      font-size: 0px;
    }

    /* 最外层容器 */
    .container {
      translate: 0 50%;
      margin: 0 auto;
      width: 100%;
      height: 300px;
    }

    .main-container {
      position: relative;
      width: 100%;
      height: 100%;
    }

    /* 外层紫色盒子 */
    .first {
      margin: 0 auto;
      translate: 0 50%;
      /* border: 1px solid #fff; */
      box-shadow: 5px 5px 10px 5px rgba(80, 72, 160, 0.9) 30%, rgb(126, 117, 224, 0.5);

    }

    /* 紫色拖尾 */
    .first ul li {
      width: 100%;
      height: 25%;
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      animation: first .7s ease-in-out infinite alternate;
      background-image: linear-gradient(to right, rgba(80, 72, 160, 0.9) 30%, rgb(126, 117, 224, 0.5));
      mask-image: linear-gradient(to right, rgba(80, 72, 160, 0.9) 70%, transparent);
    }

    .first ul li:nth-child(1) {
      animation-delay: .3s;
    }

    .first ul li:nth-child(2) {
      animation: first 2s 0.4s ease-out infinite alternate;
    }

    .first ul li:nth-child(3) {
      animation: first 1.5s 0.3s ease-out infinite alternate;
    }

    .first ul li:nth-child(4) {
      animation-delay: .5s;
    }


    @keyframes first {
      0% {
        width: 60%;
        opacity: 1;
      }

      100% {
        width: 140%;
      }
    }

    .first::before {
      content: '';
      position: absolute;
      left: -50%;
      width: 50%;
      height: 100%;
      border-top-left-radius: 75px;
      border-bottom-left-radius: 75px;
      background-color: rgba(80, 72, 160, 0.9);
      box-shadow: -2px 0 5px rgba(80, 72, 160, 0.7);

    }



    /* 第二层 */
    .second {
      margin: 0 auto;
      translate: 0 -50%;
      height: 130px;
    }

    .second ul li {
      height: 25%;
      width: 100%;
      background-color: rgba(133, 237, 232, 0.6);
      border-top-right-radius: 15px;
      border-bottom-right-radius: 15px;
      animation: second .6s ease-out infinite alternate;
      mask-image: linear-gradient(to right, #85EDE8 50%, transparent);
    }

    .second ul li:last-child {
      translate: 0 200%;
      animation-delay: 0.4s;
    }

    @keyframes second {
      0% {
        width: 80%;
      }

      100% {
        width: 130%;
      }
    }


    .second::before {
      content: '';
      position: absolute;
      left: -65px;
      width: 50%;
      height: 100%;
      border-top-left-radius: 75px;
      border-bottom-left-radius: 75px;
      background: #85EDE8;
      box-shadow: -2px 0 5px rgba(133, 237, 232, 0.7);
    }

    /* 第三层 */
    .third {
      position: relative;
      margin: 0 auto;
      translate: 0 -205px;
    }


    .third ul li {
      width: 100%;
      height: 10%;
      border-top-right-radius: 7.5px;
      border-bottom-right-radius: 7.5px;
      background-color: rgb(133, 237, 232);
      animation: third 1s infinite alternate;
      box-shadow: 0 0 5px rgba(133, 237, 232, 0.5);
    }

    .third .top {
      position: absolute;
      top: 10px;
      left: 0;
    }

    .third .bottom {
      position: absolute;
      bottom: 10px;
      left: 0;
    }

    .third ul li:nth-child(1) {
      animation-delay: 0.7s;
    }

    .third ul li:nth-child(2) {
      width: 25px;
      height: 15px;
      border-radius: 50px;
      animation: third-1 1.5s ease-out infinite;
    }

    .third ul li:nth-child(4) {
      width: 15px;
      border-radius: 50px;
      animation: third-1 1.5s ease-out infinite;
    }

    .third ul li:nth-child(3) {
      width: 50px;
      border-radius: 50px;
      animation: third-2 1s 0.1s ease-out infinite;
    }

    .third ul li:nth-child(5) {
      width: 60px;
      border-radius: 70px;
      animation: third-2 1s 0.4s ease-out infinite;
    }

    @keyframes third {
      0% {
        width: 55%;
      }

      100% {
        width: 85%;
      }
    }

    @keyframes third-1 {
      0% {
        left: 35px;
      }

      80% {
        cpacity: 0.7;
      }

      100% {
        left: 200px;
        opacity: 0;
      }
    }

    @keyframes third-2 {
      0% {
        left: 35px;
      }

      80% {
        cpacity: 0.7;
      }

      100% {
        left: 200px;
        opacity: 0;
      }
    }

    .third::before {
      content: '';
      position: absolute;
      top: 25px;
      left: -50px;
      width: 70px;
      height: 100px;
      border-top-left-radius: 65px;
      border-bottom-left-radius: 65px;
      background-color: #fff;
    }

    /* 面部的图案,待会儿取消注释*/
    .fourth {
      position: relative;
      width: 100px;
      height: 100px;
      background-color: transparent;
      margin: 0 auto;
      /* 因为前面的div盒子撑起来了 */
      translate: -25px -330%;
      background-color: #fff;
    }


    .fourth .eyes {
      position: absolute;
      top: 40px;
      left: 0px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #000;
    }

    .eyes::after {
      content: "";
      position: absolute;
      top: 0;
      left: 30px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: #000;
    }

    .checks {
      position: absolute;
      top: 52px;
      left: -10px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgb(133, 237, 232);
    }

    .checks::after {
      content: "";
      position: absolute;
      top: 0;
      left: 50px;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background-color: rgb(133, 237, 232);
    }

    .smile {
      position: absolute;
      top: 53px;
      left: 8px;
      width: 20px;
      height: 10px;
      border: 3px solid #000;
      border-bottom-left-radius: 90px;
      border-bottom-right-radius: 90px;
    }

    /* 嘴型的设置 */
    .smile::after {
      content: "";
      position: absolute;
      top: -5px;
      left: -5px;
      width: 30px;
      height: 7px;
      background-color: #fff;
    }

    /* 设置动画条 */
    .fourth ul li {
      position: absolute;
      width: 100%;
      height: 15px;
      background-color: #fff;
      left: 1px;
    }

    .fourth ul .odd {
      border-top-right-radius: 50px;
      border-bottom-right-radius: 50px;
    }

    .fourth ul .even {
      background: radial-gradient(circle at 100% 50%, transparent 15px, #fff 18px);
    }

    .fourth ul li:nth-child(1) {
      top: 0px;
      animation: fourth-1 1s ease-in-out infinite alternate;

    }

    .fourth ul li:nth-child(2) {
      top: 12px;
      height: 17px;
      animation: fourth-2 1s 0.2s ease-in-out infinite alternate;
      filter: blur(1px);
    }

    .fourth ul li:nth-child(3) {
      top: 27px;
      animation: fourth-3 1s 0.4s ease-in-out infinite alternate;
    }

    .fourth ul li:nth-child(4) {
      top: 41px;
      height: 17px;
      animation: fourth-4 1s 0.6s ease-in-out infinite alternate;
    }

    .fourth ul li:nth-child(5) {
      bottom: 28px;
      animation: fourth-5 1s 0.6s ease-in-out infinite alternate;
    }

    .fourth ul li:nth-child(6) {
      bottom: 14px;
      animation: fourth-6 01s 0.6s ease-in-out infinite alternate;
    }

    .fourth ul li:nth-child(7) {
      bottom: 0px;
      animation: fourth-7 1s 0.6s ease-in-out infinite alternate;
    }

    @keyframes fourth-1 {
      0% {
        width: 120%;
      }

      100% {
        width: 140%;
      }
    }

    @keyframes fourth-2 {
      0% {
        width: 120%
      }

      100% {
        width: 125%;
      }
    }

    @keyframes fourth-3 {
      0% {
        width: 130%;
      }

      100% {
        width: 150%;
      }
    }

    @keyframes fourth-4 {
      0% {
        width: 125%;
      }

      100% {
        width: 140%;
      }
    }

    @keyframes fourth-5 {
      0% {
        width: 120%;
      }

      100% {
        width: 150%;
      }
    }

    @keyframes fourth-6 {
      0% {
        width: 120%;
      }

      100% {
        width: 130%;
      }
    }

    @keyframes fourth-7 {
      0% {
        width: 130%;
      }

      100% {
        width: 155%;
      }
    }

    @keyframes fourth-8 {
      0% {
        width: 155%;
      }

      100% {
        width: 165%;
      }
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="main-container">
      <!-- 外层紫色 -->
      <div class="first">
        <ul>
          <li></li>
          <li></li>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 第二层浅蓝 -->
      <div class="second">
        <ul>
          <li></li>
          <li></li>
        </ul>
      </div>
      <!-- 第三层稍微深的蓝色 -->
      <div class="third">
        <ul>
          <li class="top"></li>
          <li class="top"></li>
          <li class="top"></li>
          <li class="bottom"></li>
          <li class="bottom"></li>
          <li class="bottom"></li>
        </ul>
      </div>
      <!-- 内层图案 -->
      <div class="fourth">
        <ul>
          <li class="odd"></li>
          <li class="even"></li>
          <li class="odd"></li>
          <li class="even"></li>
          <li class="odd"></li>
          <li class="even"></li>
          <li class="odd"></li>
          <li class="even"></li>
        </ul>
        <!-- 面部图像 -->
        <span class="eyes"></span>
        <span class="checks"></span>
        <span class="smile"></span>
      </div>
    </div>
    <div class=" flying-starts"></div>
  </div>
</body>

</html>
懒羊羊大王呀
关注
专栏目录
css动画
baidulixueqin的博客
11-25 559
例子 将div左右移动 原理 每过段时间(用setInterval做到) 将div移动一小段距离 直到移动到目标点 注意性能 绿色表示重新绘制(repaint)了 css渲染过程依次包含布局，绘制，合成 其中布局和绘制有可能被省略 第2种方式 前端高手不用left做动画，用transform(变形)，性能会好很多 原理 transform:translateX(0=>300px) 直接修改会被合成，需要等一会修改 transition过渡属性可以自动脑补中间帧 注意性能 并没有repaint重新绘制
CSS3 动画——animations
Shmily_ox的博客
04-09 1256
CSS3动画( CSS3 animations ) 我们学习了CSS3的transition 和transform属性，虽然二者结合可以实现一些简单的动画效 果，但是也有-些难以克服的缺点，如无法实现动画在多个状态中转换。CSS3中最后一个动画相关 的属性是animations，有了它就可以解决这样的问题。 一个完整的CSS animations由两部分构成: 一组定义的动画关键帧和描述该动画的C...
HTML/CSS实现可爱的404动画 很逗的机器人模板源码（附带源码）
二当家的
01-26 456
​ 很久以前我在网上看到一篇帖子，是专门分享创意404页面的，很可惜我已经找不到了。但是今天我找到一款利用HTML5实现的404机器人动画，当你进入该404页面时，就会出现一个机器人在跳舞，非常可爱。这个机器人跳舞的动作是利用HTML5和CSS3的动画属性实现的，一起来看看。
【CSS Tricks】css动画详解
最新发布
qbbmnnnnnn的博客
09-29 1632
动画包括两个部分：描述动画的样式规则和用于指定动画开始、结束以及中间点样式的关键帧。 相较于传统的脚本实现动画技术，使用 CSS 动画有三个主要优点： 能够非常容易地创建简单动画，你甚至不需要了解 JavaScript 就能创建动画。 动画运行效果良好，甚至在低性能的系统上。渲染引擎会使用跳帧或者其他技术以保证动画表现尽可能的流畅。而使用 JavaScript 实现的动画通常表现不佳（除非经过很好的设计）。 让浏览器控制动画序列，允许浏览器优化性能和效果，如降低位于隐藏选项卡中的动画更新频率。
28个炫酷的纯CSS特效动画示例（含源代码）
热门推荐
大剑师兰特的GIS世界
01-15 3万+
CSS是网页的三驾马车之一，是对页面布局的总管家，2024年了，这里列出28个超级炫酷的CSS动画示例，让您的网站更加炫目多彩。
css 动画
dengye7077的博客
09-25 234
transform 过渡效果 <!DOCTYPE html> <html> <head> <style> .waitBox{ margin: 50px; } .box{ width:50px; height:50px; background:blue; transform:rotate(10deg)...
css动画（详解带图）
qq_34267076的博客
05-17 2万+
css动画 1.过渡 过渡 （transition）的作用 1.通过过渡可以指定一个属性发生变化时的切换方式 2.通过过渡可以创建一些非常好的效果，提升用户的体验 常用属性 1.transition-property:指定要执行过渡的属性 多个属性间使用,隔开（ transition-property: width,height;） 如果所有属性都需要过渡，则使用all关键字 大部分属性都支持过渡效果，注意过渡时必须是有效数值向另外一个有效数值进行过渡，比如auto向0过渡就不是一个有效值 2.t
CSS3——CSS3动画(animation)及应用
流楚丶格念的博客
07-15 4878
改革春风吹满地动画(CSS3) animation案例1：太阳系的运作案例2：图片播放标题 动画(CSS3) animation 动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 语法格式： animation:动画名称 花费时间 运动曲线 何时开始 播放次数 是否反方向; 关于几个值，除了名字，动画时间，延时有严格顺序要求其它随意r @keyframes 动画名称 { from{ 开始位置 } 0% to{ 结束 }
css动画在线生成,在线制作css动画——cssanimate
weixin_36361396的博客
08-03 2802
熟悉CSS的人都知道，CSS可以实现很多漂亮的动画，特别是它的在线功能，能够帮助人们解决很多制作动画的效果。今天特别推荐一个在线CSS插件功能——cssanimate，这个最大的特色就是以图形界面方式让你轻易实现漂亮的CSS3动画效果，下面一起看看这个在线工具的介绍。CSS3动画制作工具界面介绍Timeline(时间轴)Timeline是引导动画的重要区域，就像制作逐帧动画一样，可以调整每帧的内容...
CSS3动画——五个圆球的动画及音乐播放器和Loading图标
qq_39875553的博客
08-18 1840
CSS3动画——五个圆球的动画及音乐播放器和Loading图标 360卫士图标与网易云音乐图标
css动画钟表——transform之rotate
weixin_43913877的博客
12-02 1115
css钟表——变形、旋转 今天学了个小玩意儿，用css写钟表 涉及知识点：css动画（animation）、变形（transform）、定位（position）、布局
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值