AI摘要
在网页设计的世界里，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 代码中，可以看到以下几个关键部分：
<svg>元素：SVG（Scalable Vector Graphics）是一种用于描述二维矢量图形的 XML 标记语言。在这里，我们使用<svg>元素来创建动画的画布，并通过viewbox属性设置画布的可视区域。<linearGradient>元素：用于创建线性渐变，这里定义了彩虹的颜色渐变效果。<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 代码中，可以看到以下几个重要的方面：
- 背景和布局：通过
body元素的样式设置，将背景颜色设置为黑色，并使用flexbox布局将动画容器居中显示。 - SVG 遮罩效果：使用
mask-image和-webkit-mask-image属性为 SVG 元素添加遮罩效果，使动画看起来更加生动。 - 颜色设置：通过
stop-color属性为彩虹的每个颜色段设置不同的颜色。 - 动画效果：使用
@keyframes规则定义各种动画，如彩虹的上下移动、猫猫的整体移动、头部的摆动、腿部的运动等。通过animation属性将这些动画应用到相应的元素上。
本文著作权归作者 [ Feng ] 享有，未经作者书面授权，禁止转载，封面图片来源于 [ 互联网 ] ，本文仅供个人学习、研究和欣赏使用。如有异议，请联系博主及时处理。
一开始看你代码演示，我想你怎么实现的这个页面的，后面才反应过来你是嵌入其他网页了$[阿鲁表情]::(赞一个)
图个简单，怎么简单怎么来$[阿鲁表情]::(看热闹)