HTML5+CSS3做一个酷炫的多彩菱形加载动画，代码超简单，一个简单的动画，再加一个动画延迟，搞定。真想不到如此简单的代码，可以做出这么好看的loading动画，兄弟们，可别再说手残做不出来啦。效果：源码：
HTML5+CSS3做一个酷炫的多彩菱形加载动画，代码超简单，一个简单的动画，再加一个动画延迟，搞定。真想不到如此简单的代码，可以做出这么好看的loading动画，兄弟们，可别再说手残做不出来啦。
效果：
源码：
<!DOCTYPEhtml><html><head><metahttp-equiv="content-type"content="text/html;charset=utf-8"><metaname="viewport"content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no"><title>菱形加载动画</title><linkrel="stylesheet"href="../css/17.css"></head><body><divclass="loading"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div></body></html>
body{margin:0;padding:0;height:100vh;display:flex;justify-content:center;align-items:center;background:linear-gradient(200deg,#f4efef,#e3eeff);}.loading{width:200px;height:200px;display:grid;/*制作3列的网格容器*/grid-template-columns:repeat(3,1fr);/*设置行与列之间的间隙*/grid-gap:10px;/*对子部分进行编号*//*counter-reset:number;*/transform:rotate(45deg);}.loadingspan{/*自定义属性*/--c:gray;/*调用var函数使用自定义属性--c*/background-color:var(--c);position:relative;transform:scale(0);/*执行动画：动画时长线性的无线次播放*/animation:blinking2slinearinfinite;/*动画延迟*/animation-delay:var(--d);}.loadingspan::before{/*设置增量*//*counter-increment:number;*//*将编号赋值到content，这里有助于我们根据编号设置样式*//*content:counter(number);*/position:absolute;width:100%;height:100%;text-align:center;transform:rotate(-45deg);}.loadingspan:nth-child(7){--c:#F15A5A;--d:0s;}.loadingspan:nth-child(4),.loadingspan:nth-child(8){--c:#F0C419;--d:0.2s;}.loadingspan:nth-child(1),.loadingspan:nth-child(5),.loadingspan:nth-child(9){--c:#4EBA6F;--d:0.4s;}.loadingspan:nth-child(2),.loadingspan:nth-child(6){--c:#2D95BF;--d:0.6s;}.loadingspan:nth-child(3){--c:#955BA5;--d:0.8s;}/*定义动画缩放*/@keyframesblinking{0%,100%{transform:scale(0);}40%,80%{transform:scale(1);}}原文：
https://juejin.cn/post/70960271411118080302024-09-18
HTML5+CSS3实现简洁好看的侧边栏菜单(6款) 
