网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
本篇文章就给大家分享四种css3的页面加载动画。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。
前两天从一个网站中看到了一些比较好的loading动画效果,是用纯CSS3来写的,感觉不错,就尝试着照着效果来自己写出来。
在开始之前,先复习一个小知识:CSS3新增的关键帧动画,可以用来实现很多的动画,我们可以通过animation-delay来控制动画延迟执行,来实现丰富的效果。
当animation-delay的值为正值时,动画将被延迟从初始状态开始执行;
当animation-delay的值为负数时,动画将被提前从该值(负数的绝对值)对应的状态开始执行。
(效果图片可能不太清楚,请谅解)
一、第一种效果
一共16个小正方形,将位置定位,通过关键帧来改变正方形的透明度
{animation: ball 2s 0s ease infinite;}
@keyframes ball {
0%{
opacity: 1;
}
50%{
opacity: 1;
}
51%{
opacity: 0;
}
}
对每一个正方形设置animation-delay值,在这里我的整体动画耗时是2s,均分16个正方形是0.125s,于是我设置的animation-delay值是从-1.875s开始以0.125的数差开始增加一直到0。