In addition to Weibo, there is also WeChat
Please pay attention
WeChat public account
Shulou
2025-04-02 Update From: SLTechnology News&Howtos shulou NAV: SLTechnology News&Howtos > Development >
Share
Shulou(Shulou.com)06/02 Report--
这篇"如何使用CSS时间打点的Loading效果"文章的知识点大部分人都不太理解,所以小编给大家总结了以下内容,内容详细,步骤清晰,具有一定的借鉴价值,希望大家阅读完这篇文章能有所收获,下面我们一起来看看这篇"如何使用CSS时间打点的Loading效果"文章吧。
1. 渐进兼容
支持CSS3 animation动画的浏览器显示的就是打点动画效果;对于不支持的浏览器,IE7/IE8显示的是真实的字符..., IE9浏览器虽然也是CSS3生成,但是是静态的,没有动画效果;此乃渐进兼容。
2. 实现原理
首先HTML非常简单,就是一个标签一个类名(标签里面一定要空空如也),其他什么都不需要关心,就可以游刃几乎各种场景,如下:
XML/HTML Code复制内容到剪贴板
订单提交中
上面代码这个类名为dotting的span就是我们所有的玄机所在,页面任意地方,只要有这一小撮HTML就可以有打点动画,与文字混排良好,且颜色自动匹配。例如,本文"标题一"和"标题二"后面的点点点动画就是添加了这么点HTML.
下面是万众瞩目的CSS代码了:
CSS Code复制内容到剪贴板
.dotting {
display: inline-block; min-width: 2px; min-height: 2px;
box-shadow: 2px 0 currentColor, 6px 0 currentColor, 10px 0 currentColor; /* for IE9+, ..., 3个点 */
animation: dot 4s infinite step-start both; /* for IE10+, ... */
*zoom: _expression(this[xss_clean] = '...'); /* for IE7. 若无需兼容IE7, 此行删除 */
}
.dotting:before { content: '...'; } /* for IE8. 若无需兼容IE8, 此行以及下一行删除*/
.dotting::before { content: ''; } /* for IE9+ 覆盖 IE8 */
:root .dotting { margin-right: 8px; } /* for IE9+,FF,CH,OP,SF 占据空间*/
@keyframes dot {
25% { box-shadow: none; } /* 0个点 */
50% { box-shadow: 2px 0 currentColor; } /* 1个点 */
75% { box-shadow: 2px 0 currentColor, 6px 0 currentColor; /* 2个点 */ }
}
上面每行CSS都有其存在的道理(详见注释),这里我们又看到了currentColor这个关键字,IE9+浏览器支持,其可以让CSS生成的图形的颜色跟所处环境的color属性值一样,也就是跟文字颜色一样,具体可参考我不久前写的"currentColor-CSS3超高校级好用CSS关键字"一文。
我们动画一个周期4秒钟,每秒分别显示的是0~3个点,使用step-start让动画不连续(animation所有关键字"CSS3 animation渐进实现点点点等待提示效果"这篇文章后面深藏详细介绍,如有疑问,可参考),于是就有个类似gif打点动画效果,相信不难理解。
3. 美中不足
虽然几乎所有浏览器都有模有样,但是,从效果上讲,还是有瑕疵的,IE10+以及FireFox浏览器下的点的边缘有些虚(参见下截图),虽然CSS代码并没有设置盒阴影模糊。这种羽化现象可以让IE以及FireFox在大数值盒阴影时候效果更接近photoshop的阴影效果;但是,在小尺寸阴影时候,并不是我们想要的。
苛刻的设计师、完美主义的处女座显然是不能对这个置若罔闻的。好在,我又想了另外一种方法实现
基于border + background实现的打点效果
我们除了可以使用box-shadow生成三个点,还可以使用border + background-color实现等宽3点效果(如本标题)。
您可以狠狠地点击这里:animation border+background渐进实现打点动画demo
1. 渐进兼容
IE9以及IE10+以及FireFox的点再也不是模糊的,而是清清楚楚的小方点!
2. 实现原理
HTML还是那个HTML:
XML/HTML Code复制内容到剪贴板
订单提交中
CSS代码如下:
CSS Code复制内容到剪贴板
.dotting {
display: inline-block; width: 10px; min-height: 2px;
padding-right: 2px;
border-left: 2px solid currentColor; border-right: 2px solid currentColor;
background-color: currentColor; background-clip: content-box;
box-sizing: border-box;
animation: dot 4s infinite step-start both;
*zoom: _expression(this[xss_clean] = '...'); /* IE7 */
}
.dotting:before { content: '...'; } /* IE8 */
.dotting::before { content: ''; }
:root .dotting { margin-left: 2px; padding-left: 2px; } /* IE9+ */
@keyframes dot {
25% { border-color: transparent; background-color: transparent; } /* 0个点 */
50% { border-right-color: transparent; background-color: transparent; } /* 1个点 */
75% { border-right-color: transparent; } /* 2个点 */
}
一些说明:
同样是4秒动画,每秒钟显示1个点;
IE7/IE8实现原理跟上面box-shadow方法一致,都是内容生成,如果无需兼容IE7/IE8, 可以按照第一个例子CSS代码注释说明删除一些CSS;
currentColor关键字可以让图形字符化,必不可少;
最大功臣是CSS3 background-clip属性,可以让IE9+浏览器下左右padding没有背景色,于是形成了等分打点效果。CSS3 Background博大精深,有兴趣可参考一篇很赞的文章"CSS3 Backgrounds相关介绍",很多图,移动端非wifi慎点;
box-sizing是让敕勒浏览器和IE7/IE8占据宽度完全一样的功臣:IE7/IE8实际宽度是width+padding-right为12像素,其他敕勒浏览器为width+margin-left也是12像素;
这里CSS代码主要用来展示原理,故没有显示-webkit-animation以及@-webkit-keyframes私有前缀,实际目前还是需要的;
3. 优势所在
CSS生成的点没有虚化,效果更好;
占据的尺寸各个浏览器完全一致,都是12像素宽度;
颜色继承;
天然字符化显示,与文字浑然天成;
以上就是关于"如何使用CSS时间打点的Loading效果"这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注行业资讯频道。
Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.
Views: 0
*The comments in the above article only represent the author's personal views and do not represent the views and positions of this website. If you have more insights, please feel free to contribute and share.
Continue with the installation of the previous hadoop.First, install zookooper1. Decompress zookoope
"Every 5-10 years, there's a rare product, a really special, very unusual product that's the most un
© 2024 shulou.com SLNews company. All rights reserved.