数据结构
网络
RDBMS
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
时尚研究
法律研究HTML & CSS 中的新拟态加载动画
在本文中，我们将使用 **HTML** 和 **CSS** 创建一个新拟态加载动画。加载动画是常用的 UI 元素，用于指示正在进行的进程，例如加载内容或等待来自服务器的数据。我们将使用新拟态设计技术为其增添现代气息。
新拟态设计通过组合元素周围的高光和阴影来呈现 3D 效果，使它们看起来像是凸出或凹陷到表面。
方法
让我们逐步了解如何创建新拟态加载动画。
设置 HTML 结构
我们将从编写简单的 HTML 结构开始。动画将由一个 div 元素组成，我们将对其进行样式设置以创建新拟态效果。
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1><span>tutorials</span>point</p>
<div class="spinner-container">
<div class="spinner"></div>
</div>
</body>
</html>
为新拟态动画添加 CSS
接下来，我们需要使用 CSS 为动画设置样式。关键在于以某种方式添加阴影，使元素看起来像是凸起或压入背景。我们将使用 box-shadow 属性来实现此效果。
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f3;
margin: 0;
}
span {
color: green;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ecf0f3;
position: relative;
box-shadow:
8px 8px 15px #b8b9be,
-8px -8px 15px #fff;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
CSS 代码说明
- 使用 **Flexbox** 将主体水平和垂直居中。背景颜色设置为柔和的浅灰色 (#ecf0f3)，这是新拟态设计中常见的背景颜色。并且 div 使用 Flexbox 居中动画。
- 新拟态设计中最重要的部分是 **box-shadow** 属性。阴影以不同的强度和方向进行战略性地放置。底部右侧的深色阴影 (#b8b9be) 和顶部左侧的浅色阴影 (#fff) 创造了凸起的 3D 元素的错觉。
- 动画属性使用 **@keyframes** 应用旋转。动画使用 spin 关键帧无限旋转，在 1.5 秒内旋转 360 度。
- **.spinner::before** 创建一个模拟实际加载动画的内部旋转元素。它具有带彩色顶部边框 (#3498db) 的边框，从而创建旋转弧线效果。
示例
组合 HTML 和 CSS 代码后，我们可以获得新拟态加载动画的结果。
<!DOCTYPE html>
<html lang="en">
<head>
<title>Neumorphism Loading Spinner</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #ecf0f3;
margin: 0;
}
span {
color: green;
}
.spinner-container {
display: flex;
justify-content: center;
align-items: center;
}
.spinner {
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #ecf0f3;
position: relative;
box-shadow:
8px 8px 15px #b8b9be,
-8px -8px 15px #fff;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinner::before {
content: '';
position: absolute;
top: 12px;
left: 12px;
width: 76px;
height: 76px;
border-radius: 50%;
border: 4px solid transparent;
border-top-color: #3498db;
animation: spin 1s linear infinite;
}
</style>
</head>
<body>
<h1><span>tutorials</span>point</p>
<div class="spinner-container">
<div class="spinner"></div>
</div>
</body>
</html>
输出
更新于: 2024年9月20日
82 次浏览
广告