css加载php,网页加载时样式效果css如何实现？（多种样式示例）

在web前端开发过程中，作为站长可能要考虑到，页面如果出现正在加载状态时该如何用css来展示等待加载的样式，一个好看的css网页加载动画可以减少用户等待过程中的乏味时刻。那么本篇文章就给大家介绍css加载中动画具体是如何实现的问题?

纯css代码实现页面加载中样式：

一、条形波动样式的css加载动画代码示例如下：

.spinner {

margin: 100px auto;

width: 50px;

height: 60px;

text-align: center;

font-size: 10px;

}

.spinner > div {

background-color: #67CF22;

height: 100%;

width: 6px;

display: inline-block;

-webkit-animation: stretchdelay 1.2s infinite ease-in-out;

animation: stretchdelay 1.2s infinite ease-in-out;

}

.spinner .re2 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.spinner .re3 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.spinner .re4 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.spinner .re5 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

@-webkit-keyframes stretchdelay {

0%, 40%, 100% { -webkit-transform: scaleY(0.4) }

20% { -webkit-transform: scaleY(1.0) }

}

@keyframes stretchdelay {

0%, 40%, 100% {

transform: scaleY(0.4);

-webkit-transform: scaleY(0.4);

} 20% {

transform: scaleY(1.0);

-webkit-transform: scaleY(1.0);

}

}

代码效果如下图：

二、圆形循环样式的css加载中动画代码示例如下：.container1 > div, .container2 > div, .container3 > div {

width: 6px;

height: 6px;

background-color: #333;

border-radius: 100%;

position: absolute;

-webkit-animation: bouncedelay 1.2s infinite ease-in-out;

animation: bouncedelay 1.2s infinite ease-in-out;

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner .spinner-container {

position: absolute;

width: 100%;

height: 100%;

}

.container2 {

-webkit-transform: rotateZ(45deg);

transform: rotateZ(45deg);

}

.container3 {

-webkit-transform: rotateZ(90deg);

transform: rotateZ(90deg);

}

.circle1 { top: 0; left: 0; }

.circle2 { top: 0; right: 0; }

.circle3 { right: 0; bottom: 0; }

.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {

-webkit-animation-delay: -1.1s;

animation-delay: -1.1s;

}

.container3 .circle1 {

-webkit-animation-delay: -1.0s;

animation-delay: -1.0s;

}

.container1 .circle2 {

-webkit-animation-delay: -0.9s;

animation-delay: -0.9s;

}

.container2 .circle2 {

-webkit-animation-delay: -0.8s;

animation-delay: -0.8s;

}

.container3 .circle2 {

-webkit-animation-delay: -0.7s;

animation-delay: -0.7s;

}

.container1 .circle3 {

-webkit-animation-delay: -0.6s;

animation-delay: -0.6s;

}

.container2 .circle3 {

-webkit-animation-delay: -0.5s;

animation-delay: -0.5s;

}

.container3 .circle3 {

-webkit-animation-delay: -0.4s;

animation-delay: -0.4s;

}

.container1 .circle4 {

-webkit-animation-delay: -0.3s;

animation-delay: -0.3s;

}

.container2 .circle4 {

-webkit-animation-delay: -0.2s;

animation-delay: -0.2s;

}

.container3 .circle4 {

-webkit-animation-delay: -0.1s;

animation-delay: -0.1s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

}

效果如下图：

三、圆点横向波动样式的css加载动画实现代码示例如下：.spinner > div {

width: 30px;

height: 30px;

background-color: #67CF22;

border-radius: 100%;

display: inline-block;

-webkit-animation: bouncedelay 1.4s infinite ease-in-out;

animation: bouncedelay 1.4s infinite ease-in-out;

/* Prevent first frame from flickering when animation starts */

-webkit-animation-fill-mode: both;

animation-fill-mode: both;

}

.spinner .bounce1 {

-webkit-animation-delay: -0.32s;

animation-delay: -0.32s;

}

.spinner .bounce2 {

-webkit-animation-delay: -0.16s;

animation-delay: -0.16s;

}

@-webkit-keyframes bouncedelay {

0%, 80%, 100% { -webkit-transform: scale(0.0) }

40% { -webkit-transform: scale(1.0) }

}

@keyframes bouncedelay {

0%, 80%, 100% {

transform: scale(0.0);

-webkit-transform: scale(0.0);

} 40% {

transform: scale(1.0);

-webkit-transform: scale(1.0);

}

}

效果如下图：

以上就是本篇文章关于css加载制作不同样式的具体代码示例介绍，希望对有需要的朋友有所帮助。

注，css3 loading制作相关属性介绍：

CSS3 animation 属性，使用简写属性把 animation 绑定到一个

元素。

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

@keyframes属性，通过 @keyframes 规则，您能够创建动画。创建动画的原理是，将一套 CSS 样式逐渐变化为另一套样式。在动画过程中，您能够多次改变这套 CSS 样式。以百分比来规定改变发生的时间，或者通过关键词 "from" 和 "to"，等价于 0% 和 100%。0% 是动画的开始时间，100% 动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。