使用css动画实现loding效果

代码如下：

<!doctype html>
<html><head><meta charset="ulf-8"><title>CSS动画实现loading效果</title><style type="text/css">*{margin:0;padding:0;}.circlebox{width:40px;height:40px;/*border:1px solid red;*/margin:100px; position:absolute;}.circlebox p{width:12px;height:12px;background:#abc124;border-radius:50%;position:absolute;animation:move 1.5s infinite linear;}.circlebox p:nth-of-type(1){left:0;top:0;}.circlebox p:nth-of-type(2){right:0;top:0;}.circlebox p:nth-of-type(3){right:0;bottom:0;}.circlebox p:nth-of-type(4){left:0;bottom:0;}.circlebox:nth-of-type(2){transform:rotate(45deg);}@keyframes move{0%{transform:scale(0);}50%{transform:scale(1);}100%{transform:scale(0);}}.circlebox:nth-of-type(1) p:nth-of-type(1){animation-delay:-0.1s;}.circlebox:nth-of-type(2) p:nth-of-type(1){animation-delay:-0.3s;}.circlebox:nth-of-type(1) p:nth-of-type(2){animation-delay:-0.5s;}.circlebox:nth-of-type(2) p:nth-of-type(2){animation-delay:-0.7s;}.circlebox:nth-of-type(1) p:nth-of-type(3){animation-delay:-0.9s;}.circlebox:nth-of-type(2) p:nth-of-type(3){animation-delay:-1.1s;}.circlebox:nth-of-type(1) p:nth-of-type(4){animation-delay:-1.3s;}.circlebox:nth-of-type(2) p:nth-of-type(4){animation-delay:-1.4s;}</style> </head><body><div class="circlebox"><p></p><p></p><p></p><p></p></div><div class="circlebox"><p></p><p></p><p></p><p></p></div></body>
</html>

使用css动画实现loding效果相关推荐

CSS动画实现心跳效果
CSS动画实现心跳效果简介实现步骤代码效果简介使用CSS动画animation 和tranform(缩放.旋转). 实现步骤添加p元素内容之前/之后插入,一个宽为100px,高为160p ...
利用css动画实现打字机效果
简言通过使用css的animation(动画属性)实现文字显示的打字机效果. 单行思路实现步骤: 将文本框属性设置为等宽字体,计算文本框的字数,设置文字大小.相对布局等. 将文本框隐藏,通过动画 ...
css动画放大缩小效果
1.实现星星变大变小忽闪的感觉 html: <div class="xing_one my_xing"><img src="~@/static/imag ...
【实战】用CSS实现文本打字机效果
之前,我们的文章中已经有通过 JS 的方式实现文本打字机的效果了,具体可以看这篇文章: [前端三分钟]利用Javascript实现打字效果在本文中,你将学习如何使用纯CSS实现打字机效果,使网站的文 ...
CSS动画效果无限循环放大缩小
效果图: CSS动画效果无限循环放大缩小 <image class="anima" mode="widthFix" @click="nav&qu ...
动画延迟效果css,每个子元素都有延迟的CSS动画
每个子元素都有延迟的CSS动画我试图通过将动画应用于每个子元素来创建级联效果. 我想知道是否有比这更好的方法: .myClass img:nth-child(1){ -webkit-animatio ...
css鼠标移入线条延中心伸长,css动画效果：鼠标移上去底部线条从中间往两边延伸 - 子成君-分享出去，快乐加倍！-旧版已停更...
本站已不再更新,最新资源请前往zcjun.com获取! css: .top-nav a:after { content: ' '; position: absolute; z-index: 2; bo ...
赞！15个来自 CodePen 的酷炫 CSS 动画效果
CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...
“约见”面试官系列之常见面试题第十三篇之css动画效果（建议收藏）
目录 CSS动画简介第一部分:CSS Transition 1.1 基本用法 1.2 transition-delay 1.3 transition-timing-function 1.4 tran ...

使用css动画实现loding效果

使用css动画实现loding效果相关推荐

最新文章

热门文章