彩虹屁猫猫Loading动画

Feng
Feng
7月6日发布
2 25 1

图片[1] - 彩虹屁猫猫Loading动画 - Feng的小屋

在网页设计的世界里，Loading 动画起着至关重要的作用。它不仅能够在页面加载时为用户提供反馈，减少等待的焦虑感，还能为网站增添独特的视觉魅力。

代码演示

HTML 结构

HTML 部分负责搭建动画的基本结构，代码如下：

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

<head>
    <meta charset="UTF-8" />
    <title>彩虹屁猫猫 Loading 动画</title>
    <style>
        /* 这里是 CSS 样式代码 */
    </style>
</head>

<body>
    <div id="animation-container">
        <svg class="animation-rainbow-cat" viewbox="0 0 70 20">
            <defs>
                <linearGradient id="rainbow-colors" x1="0.5" x2="0.5" y2="1">
                    <stop class="rainbow-color1" offset="0" />
                    <stop class="rainbow-color1" offset="0.167" />
                    <stop class="rainbow-color2" offset="0.167" />
                    <stop class="rainbow-color2" offset="0.335" />
                    <stop class="rainbow-color3" offset="0.335" />
                    <stop class="rainbow-color3" offset="0.5" />
                    <stop class="rainbow-color4" offset="0.5" />
                    <stop class="rainbow-color4" offset="0.669" />
                    <stop class="rainbow-color5" offset="0.669" />
                    <stop class="rainbow-color5" offset="0.833" />
                    <stop class="rainbow-color6" offset="0.833" />
                    <stop class="rainbow-color6" offset="1" />
                </linearGradient>
            </defs>
            <g class="rainbow-cat">
                <g class="rainbow">
                    <rect />
                    <rect />
                    <rect />
                    <rect />
                    <rect />
                    <rect />
                    <rect />
                </g>
                <g class="cat">
                    <g class="cat-tail" transform="translate(40, 5.5)">
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                    </g>
                    <g class="cat-legs" transform="translate(43, 5.5)">
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                    </g>
                    <g class="cat-bread" transform="translate(43, 5.5)">
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                    </g>
                    <g class="cat-head" transform="translate(43, 5.5)">
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                        <rect />
                    </g>
                </g>
            </g>
        </svg>
    </div>
</body>

</html>

在这个 HTML 代码中，可以看到以下几个关键部分：

  1. <svg> 元素：SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。在这里，我们使用 <svg> 元素来创建动画的画布，并通过 viewbox 属性设置画布的可视区域。
  2. <linearGradient> 元素：用于创建线性渐变，这里定义了彩虹的颜色渐变效果。
  3. <g> 元素：用于将多个图形元素组合在一起，方便对它们进行统一的操作和样式设置。在这个动画中，我们使用 <g> 元素将彩虹、猫猫的尾巴、腿、面包和头部等部分分别组合起来。

CSS 样式和动画效果

CSS 部分负责为动画添加样式和实现动画效果，代码如下：

body {
    background-color: black;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

svg {
    mask-image: linear-gradient(to left, #000000 70%, #ffffff00 84%);
    -webkit-mask-image: linear-gradient(
        to left,
        #000000 70%,
        #ffffff00 84%
    );
    width: 400px;
}

/* 彩虹部分样式和动画 */
.animation-rainbow-cat .rainbow-color1 {
    stop-color: #fc0101;
}

.animation-rainbow-cat .rainbow-color2 {
    stop-color: #fe9900;
}

/* 其他彩虹颜色样式... */

.animation-rainbow-cat .rainbow-cat .rainbow rect {
    width: 5px;
    stroke: transparent;
    fill: url(#rainbow-colors);
}

.animation-rainbow-cat .rainbow-cat .rainbow rect:nth-of-type(1) {
    height: 7px;
    transform: translate(40px, 6px);
    animation: rainbow-boost-1 0.2s linear 0.2s infinite alternate;
}

@keyframes rainbow-boost-1 {
    to {
        transform: translate(40px, 7px);
    }
}

/* 其他彩虹矩形的动画... */

/* 猫猫各部分样式和动画 */
/* 猫猫面包部分 */
.animation-rainbow-cat .rainbow-cat .cat .cat-bread rect:nth-of-type(1) {
    width: 9px;
    height: 9px;
    fill: black;
    transform: translate(1px, 0px);
}

/* 其他猫猫面包矩形样式... */

/* 猫猫尾巴部分 */
.animation-rainbow-cat .rainbow-cat .cat .cat-tail rect:nth-of-type(1) {
    width: 0.5px;
    height: 1.5px;
    fill: black;
    transform: translate(2.5px, 5.5px);
}

/* 其他猫猫尾巴矩形样式和动画... */

/* 猫猫头部部分 */
.animation-rainbow-cat .rainbow-cat .cat .cat-head rect:nth-of-type(1) {
    width: 8px;
    height: 2.5px;
    fill: black;
    transform: translate(5px, 5px);
}

/* 其他猫猫头部矩形样式和动画... */

/* 猫猫腿部部分 */
.animation-rainbow-cat .rainbow-cat .cat .cat-legs rect:nth-of-type(1) {
    width: 2px;
    height: 1.5px;
    fill: black;
    transform: translate(0px, 7.5px);
}

/* 其他猫猫腿部矩形样式和动画... */

/* 整个猫猫的动画 */
.animation-rainbow-cat .rainbow-cat .cat {
    animation: cat-move 0.35s linear 0.2s infinite;
}

@keyframes cat-move {
    50% {
        transform: translate(0px, 0px);
    }
    50% {
        transform: translate(0.3px, -0.5px);
    }
    100% {
        transform: translate(1px, 0px);
    }
}

.animation-rainbow-cat .rainbow-cat .cat .cat-head {
    animation: cat-head-move 0.35s cubic-bezier(0.95, -0.11, 0.56, 0.67) 0.2s
        infinite;
}

@keyframes cat-head-move {
    0% {
        transform: translate(43.5px, 5px);
    }
    50% {
        transform: translate(44px, 5.5px);
    }
    100% {
        transform: translate(43px, 5.5px);
    }
}

/* 其他部分的动画... */

在 CSS 代码中，可以看到以下几个重要的方面：

  1. 背景和布局：通过 body 元素的样式设置，将背景颜色设置为黑色，并使用 flexbox 布局将动画容器居中显示。
  2. SVG 遮罩效果：使用 mask-image 和 -webkit-mask-image 属性为 SVG 元素添加遮罩效果，使动画看起来更加生动。
  3. 颜色设置：通过 stop-color 属性为彩虹的每个颜色段设置不同的颜色。
  4. 动画效果：使用 @keyframes 规则定义各种动画，如彩虹的上下移动、猫猫的整体移动、头部的摆动、腿部的运动等。通过 animation 属性将这些动画应用到相应的元素上。
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
🧑‍💻 代码
喜欢就支持一下吧
点赞 1 分享 赞赏
版权属于：Feng
本文链接：https://bkfeng.vvvv.ee/archives/20.html
作品采用《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
评论 共2条
OωO
取消
  1. 头像
    凌清云
     · 
    中国贵州省贵阳市电信
    回复

    一开始看你代码演示，我想你怎么实现的这个页面的，后面才反应过来你是嵌入其他网页了$[阿鲁表情]::(赞一个)

    1. 头像
      Feng 作者
       · 
      中国广东省中山市电信
      回复

      @凌清云

      图个简单，怎么简单怎么来$[阿鲁表情]::(看热闹)

SSL