这是一款css3炫酷3D立方体预加载loading特效。该特效通过简单的HTML元素和CSS3代码,构建几个立方体不停运动的动画特效,适用于做页面的loading效果。 代码解析 在HTML文件中引入下面的文件。 代码语言:javascript 代码运行次数:0 运行 AI代码解释 <link rel="stylesheet" type="text/css"
.loader { text-align: center; } .loader span { display: inline-block; vertical-align: middle; width: 10px; height: 10px; margin: 50px auto; background: black; border-radius: 50px; -webkit-animation: loader 0.9s infinite alternate; -moz-animation: loader 0.9s infinite alternate; } ....
} #loading-text { -moz-animation: loading-text-opacity 2s linear 0s infinite normal; -o-animation: loading-text-opacity 2s linear 0s infinite normal; -webkit-animation: loading-text-opacity 2s linear 0s infinite normal; animation: loading-text-opacity 2s linear 0s infinite normal; color: ...
CSS代码 .time-1 { width: 60px; height: 60px; border:4px solid; border-radius: 50%; display: flex; background: radial-gradient(circle 5px, currentColor 95%,#0000), linear-gradient(currentColor 50%,#0000 0) center/4px 60% no-repeat; animation: t1 2s infinite linear; } .time-1:befo...
.spinner-text { animation: loading-opacity 3s ease-in-out infinite; font-size: 2em; } .spinner-sector-blue { animation: rotate 2s ease-out infinite; border-top: 15px solid lightblue; } .spinner-sector-red { animation: rotate 2.5s ease-in infinite; ...
完整的代码,你可以戳这里:CodePen Demo -- Pure CSS Loading Animation 修复违和感 当然,上面的效果,乍一看还行,仔细看,违和感很重。 原因在于,扩散出来的小球也跟着半圆环一起进行了旋转动画,看上去就有点奇怪。 正确的做法应该是,圆环尾部的气泡应该是原地发散消失的。
52s; } .loading span:nth-child(5){ -webkit-animation-delay:0.65s; } 第6-8种效果: 代码如下: <div class="loading"> <span></span> <span></span> <span></span> <span></span> <span></span> </div> 第6-8种效果的css样式分别为: .loading{ width: 150px; height: 15px; margin...
利用CSS content内容生成技术以及CSS3 animation实现的,并且几乎没有任何的不足,这里给大家展示下如何实现的。...本文利用content实现字符打点loading效果我是在这个github项目看到的:tawian/text-spinners 当然,我自己还有一丝欣慰的,就是站在巨人的肩上,我细节要比原实现要好,好在没有使用任何...原来的实现content是...
BttrLazyLoading depends on jQuery (meaning jQuery must be included before the plugin files) andAnimate.css(optional) for animations. <script src="jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="bttrlazyloading.min.css" /> <link rel="stylesheet" type="text/css" ...
12. Newton’s Cradle CSS Animation This example from CodePen is an impressively creative recreation of a Newton's cradle effect that you can adapt for a loading animation. I’ve taken the code and modified it for a more minimalist look: 13. Liquid Fill Loading Animation This CodePen animati...