这是 Element UI loading 组件的效果图,看起来很酷,我们来实现一下!
动画由两部分组成:
蓝色的弧线由点伸展成一个圆,又从圆收缩成一个点。
圆的父节点带着圆旋转
代码 html
<svg viewBox="25 25 50 50" class="box">
<circle cx="50" cy="50" r="20" fill="none" class="circle"></circle>
</svg>
css 默认样式
.box {
height: 200px;
width: 200px;
background: wheat;
}
.box .circle {
stroke-width: 2;
stroke: #409eff;
stroke-linecap: round;
}
添加动画效果
/* 旋转动画 */
@keyframes rotate {
to {
transform: rotate(1turn)
}
}
/* 弧线动画 */
/* 125 是圆的周长 */
@keyframes circle {
0% {
/* 状态1: 点 */
stroke-dasharray: 1 125;
stroke-dashoffset: 0;
}
50% {
/* 状态2: 圆 */
stroke-dasharray: 120, 125;
stroke-dashoffset: 0;
}
to {
/* 状态3: 点(向旋转的方向收缩) */
stroke-dasharray: 120 125;
stroke-dashoffset: -125px;
}
}
.box {
/* ...同上 */
animation: rotate 2s linear infinite;
}
.circle {
/* ...同上 */
animation: circle 2s infinite;
}
最后把背景去掉
在线代码演示 https://jsbin.com/yarufoy/edit?html,css,output
到此这篇关于纯html+css实现Element loading效果的文章就介绍到这了,更多相关html+css实现 loading内容请搜索仿站网www.ecmsw.cn以前的文章或继续浏览下面的相关文章,希望大家以后多多支持仿站网www.ecmsw.cn!
仿站是一种什么样的概念?仿站 顾名思意就是仿制别人的网站。为什么要仿别人的网站呢?因为如果不仿制,那么找网络公司设计一个网站,首先美工要把...
怎么仿站应该是每一个希望学习仿站的人都必须要了解的。如果不在仿站之前了解一下,仿站可能不成功,或者仿出来的网站没有真正的意义。下面仿站...
现在很多的企业都是做网站的了,现在的网站建设主要有仿站和全新建站的区别,很多的客户都是会想认为仿站就是抄袭别人的网站的,其实不是这样的,仿...
仿站是什么意思?其实仿站最简单的理解就是你发一个网站给我,然后我仿制出来一个一模一样的,记住了是可以百分百一样的,一般的用户是仿界面,然后修...
一定要确定一个事实,网站备案的本质,就是监管网站制作人的。是监管主办者本人为目的的。 所以一个公民,一个责任人,一个主办者,只允许有一...
你好,在云主机上搭建网站是和物理服务器上搭建一样的,在云主机上装一个IIS,数据库,然后上传网站程序和数据库到服务器上,再在IIS上绑定一下您网站...