CSS loading 动画案例

最新推荐文章于 2022-08-22 16:34:12 发布

CodeCode!

最新推荐文章于 2022-08-22 16:34:12 发布

阅读量824

点赞数

分类专栏： CSS 文章标签： animation css3 css 3d

本文链接：https://blog.csdn.net/qq_42847094/article/details/108039474

版权

本文展示了使用CSS3创建的各种loading动画效果，探讨了如何利用animation和3D特性实现动态加载指示器。

摘要由CSDN通过智能技术生成

CSS loading 动画案例

效果：

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.loading{
    
				margin: 0 auto;
				width: 300px;
				height: 300px;
				position: relative; /*相对定位*/
			}
			.loading .circle{
    
				width: 300px;
				height: 300px;
				position: absolute; /*绝对定位*/
				left: 0;
				top: 0;
				
			}
			/*小球*/
			.small{
    
				width: 30px;
				height: 30px;
				background: deepskyblue;
				margin: 10px auto