html部分代码
css部分代码
.wrapper { height: 100px; width: 100px; border: 1px solid red;
position: relative; }.circle { height: 10px; width: 10px; background-color: black; border-radius: 100%;
position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; animation: dada 2s linear infinite; }.circle:nth-child(2) { animation-delay: 1s;
}@keyframes dada {
0% { height: 0px; width: 0px; opacity: 1;
}
100% { height: 100px; width: 100px; opacity: 0;
}
}改进：如何只用一个圆实现呢？用伪元素::before和::after。
html部分代码:只需要用一个容器，容器本身用来定位
css部分代码：容器中两个圆，用::befor和::after来实现
.wrapper { height: 200px; width: 200px; border: 1px solid red;
position: relative;
}.wrapper::before,.wrapper::after{ content: ''; height: 10px; width: 10px; background-color: black; border-radius: 100%;
position: absolute; left: 0; top: 0; bottom: 0; right: 0; margin: auto; animation: dada 2s linear infinite;
}.wrapper::after { animation-delay: 1s;
}
@keyframes dada {
0% { height: 0px; width: 0px; opacity: 1;
}
100% { height: 100px; width: 100px; opacity: 0;
}
}二、将动画效果加入到网页中思路：1、采用fixed，让其置于所有页面的正上方。2、然后为其添加一个状态active，当页面加载完毕时，去除active，使其不可见。html代码
css部分代码
.loading { display: none; background-color: antiquewhite; position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-indx: 1; justify-content: center; align-items: center;
}.loading.active { display: flex;
}js部分代码：当页面加载完毕时(在body下添加script即可)，去除掉loading中的active的class名
setTimeout(function(){
siteLoading.classList.remove('active')
},2000)这里的setTimeout设置是为了2000ms的延迟触发，不然网速太快，loading动画根本看不见啦。。。
作者：饥人谷_朱笑笑啊
链接：https://www.jianshu.com/p/5f88ef3d980d
