HTML5+CSS3做一个有趣的沙漏加载动画,如此精致的沙漏,如果我说这个没有用到图片,纯CSS实现,你信吗?这个loading虽然看起来简单,但是你仔细拆解一番,你会发现其中居然用了四个动画,所以这个实例可以有效的锻炼大家的CSS动画。
效果:
源码:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<title>纯CSS实现沙漏加载动画</title>
<link rel="stylesheet" href="../css/19.css">
</head>
<body>
<div class="loading">
<span class="top"></span>
<span class="bottom"></span>