[分享]css3加载动画 好看

伴随着互联网技术的快速发展，对于网站的用户体验要求也日益提高。为了提高网站页面的视觉效果和操作体验，web前端开发人员在页面设计时都会使用一些特效效果，其中，CSS3加载动画是受到人们普遍欢迎的特效之...

伴随着互联网技术的快速发展，对于网站的用户体验要求也日益提高。为了提高网站页面的视觉效果和操作体验，web前端开发人员在页面设计时都会使用一些特效效果，其中，CSS3加载动画是受到人们普遍欢迎的特效之一。下面我来介绍一些非常好看的CSS3加载动画。

.spinner{ position: relative; margin: 0 auto; width: 64px; height: 64px;}.spinner div{ box-sizing: border-box; position: absolute; width: 51.2px; height: 51.2px; border: 5.12px solid #4b7196; /*可以根据需求更改颜色*/ border-radius: 50%; animation: spinner 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite; border-bottom-color: transparent;}.spinner div:nth-of-type(1){ animation-delay: -0.45s;}.spinner div:nth-of-type(2){ animation-delay: -0.3s;}spinner div:nth-of-type(3){ animation-delay: -0.15s;}@keyframes spinner{ to { transform: rotate(360deg); }}

如上所示，这是一个非常简单但十分好看的加载动画，可以用作页面加载时的loading效果。在样式中，我们先定义一个.spinnger类来设置容器的属性，包括宽度、高度和居中等，然后使用伪类来定义3个相同大小的球，利用关键帧动画让球摆动起来即可实现非常完美的loading效果。

除了上面的加载动画，还有很多其他非常炫酷的效果，web前端开发人员可以自由发挥，通过不同的组合和调整，制作出非常华丽的效果，让访问者尽享视觉盛宴，增强用户粘性和转化率。