这是 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!
仿站人员都知道仿站挣的就是时间钱,我们做的越快才能挣的越多,那么提高我们正常的仿站效率是每个仿站人员必修技能,那么快速仿站有哪些技巧呢和...
您好,php网站搭建需要你有php程序源码,Windows服务器系统可以使用phpstudy搭建 phpstudy搭建教程 如果是linux服务器建议安装宝塔搭建程序 ...
仿站是指参照原先的网站的制作一个和原来的网站一样的,包括他的框架及内部的一些数据以及原先网站的功能都可以一 一仿出来。仿出来的网站也...
网站的功能是可以仿下来的,只是功能性的东西属于二次开发,不是网站拷贝那么简单。原网站的一些功能开发我们经常遇到的就是培训学员的证书查询...
cms系统已经成为建站的首选,因为现有的cms非常多,用户数量也很多。cms入门很快,加上cms本身提供的模版也超多,因此建一个站不超过10分钟。在众多...
仿站网下面教大家如何确定站点目标?在创建网站时,决定站点的目标是第一步。设计者应清楚建立站点的目标,即确定它将提供什么样的服务,网页中...