CSS样式表实战指南轻松实现网页设计中的各种视觉效果从基础选择器到高级动画效果全面掌握提升网页用户体验打造专业级网站

引言

CSS（层叠样式表）是网页设计的核心技术之一，它负责控制网页的视觉呈现，从简单的颜色和字体到复杂的布局和动画效果。随着Web技术的不断发展，CSS已经从简单的样式描述语言演变为强大的设计工具。本文将带您从CSS的基础概念开始，逐步深入到高级技巧，帮助您全面掌握CSS，打造专业级的网站设计。

CSS基础

CSS语法和结构

CSS由选择器和声明块组成。选择器指向需要样式化的HTML元素，声明块包含一个或多个声明，每个声明由属性和值组成。

selector { property: value; property2: value2; }

CSS选择器

选择器是CSS的基础，掌握不同类型的选择器是学习CSS的第一步。

基本选择器

元素选择器：直接选择HTML元素。

p { color: blue; }

类选择器：以点号(.)开头，选择具有特定class的元素。

.highlight { background-color: yellow; }

ID选择器：以井号(#)开头，选择具有特定id的元素。

#header { font-size: 24px; }

组合选择器

后代选择器：选择某元素的后代元素。

div p { color: green; }

子选择器：选择某元素的直接子元素。

ul > li { list-style-type: square; }

相邻兄弟选择器：选择紧接在另一个元素后的元素。

h1 + p { margin-top: 0; }

通用兄弟选择器：选择某元素之后的所有兄弟元素。

h1 ~ p { color: gray; }

属性选择器

属性选择器根据元素的属性及属性值来选择元素。

/* 选择具有title属性的元素 */ [title] { font-weight: bold; } /* 选择title属性为"example"的元素 */ [title="example"] { border: 1px solid red; } /* 选择title属性包含"example"的元素 */ [title*="example"] { color: blue; } /* 选择title属性以"ex"开头的元素 */ [title^="ex"] { text-transform: uppercase; } /* 选择title属性以"ple"结尾的元素 */ [title$="ple"] { font-style: italic; }

伪类选择器

伪类选择器用于选择元素的特定状态。

/* 鼠标悬停状态 */ a:hover { color: red; } /* 已访问的链接 */ a:visited { color: purple; } /* 未访问的链接 */ a:link { color: blue; } /* 活动链接 */ a:active { color: orange; } /* 获取焦点的元素 */ input:focus { border-color: blue; } /* 第一个子元素 */ li:first-child { font-weight: bold; } /* 最后一个子元素 */ li:last-child { border-bottom: none; } /* 第n个子元素 */ li:nth-child(2n) { background-color: #f2f2f2; }

伪元素选择器

伪元素选择器用于选择元素的特定部分。

/* 选择元素的第一行 */ p::first-line { font-weight: bold; } /* 选择元素的第一个字母 */ p::first-letter { font-size: 200%; color: blue; } /* 在元素内容前插入内容 */ p::before { content: ">> "; color: gray; } /* 在元素内容后插入内容 */ p::after { content: " <<"; color: gray; }

CSS盒模型

CSS盒模型是理解布局的基础。每个元素都被表示为一个矩形的盒子，包含内容(content)、内边距(padding)、边框(border)和外边距(margin)。

.box { width: 300px; padding: 20px; border: 5px solid black; margin: 10px; }

盒模型有两种计算方式：

标准盒模型（content-box）：width和height只包括内容区域。
替代盒模型（border-box）：width和height包括内容、内边距和边框。

/* 标准盒模型（默认） */ .box1 { box-sizing: content-box; width: 300px; padding: 20px; border: 5px solid black; /* 总宽度 = 300px + 20px*2 + 5px*2 = 350px */ } /* 替代盒模型 */ .box2 { box-sizing: border-box; width: 300px; padding: 20px; border: 5px solid black; /* 总宽度 = 300px（内容区域宽度 = 300px - 20px*2 - 5px*2 = 250px） */ }

CSS定位

CSS定位允许您控制元素在页面上的位置。

静态定位（static）

默认的定位方式，元素按照正常的文档流排列。

.static { position: static; }

相对定位（relative）

元素相对于其正常位置进行定位。

.relative { position: relative; top: 20px; left: 10px; }

绝对定位（absolute）

元素相对于最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于初始包含块（通常是body）进行定位。

.absolute { position: absolute; top: 50px; right: 30px; }

固定定位（fixed）

元素相对于浏览器窗口进行定位，即使页面滚动，元素位置也不会改变。

.fixed { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #333; color: white; padding: 10px; }

粘性定位（sticky）

元素根据用户的滚动位置进行定位，表现为相对定位和固定定位的混合。

.sticky { position: sticky; top: 0; background-color: white; padding: 10px; border-bottom: 1px solid #ddd; }

文本和排版样式

字体属性

body { font-family: "Helvetica Neue", Arial, sans-serif; font-size: 16px; font-weight: normal; font-style: normal; line-height: 1.5; letter-spacing: 0.05em; word-spacing: 0.1em; text-transform: none; text-decoration: none; text-align: left; color: #333; }

文本效果

.text-shadow { text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); } .text-outline { -webkit-text-stroke: 1px black; color: white; } .text-gradient { background: linear-gradient(to right, #ff7e5f, #feb47b); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-overflow { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 300px; }

颜色和背景

颜色表示方法

.color-rgb { color: rgb(255, 0, 0); } .color-rgba { color: rgba(255, 0, 0, 0.5); } .color-hex { color: #ff0000; } .color-hsl { color: hsl(0, 100%, 50%); } .color-hsla { color: hsla(0, 100%, 50%, 0.5); } .color-name { color: red; }

背景属性

.background { background-color: #f0f0f0; background-image: url('image.jpg'); background-repeat: no-repeat; background-position: center; background-size: cover; background-attachment: fixed; /* 简写形式 */ background: #f0f0f0 url('image.jpg') no-repeat center/cover fixed; } .background-gradient { /* 线性渐变 */ background: linear-gradient(to right, #ff7e5f, #feb47b); /* 径向渐变 */ background: radial-gradient(circle, #ff7e5f, #feb47b); /* 多色渐变 */ background: linear-gradient(45deg, #ff7e5f, #feb47b, #ff7e5f); } .background-pattern { /* 创建图案背景 */ background-image: linear-gradient(45deg, #ccc 25%, transparent 25%), linear-gradient(-45deg, #ccc 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #ccc 75%), linear-gradient(-45deg, transparent 75%, #ccc 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0px; }

布局技术

浮动布局

.float-container { overflow: auto; /* 清除浮动 */ } .float-left { float: left; width: 30%; margin-right: 2%; } .float-right { float: right; width: 68%; }

Flexbox布局

Flexbox是一种一维布局方法，用于在行或列中排列元素。

.flex-container { display: flex; flex-direction: row; /* row | row-reverse | column | column-reverse */ justify-content: space-between; /* flex-start | flex-end | center | space-between | space-around | space-evenly */ align-items: center; /* flex-start | flex-end | center | baseline | stretch */ flex-wrap: wrap; /* nowrap | wrap | wrap-reverse */ align-content: stretch; /* flex-start | flex-end | center | space-between | space-around | stretch */ gap: 10px; /* 行和列之间的间隙 */ } .flex-item { flex: 1 1 auto; /* flex-grow | flex-shrink | flex-basis */ order: 1; /* 控制元素的显示顺序 */ align-self: auto; /* auto | flex-start | flex-end | center | baseline | stretch */ }

Grid布局

Grid是一种二维布局系统，可以同时处理行和列。

.grid-container { display: grid; grid-template-columns: repeat(3, 1fr); /* 三列等宽 */ grid-template-rows: auto 100px; /* 两行，第一行自动高度，第二行100px */ gap: 20px; /* 行和列之间的间隙 */ grid-template-areas: "header header header" "sidebar main main" "footer footer footer"; } .grid-item { grid-column: 1 / 3; /* 从第1列到第3列 */ grid-row: 1 / 2; /* 从第1行到第2行 */ grid-area: main; /* 使用预定义的区域名称 */ justify-self: center; /* 水平对齐 */ align-self: center; /* 垂直对齐 */ }

多列布局

.columns { column-count: 3; /* 列数 */ column-width: 200px; /* 列宽 */ column-gap: 30px; /* 列间距 */ column-rule: 1px solid #ccc; /* 列之间的分隔线 */ column-span: all; /* 跨越所有列 */ }

响应式设计

媒体查询

媒体查询允许您根据不同的设备特性应用不同的样式。

/* 基于宽度的媒体查询 */ @media (max-width: 768px) { .container { width: 100%; padding: 10px; } } @media (min-width: 769px) and (max-width: 1024px) { .container { width: 750px; margin: 0 auto; } } @media (min-width: 1025px) { .container { width: 960px; margin: 0 auto; } } /* 基于设备方向的媒体查询 */ @media (orientation: portrait) { .sidebar { display: none; } } @media (orientation: landscape) { .sidebar { display: block; width: 25%; } } /* 基于设备特性的媒体查询 */ @media (hover: hover) { .button:hover { background-color: blue; } } @media (prefers-color-scheme: dark) { body { background-color: #121212; color: #ffffff; } }

流式布局

.fluid-container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 15px; box-sizing: border-box; } .fluid-column { width: 100%; padding: 15px; box-sizing: border-box; } @media (min-width: 768px) { .fluid-column { width: 50%; float: left; } } @media (min-width: 1024px) { .fluid-column { width: 33.333%; } }

弹性图片和媒体

img, video { max-width: 100%; height: auto; } .picture-container { position: relative; padding-bottom: 56.25%; /* 16:9 比例 */ height: 0; overflow: hidden; } .picture-container img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

过渡和动画

CSS过渡

过渡允许您在属性值变化时创建平滑的动画效果。

.transition { transition-property: all; /* 应用过渡的属性 */ transition-duration: 0.3s; /* 过渡持续时间 */ transition-timing-function: ease; /* 过渡时间函数 */ transition-delay: 0s; /* 过渡延迟时间 */ /* 简写形式 */ transition: all 0.3s ease 0s; } .transition:hover { transform: scale(1.1); background-color: #ff7e5f; }

CSS动画

动画允许您创建更复杂的动画效果，通过关键帧定义动画序列。

@keyframes slideIn { 0% { transform: translateX(-100%); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .animated { animation-name: slideIn; animation-duration: 1s; animation-timing-function: ease-out; animation-delay: 0.5s; animation-iteration-count: 1; /* 动画播放次数 */ animation-direction: normal; /* 动画方向 */ animation-fill-mode: forwards; /* 动画结束后的状态 */ animation-play-state: running; /* 动画播放状态 */ /* 简写形式 */ animation: slideIn 1s ease-out 0.5s 1 normal forwards running; }

变换

变换允许您对元素进行旋转、缩放、倾斜或平移。

.transform { /* 平移 */ transform: translate(50px, 20px); /* 缩放 */ transform: scale(1.5, 1.5); /* 旋转 */ transform: rotate(45deg); /* 倾斜 */ transform: skew(10deg, 10deg); /* 组合变换 */ transform: translate(50px, 20px) scale(1.5) rotate(45deg); /* 3D变换 */ transform: perspective(500px) rotateX(45deg) rotateY(45deg); /* 变换原点 */ transform-origin: center center; }

高级技巧和最佳实践

CSS变量

CSS变量（自定义属性）允许您定义可重用的值。

:root { --primary-color: #ff7e5f; --secondary-color: #feb47b; --text-color: #333; --background-color: #fff; --font-size-base: 16px; --spacing-unit: 8px; } .button { background-color: var(--primary-color); color: white; padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 3); font-size: var(--font-size-base); } .button:hover { background-color: var(--secondary-color); }

CSS函数

CSS提供了许多有用的函数，可以帮助您创建更灵活的样式。

.functions { /* calc() - 计算值 */ width: calc(100% - 40px); margin: calc(var(--spacing-unit) * 2); /* min() - 最小值 */ width: min(1000px, 90%); /* max() - 最大值 */ width: max(300px, 50%); /* clamp() - 限制值在范围内 */ font-size: clamp(16px, 2vw, 24px); /* url() - 引用资源 */ background-image: url('image.jpg'); /* attr() - 获取元素属性值 */ content: attr(data-title); /* var() - 使用CSS变量 */ color: var(--primary-color); }

CSS滤镜

滤镜允许您对元素应用图形效果，如模糊、亮度调整等。

.filter { /* 模糊 */ filter: blur(5px); /* 亮度 */ filter: brightness(150%); /* 对比度 */ filter: contrast(200%); /* 阴影 */ filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5)); /* 灰度 */ filter: grayscale(100%); /* 色相旋转 */ filter: hue-rotate(90deg); /* 反色 */ filter: invert(100%); /* 透明度 */ filter: opacity(50%); /* 饱和度 */ filter: saturate(200%); /* 褐色 */ filter: sepia(100%); /* 组合滤镜 */ filter: contrast(200%) brightness(150%) saturate(150%); }

CSS混合模式

混合模式控制元素如何与其背景混合。

.blend-mode { /* 背景混合模式 */ background-blend-mode: multiply; /* normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity */ /* 元素混合模式 */ mix-blend-mode: screen; /* normal | multiply | screen | overlay | darken | lighten | color-dodge | color-burn | hard-light | soft-light | difference | exclusion | hue | saturation | color | luminosity */ /* 隔离 */ isolation: isolate; /* auto | isolate */ }

CSS形状

形状允许您创建非矩形的布局。

.shape { /* 圆形 */ shape-outside: circle(50%); float: left; width: 200px; height: 200px; /* 椭圆 */ shape-outside: ellipse(150px 100px at 50% 50%); /* 多边形 */ shape-outside: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); /* 从图片获取形状 */ shape-outside: url('image.png'); shape-image-threshold: 0.5; /* 边距形状 */ shape-margin: 20px; }

实战案例

创建响应式导航栏

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Responsive Navigation</title> <style> :root { --primary-color: #ff7e5f; --secondary-color: #feb47b; --text-color: #333; --background-color: #fff; --spacing-unit: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Helvetica Neue", Arial, sans-serif; color: var(--text-color); background-color: var(--background-color); } .navbar { display: flex; justify-content: space-between; align-items: center; background-color: var(--primary-color); padding: calc(var(--spacing-unit) * 2); color: white; } .navbar .logo { font-size: 1.5rem; font-weight: bold; } .navbar .nav-links { display: flex; list-style: none; } .navbar .nav-links li { margin-left: calc(var(--spacing-unit) * 3); } .navbar .nav-links a { color: white; text-decoration: none; transition: color 0.3s ease; } .navbar .nav-links a:hover { color: var(--secondary-color); } .navbar .burger { display: none; cursor: pointer; } .navbar .burger div { width: 25px; height: 3px; background-color: white; margin: 5px; transition: all 0.3s ease; } @media (max-width: 768px) { .navbar .nav-links { position: absolute; right: 0; top: 70px; background-color: var(--primary-color); width: 100%; flex-direction: column; align-items: center; padding: calc(var(--spacing-unit) * 2) 0; transform: translateX(100%); transition: transform 0.5s ease; } .navbar .nav-links li { margin: calc(var(--spacing-unit) * 2) 0; } .navbar .burger { display: block; } .navbar .nav-active { transform: translateX(0); } .navbar .toggle .line1 { transform: rotate(-45deg) translate(-5px, 6px); } .navbar .toggle .line2 { opacity: 0; } .navbar .toggle .line3 { transform: rotate(45deg) translate(-5px, -6px); } } </style> </head> <body> <nav class="navbar"> <div class="logo">Logo</div> <ul class="nav-links"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Services</a></li> <li><a href="#">Portfolio</a></li> <li><a href="#">Contact</a></li> </ul> <div class="burger"> <div class="line1"></div> <div class="line2"></div> <div class="line3"></div> </div> </nav> <script> const burger = document.querySelector('.burger'); const nav = document.querySelector('.nav-links'); const navLinks = document.querySelectorAll('.nav-links li'); burger.addEventListener('click', () => { nav.classList.toggle('nav-active'); burger.classList.toggle('toggle'); }); navLinks.forEach(link => { link.addEventListener('click', () => { nav.classList.remove('nav-active'); burger.classList.remove('toggle'); }); }); </script> </body> </html>

创建卡片悬停效果

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Card Hover Effect</title> <style> :root { --primary-color: #ff7e5f; --secondary-color: #feb47b; --text-color: #333; --background-color: #f5f5f5; --card-background: #fff; --spacing-unit: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Helvetica Neue", Arial, sans-serif; color: var(--text-color); background-color: var(--background-color); display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: calc(var(--spacing-unit) * 4); } .card-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: calc(var(--spacing-unit) * 4); width: 100%; max-width: 1200px; } .card { background-color: var(--card-background); border-radius: 10px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; position: relative; } .card:hover { transform: translateY(-10px); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); } .card-image { height: 200px; overflow: hidden; position: relative; } .card-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .card:hover .card-image img { transform: scale(1.1); } .card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.7)); opacity: 0; transition: opacity 0.3s ease; display: flex; align-items: flex-end; padding: calc(var(--spacing-unit) * 2); } .card:hover .card-overlay { opacity: 1; } .card-overlay-text { color: white; transform: translateY(20px); transition: transform 0.3s ease; } .card:hover .card-overlay-text { transform: translateY(0); } .card-content { padding: calc(var(--spacing-unit) * 3); } .card-title { font-size: 1.5rem; margin-bottom: calc(var(--spacing-unit) * 2); color: var(--primary-color); } .card-description { color: #666; line-height: 1.6; margin-bottom: calc(var(--spacing-unit) * 3); } .card-button { display: inline-block; background-color: var(--primary-color); color: white; padding: calc(var(--spacing-unit) * 1.5) calc(var(--spacing-unit) * 3); border-radius: 5px; text-decoration: none; transition: background-color 0.3s ease; } .card-button:hover { background-color: var(--secondary-color); } .card-tag { position: absolute; top: calc(var(--spacing-unit) * 2); right: calc(var(--spacing-unit) * 2); background-color: var(--primary-color); color: white; padding: calc(var(--spacing-unit) / 2) calc(var(--spacing-unit)); border-radius: 5px; font-size: 0.8rem; z-index: 1; } </style> </head> <body> <div class="card-container"> <div class="card"> <div class="card-tag">New</div> <div class="card-image"> <img src="https://picsum.photos/seed/card1/600/400.jpg" alt="Card Image"> <div class="card-overlay"> <div class="card-overlay-text"> <h3>Special Offer</h3> <p>Limited time discount available</p> </div> </div> </div> <div class="card-content"> <h2 class="card-title">Card Title 1</h2> <p class="card-description">This is a description of the card. It provides a brief overview of the content and what the user can expect.</p> <a href="#" class="card-button">Read More</a> </div> </div> <div class="card"> <div class="card-tag">Popular</div> <div class="card-image"> <img src="https://picsum.photos/seed/card2/600/400.jpg" alt="Card Image"> <div class="card-overlay"> <div class="card-overlay-text"> <h3>Top Rated</h3> <p>Highly recommended by users</p> </div> </div> </div> <div class="card-content"> <h2 class="card-title">Card Title 2</h2> <p class="card-description">This is a description of the card. It provides a brief overview of the content and what the user can expect.</p> <a href="#" class="card-button">Read More</a> </div> </div> <div class="card"> <div class="card-tag">Featured</div> <div class="card-image"> <img src="https://picsum.photos/seed/card3/600/400.jpg" alt="Card Image"> <div class="card-overlay"> <div class="card-overlay-text"> <h3>Editor's Choice</h3> <p>Handpicked by our experts</p> </div> </div> </div> <div class="card-content"> <h2 class="card-title">Card Title 3</h2> <p class="card-description">This is a description of the card. It provides a brief overview of the content and what the user can expect.</p> <a href="#" class="card-button">Read More</a> </div> </div> </div> </body> </html>

创建加载动画

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Loading Animations</title> <style> :root { --primary-color: #ff7e5f; --secondary-color: #feb47b; --spacing-unit: 8px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: "Helvetica Neue", Arial, sans-serif; background-color: #f5f5f5; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100vh; padding: calc(var(--spacing-unit) * 4); } h1 { margin-bottom: calc(var(--spacing-unit) * 6); color: #333; } .loading-container { display: flex; flex-wrap: wrap; justify-content: center; gap: calc(var(--spacing-unit) * 6); width: 100%; max-width: 1200px; } .loading-item { display: flex; flex-direction: column; align-items: center; width: 200px; } .loading-title { margin-top: calc(var(--spacing-unit) * 2); font-size: 1rem; color: #666; } /* Spinner 1 */ .spinner-1 { width: 50px; height: 50px; border: 5px solid rgba(0, 0, 0, 0.1); border-radius: 50%; border-top-color: var(--primary-color); animation: spin 1s ease-in-out infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Spinner 2 */ .spinner-2 { width: 50px; height: 50px; border-radius: 50%; background: conic-gradient(var(--primary-color) 0%, transparent 60%); animation: spin 1s linear infinite; position: relative; } .spinner-2::before { content: ''; position: absolute; top: 5px; left: 5px; right: 5px; bottom: 5px; background: #f5f5f5; border-radius: 50%; } /* Spinner 3 */ .spinner-3 { width: 50px; height: 50px; position: relative; } .spinner-3 div { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; border: 5px solid transparent; border-top-color: var(--primary-color); animation: spin 1s linear infinite; } .spinner-3 div:nth-child(2) { width: 75%; height: 75%; top: 12.5%; left: 12.5%; border-top-color: var(--secondary-color); animation-duration: 0.8s; } .spinner-3 div:nth-child(3) { width: 50%; height: 50%; top: 25%; left: 25%; border-top-color: #333; animation-duration: 0.6s; } /* Dots 1 */ .dots-1 { display: flex; gap: 5px; } .dots-1 div { width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary-color); animation: bounce 1.4s ease-in-out infinite both; } .dots-1 div:nth-child(1) { animation-delay: -0.32s; } .dots-1 div:nth-child(2) { animation-delay: -0.16s; } @keyframes bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Dots 2 */ .dots-2 { display: flex; gap: 5px; } .dots-2 div { width: 10px; height: 10px; border-radius: 50%; background-color: var(--primary-color); animation: wave 1.2s linear infinite; } .dots-2 div:nth-child(2) { animation-delay: 0.2s; } .dots-2 div:nth-child(3) { animation-delay: 0.4s; } .dots-2 div:nth-child(4) { animation-delay: 0.6s; } .dots-2 div:nth-child(5) { animation-delay: 0.8s; } @keyframes wave { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-20px); } } /* Bars */ .bars { display: flex; gap: 3px; } .bars div { width: 5px; height: 30px; background-color: var(--primary-color); animation: bars 1.2s ease-in-out infinite; } .bars div:nth-child(2) { animation-delay: 0.1s; } .bars div:nth-child(3) { animation-delay: 0.2s; } .bars div:nth-child(4) { animation-delay: 0.3s; } .bars div:nth-child(5) { animation-delay: 0.4s; } @keyframes bars { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); } } /* Pulse */ .pulse { width: 50px; height: 50px; border-radius: 50%; background-color: var(--primary-color); animation: pulse 1.5s ease-in-out infinite; } @keyframes pulse { 0% { transform: scale(0); opacity: 1; } 100% { transform: scale(1); opacity: 0; } } /* Square */ .square { width: 50px; height: 50px; background-color: var(--primary-color); animation: square 1.5s ease-in-out infinite; } @keyframes square { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } /* Heart */ .heart { width: 50px; height: 45px; position: relative; animation: heartbeat 1.2s ease-in-out infinite; } .heart::before, .heart::after { content: ''; width: 26px; height: 40px; position: absolute; left: 25px; top: 0; background: var(--primary-color); border-radius: 25px 25px 0 0; transform: rotate(-45deg); transform-origin: 0 100%; } .heart::after { left: 0; transform: rotate(45deg); transform-origin: 100% 100%; } @keyframes heartbeat { 0% { transform: scale(1); } 14% { transform: scale(1.3); } 28% { transform: scale(1); } 42% { transform: scale(1.3); } 70% { transform: scale(1); } } </style> </head> <body> <h1>Loading Animations</h1> <div class="loading-container"> <div class="loading-item"> <div class="spinner-1"></div> <div class="loading-title">Spinner 1</div> </div> <div class="loading-item"> <div class="spinner-2"></div> <div class="loading-title">Spinner 2</div> </div> <div class="loading-item"> <div class="spinner-3"> <div></div> <div></div> <div></div> </div> <div class="loading-title">Spinner 3</div> </div> <div class="loading-item"> <div class="dots-1"> <div></div> <div></div> <div></div> </div> <div class="loading-title">Dots 1</div> </div> <div class="loading-item"> <div class="dots-2"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="loading-title">Dots 2</div> </div> <div class="loading-item"> <div class="bars"> <div></div> <div></div> <div></div> <div></div> <div></div> </div> <div class="loading-title">Bars</div> </div> <div class="loading-item"> <div class="pulse"></div> <div class="loading-title">Pulse</div> </div> <div class="loading-item"> <div class="square"></div> <div class="loading-title">Square</div> </div> <div class="loading-item"> <div class="heart"></div> <div class="loading-title">Heart</div> </div> </div> </body> </html>