【动画消消乐】HTML+CSS 自定义加载动画 061 (2)

日期：2022-03-01 栏目：程序人生浏览：次

在这里插入图片描述

第三帧

显示阴影1、2

阴影3不显示

box-shadow: 32px 32px, 32px 32px, 32px 0px

效果图如下

在这里插入图片描述

第四帧

同时显示阴影1、2、3

box-shadow: 0px 32px, 32px 32px, 32px 0px

效果图如下

在这里插入图片描述

动画从第一帧逐步过渡至第四帧

span::after { animation: loading 2s linear infinite alternate; } @keyframes loading { 0% { box-shadow: 0 0, 0 0, 0 0 } 33% { box-shadow: 32px 0px, 32px 0px, 32px 0px } 66% { box-shadow: 32px 32px, 32px 32px, 32px 0px } 100% { box-shadow: 0px 32px, 32px 32px, 32px 0px } }

效果图如下

在这里插入图片描述