CSS3动画：5种预载动画效果实例

2024-07-11 08:32:14

字体：大中小

来源：转载

供稿：网友

实现如图所示的动画效果：

预载动画一：双旋圈

在两个不同方向旋转的圆圈。我们对内圈的转速定义了一个CSS代码，即内圈比外圈的速率快2倍。

实现如图所示：

html代码：

css代码：

#preloader-1{ position: relative;}#preloader-1 span{ position: absolute; border:8px solid #fff; border-top:8px solid transparent; border-radius: 999px;}#preloader-1 span:nth-child(1){ width:80px; height: 80px; animation: spin-1 2s infinite linear;}#preloader-1 span:nth-child(2){ top:20px; left:20px; width:40px; height: 40px; animation: spin-2 1s infinite linear;}@keyframes spin-1{ 0%{transform: rotate(360deg); opacity: 1.0;} 50%{transform: rotate(180deg); opacity: 0.5;} 100%{transform: rotate(0deg);opacity: 0;}}@keyframes spin-2{ 0%{transform: rotate(0deg); opacity: 0.5;} 50%{transform: rotate(180deg); opacity: 1;} 100%{transform: rotate(360deg);opacity: 0.5;}}

预载动画二：交错圈

两个圆圈进行横向交错来回移动。每个圆圈都设置了单独的反向移动动画参数。

效果：

html代码：

css代码：

#preloader-2{ position: relative;}#preloader-2 span{ position: absolute; width:30px; height: 30px; background: #fff; border-radius: 999px;}#preloader-2 span:nth-child(1){ animation: cross-1 1.5s infinite linear;}#preloader-2 span:nth-child(2){ animation: cross-2 1.5s infinite linear;}@keyframes cross-1{ 0%{transform: translateX(0); opacity: 0.5;} 50%{transform: translateX(80px); opacity: 1;} 100%{transform: translateX(0);opacity: 0.5;}}@keyframes cross-2{ 0%{transform: translateX(80px); opacity: 0.5;} 50%{transform: translateX(0); opacity: 1;} 100%{transform: translateX(80px);opacity: 0.5;}}

预载动画三：旋转圈

效果：