CSS实现的全屏预下载应答效果
循环变化的逐渐变宽的线结构，随着窗口大小，铺满整个页面
<!-- HTML代码片段中请勿添加<body>标签 //-->
<div id='preloader'>
<span>loading</span>
<div class='spinner'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div class='spinner'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div class='spinner'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div class='spinner'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div class='spinner'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div class='spinner'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
<div class='spinner'>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
<div class='line'></div>
</div>
</div>
<!-- 推荐开源CDN来选取需引用的外部JS //-->
<script type="text/javascript" src="http://cdn.gbtags.com/jquery/1.11.1/jquery.min.js"></script>
/*CSS源代码*/
body {background: #1abc9c; overflow: hidden}
@-webkit-keyframes span {
0%{
opacity: 0;
-webkit-transform: scale(.6);
transform: scale(.6);
}
60% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@keyframes span {
0%{
opacity: 0;
-webkit-transform: scale(.6);
transform: scale(.6);
}
60% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
opacity: 0;
-webkit-transform: scale(1);
transform: scale(1);
}
}
@-webkit-keyframes line {
0%{
width: 30vmin;
opacity: 0;
}
10%{
opacity: 1;
}
100% {
width: 400vmin;
}
}
@keyframes line {
0%{
width: 30vmin;
opacity: 0;
}
10%{
opacity: 1;
}
100% {
width: 400vmin;
}
}
@-webkit-keyframes inner {
from {
width: 16%;
}
to {
width: 0%;
}
}
@keyframes inner {
from {
width: 16%;
}
to {
width: 0%;
}
}
#preloader {
color: white;
position: absolute;
text-align: center;
top: 50%;
left: 50%;
}
#preloader span{
font-family: Arial, Helvetica, sans-serif;
font-size: 6vmin;
line-height: 6vmin;
position: absolute;
top: 50%;
left: 50%;
width: 200px;
margin-left: -100px;
margin-top: -3vmin;
-webkit-animation: span 1.333s linear infinite;
animation: span 1.333s linear infinite;
}
.spinner {
position: absolute;
top: 50%;
left: 50%;
}
.spinner .line {
position: absolute;
height: 0.8vmin;
-webkit-animation: line 8s linear infinite;
animation: line 8s linear infinite;
}
.spinner .line::before, .spinner .line::after {
content: '';
position: absolute;
display: block;
top: 0;
right: 0;
width: 100%;
height: 100%;
background: currentColor;
-webkit-transform-origin: right;
-ms-transform-origin: right;
transform-origin: right;
-webkit-animation: inner 8s linear infinite;
animation: inner 8s linear infinite;
}
.spinner .line::before {
-webkit-transform: translateX(-0.5em) rotate(30deg) translateX(0.1em);
-ms-transform: translateX(-0.5em) rotate(30deg) translateX(0.1em);
transform: translateX(-0.5em) rotate(30deg) translateX(0.1em);
}
.spinner .line::after {
-webkit-transform: translateX(-0.5em) rotate(-30deg) translateX(0.1em);
-ms-transform: translateX(-0.5em) rotate(-30deg) translateX(0.1em);
transform: translateX(-0.5em) rotate(-30deg) translateX(0.1em);
}
.spinner .line:nth-child(1) {
-webkit-transform: translate(-50%, -50%) rotate(60deg);
-ms-transform: translate(-50%, -50%) rotate(60deg);
transform: translate(-50%, -50%) rotate(60deg);
}
.spinner .line:nth-child(2) {
-webkit-transform: translate(-50%, -50%) rotate(120deg);
-ms-transform: translate(-50%, -50%) rotate(120deg);
transform: translate(-50%, -50%) rotate(120deg);
}
.spinner .line:nth-child(3) {
-webkit-transform: translate(-50%, -50%) rotate(180deg);
-ms-transform: translate(-50%, -50%) rotate(180deg);
transform: translate(-50%, -50%) rotate(180deg);
}
.spinner .line:nth-child(4) {
-webkit-transform: translate(-50%, -50%) rotate(240deg);
-ms-transform: translate(-50%, -50%) rotate(240deg);
transform: translate(-50%, -50%) rotate(240deg);
}
.spinner .line:nth-child(5) {
-webkit-transform: translate(-50%, -50%) rotate(300deg);
-ms-transform: translate(-50%, -50%) rotate(300deg);
transform: translate(-50%, -50%) rotate(300deg);
}
.spinner .line:nth-child(6) {
-webkit-transform: translate(-50%, -50%) rotate(360deg);
-ms-transform: translate(-50%, -50%) rotate(360deg);
transform: translate(-50%, -50%) rotate(360deg);
}
.spinner:nth-child(1) .line, .spinner:nth-child(1) .line::before, .spinner:nth-child(1) .line::after {
-webkit-animation-delay: 0s;
animation-delay: 0s;
}
.spinner:nth-child(2) .line, .spinner:nth-child(2) .line::before, .spinner:nth-child(2) .line::after {
-webkit-animation-delay: -1.33333s;
animation-delay: -1.33333s;
}
.spinner:nth-child(3) .line, .spinner:nth-child(3) .line::before, .spinner:nth-child(3) .line::after {
-webkit-animation-delay: -2.66666s;
animation-delay: -2.66666s;
}
.spinner:nth-child(4) .line, .spinner:nth-child(4) .line::before, .spinner:nth-child(4) .line::after {
-webkit-animation-delay: -4s;
animation-delay: -4s;
}
.spinner:nth-child(5) .line, .spinner:nth-child(5) .line::before, .spinner:nth-child(5) .line::after {
-webkit-animation-delay: -5.33333s;
animation-delay: -5.33333s;
}
.spinner:nth-child(6) .line, .spinner:nth-child(6) .line::before, .spinner:nth-child(6) .line::after {
-webkit-animation-delay: -6.66666s;
animation-delay: -6.66666s;
}
.spinner:nth-child(2n) {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}
.
相关推荐
div+css实现全屏切换的效果，不会js的童鞋们看过来啦！
为了实现全屏翻页效果，开发者通常会将每个页面视为一个独立的3D平面，并使用CSS3的`transform`属性来控制这些平面的旋转和位置。通过监听用户的鼠标或触摸事件，可以触发相应的翻页动画。同时，利用JavaScript或...
css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手风琴.rar css3全屏手...
纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯CSS实现的卡片切换效果.rar 纯...
同时，CSS3的`transform`和`opacity`属性可以轻松实现这些效果，且性能优于JavaScript，因为它们由浏览器的GPU处理，减少了CPU的负担。 在实际项目中，为了使全屏滚动页面更具交互性，还可以利用HTML5的`...
css图片外边框效果实现 css图片外边框效果实现
如何通过CSS使div实现全屏效果，主要分为图片横排展示全屏切换效果和图片竖排展示全屏切换效果，分享给大家，具体如下： 全屏要素 全屏的元素及其父元素都要设置height:100% 将html、body标签设置height:100% （注...
本篇将详细介绍一款基于jQuery和CSS3的全屏导航菜单特效插件，该插件通过3D动画效果，为用户带来独特的交互体验。 首先，我们要理解jQuery和CSS3这两个关键技术。**jQuery** 是一个高效的JavaScript库，简化了HTML...
css3全屏手风琴是一款基于jquery css3实现的全屏幕宽屏手风琴图片切换效果。 css3全屏手风琴特效图： 点击查看演示：
这是一款纯CSS3实现的全屏背景图片缩小渐变切换效果源码，页面的背景图可呈现定时渐变与切换效果。渐变大小缩放效果流畅自然，采用纯css3技术控制切换效果。建议使用支持css3效果较好的火狐或谷歌等浏览器预览本源码...
内容概要：该资源是纯前端js，通过js、html、css实现全屏动画效果，动画效果内包含掉落、缩放、渐变、淡入淡出等过渡、动画效果；巧用字符字体等，减少网络资源加载。该项目可玩性高，支持自定义掉落符号！ 如何...
本项目“JS+CSS3全屏手风琴图片展示代码”就是利用这两种技术实现的一个高级图片展示方案，尤其适合用于网站的首页或者产品展示部分，提升用户体验。 首先，我们要理解“全屏手风琴”这个概念。全屏手风琴通常指的...
css实现如图所示的效果
CSS3实现全屏双面板内容切换特效源码是一款效果非常炫酷的全屏双面板内容切换UI设计效果的代码。该UI设计使用CSS3和jQuery来制作双面板效果，左右两个面板可以通过箭头按钮来相应切换具体的内容，在内容切换时带有...
在本项目中，“CSS3区域全屏放大动画特效.zip”是一个包含JavaScript和CSS3技术的资源包，主要用于实现一种互动式的网页元素放大效果。当用户点击页面上的特定区域时，该区域会放大到全屏，并展示相关的详细内容，...
接下来，我们用CSS来实现半透明全屏蒙层。我们可以使用`position: fixed`将蒙层设置为固定定位，覆盖整个屏幕。通过设置`z-index`确保蒙层位于所有元素之上，然后用`background-color`和`opacity`创建半透明效果： ...
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
在这一幻灯片特效中，CSS3的动画功能被用来创建平滑的幻灯片切换效果，可能是通过改变元素的位置、透明度或者尺寸等属性，实现无缝过渡。同时，jQuery可能被用于监听用户交互，比如鼠标悬停或点击，来触发幻灯片的...
用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar
【纯CSS3炫酷全屏百叶窗效果幻灯片特效】是一种利用现代浏览器支持的CSS3特性构建的视觉效果显著的网页动态展示技术。在网页设计中，幻灯片通常用于展示多张图片或内容，而百叶窗效果则为这种展示方式增加了额外的...