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);
}
.
相关推荐
为了实现全屏翻页效果，开发者通常会将每个页面视为一个独立的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 纯...
在实际项目中，`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基于...
虽然纯CSS3可以实现基本的滚动效果，但要实现更高级的功能，如自动播放、触摸事件支持和导航箭头控制，通常需要JavaScript或jQuery的协助。例如，可以监听滚动事件，根据滚动位置切换当前显示的全屏滚动屏。 6. **...
本篇将详细介绍一款基于jQuery和CSS3的全屏导航菜单特效插件，该插件通过3D动画效果，为用户带来独特的交互体验。 首先，我们要理解jQuery和CSS3这两个关键技术。**jQuery** 是一个高效的JavaScript库，简化了HTML...
css3全屏手风琴是一款基于jquery css3实现的全屏幕宽屏手风琴图片切换效果。 css3全屏手风琴特效图： 点击查看演示：
内容概要：该资源是纯前端js，通过js、html、css实现全屏动画效果，动画效果内包含掉落、缩放、渐变、淡入淡出等过渡、动画效果；巧用字符字体等，减少网络资源加载。该项目可玩性高，支持自定义掉落符号！ 如何...
本项目“JS+CSS3全屏手风琴图片展示代码”就是利用这两种技术实现的一个高级图片展示方案，尤其适合用于网站的首页或者产品展示部分，提升用户体验。 首先，我们要理解“全屏手风琴”这个概念。全屏手风琴通常指的...
标题中的"jquery+css3全屏手风琴效果(效果流畅)"指的是一个使用jQuery库结合CSS3技术实现的全屏手风琴（Accordion）交互效果。这种效果常见于网站的导航菜单、内容展示等场景，它能以节省空间的方式展现大量信息。...
CSS3实现全屏双面板内容切换特效源码是一款效果非常炫酷的全屏双面板内容切换UI设计效果的代码。该UI设计使用CSS3和jQuery来制作双面板效果，左右两个面板可以通过箭头按钮来相应切换具体的内容，在内容切换时带有...
在本项目中，“CSS3区域全屏放大动画特效.zip”是一个包含JavaScript和CSS3技术的资源包，主要用于实现一种互动式的网页元素放大效果。当用户点击页面上的特定区域时，该区域会放大到全屏，并展示相关的详细内容，...
css3+js实现水波纹效果，跟随点击位置为中心扩散，效果很不错，适用于主流浏览器。
纯css实现的凹槽底部导航菜单，内凹导航栏一个好看的底部导航栏效果，CSS凹型导航按钮效果的实现效果，适用于html5，小程序，uniapp，Vue，nvue等，只要是css都适用，源码下载！纯css实现的凹槽底部导航菜单，内凹...
在这一幻灯片特效中，CSS3的动画功能被用来创建平滑的幻灯片切换效果，可能是通过改变元素的位置、透明度或者尺寸等属性，实现无缝过渡。同时，jQuery可能被用于监听用户交互，比如鼠标悬停或点击，来触发幻灯片的...
用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar用CSS实现图片的双边框效果.rar
【纯CSS3炫酷全屏百叶窗效果幻灯片特效】是一种利用现代浏览器支持的CSS3特性构建的视觉效果显著的网页动态展示技术。在网页设计中，幻灯片通常用于展示多张图片或内容，而百叶窗效果则为这种展示方式增加了额外的...