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的童鞋们看过来啦！
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可以实现基本的滚动效果，但要实现更高级的功能，如自动播放、触摸事件支持和导航箭头控制，通常需要JavaScript或jQuery的协助。例如，可以监听滚动事件，根据滚动位置切换当前显示的全屏滚动屏。 6. **...
在实际项目中，`images`文件夹可能包含多张要展示的全屏图片，这些图片通过CSS3的规则进行切换，以实现焦点图的动态效果。CSS选择器和伪类可以用来在不同状态下应用不同的样式，例如，当图片进入视口时，应用动画...
css图片外边框效果实现 css图片外边框效果实现
如何通过CSS使div实现全屏效果，主要分为图片横排展示全屏切换效果和图片竖排展示全屏切换效果，分享给大家，具体如下： 全屏要素 全屏的元素及其父元素都要设置height:100% 将html、body标签设置height:100% （注...
基于html+css实现摇骰子源码+效果截图.zip基于html+css实现摇骰子源码+效果截图.zip基于html+css实现摇骰子源码+效果截图.zip基于html+css实现摇骰子源码+效果截图.zip基于html+css实现摇骰子源码+效果截图.zip基于...
本篇将详细介绍一款基于jQuery和CSS3的全屏导航菜单特效插件，该插件通过3D动画效果，为用户带来独特的交互体验。 首先，我们要理解jQuery和CSS3这两个关键技术。**jQuery** 是一个高效的JavaScript库，简化了HTML...
这是一款纯CSS3实现的全屏背景图片缩小渐变切换效果源码，页面的背景图可呈现定时渐变与切换效果。渐变大小缩放效果流畅自然，采用纯css3技术控制切换效果。建议使用支持css3效果较好的火狐或谷歌等浏览器预览本源码...
内容概要：该资源是纯前端js，通过js、html、css实现全屏动画效果，动画效果内包含掉落、缩放、渐变、淡入淡出等过渡、动画效果；巧用字符字体等，减少网络资源加载。该项目可玩性高，支持自定义掉落符号！ 如何...
本项目“JS+CSS3全屏手风琴图片展示代码”就是利用这两种技术实现的一个高级图片展示方案，尤其适合用于网站的首页或者产品展示部分，提升用户体验。 首先，我们要理解“全屏手风琴”这个概念。全屏手风琴通常指的...
标题中的"jquery+css3全屏手风琴效果(效果流畅)"指的是一个使用jQuery库结合CSS3技术实现的全屏手风琴（Accordion）交互效果。这种效果常见于网站的导航菜单、内容展示等场景，它能以节省空间的方式展现大量信息。...
CSS3实现全屏双面板内容切换特效源码是一款效果非常炫酷的全屏双面板内容切换UI设计效果的代码。该UI设计使用CSS3和jQuery来制作双面板效果，左右两个面板可以通过箭头按钮来相应切换具体的内容，在内容切换时带有...
在本项目中，“CSS3区域全屏放大动画特效.zip”是一个包含JavaScript和CSS3技术的资源包，主要用于实现一种互动式的网页元素放大效果。当用户点击页面上的特定区域时，该区域会放大到全屏，并展示相关的详细内容，...
在这个项目中，我们可以使用CSS3的`background-size`属性来实现全屏背景效果。设置为`cover`可以确保图片始终填充整个视口，并保持纵横比，确保图片的视觉效果。 二、无滚动条设计 为了消除滚动条，我们可以使用CSS...
用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar
【纯CSS3炫酷全屏百叶窗效果幻灯片特效】是一种利用现代浏览器支持的CSS3特性构建的视觉效果显著的网页动态展示技术。在网页设计中，幻灯片通常用于展示多张图片或内容，而百叶窗效果则为这种展示方式增加了额外的...
该压缩包文件"jquery+css3实现图片背景全屏左右图片切换效果.zip"包含了一种常见于网页设计中的视觉效果，即使用jQuery和CSS3来创建全屏背景图片的动态切换。这种效果可以让网站看起来更加生动和专业，吸引用户的...
纯css制作box外边框动态效果-飞线效果