超酷CSS3loading加载动画特效

来源：懂视网责编：小采时间：2020-11-27 18:53:29

超酷CSS3loading加载动画特效

超酷CSS3loading加载动画特效:简要教程这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作，它代码简单，效果非常的炫酷。使用方法 HTML结构使用一个<div>元素作为该loading动画的容器，里面有两个子元素。其中div.loading-1是l

推荐度：

点击下载本文 文档为doc格式

导读超酷CSS3loading加载动画特效:简要教程这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作，它代码简单，效果非常的炫酷。使用方法 HTML结构使用一个<div>元素作为该loading动画的容器，里面有两个子元素。其中div.loading-1是l

简要教程

这是一款超酷CSS3 loading加载动画特效。该loading动画使用CSS3CSS3 animation动画来制作，它代码简单，效果非常的炫酷。

使用方法

HTML结构

使用一个<div>元素作为该loading动画的容器，里面有两个子元素。其中div.loading-1是loading进度条。div.loading-2是loading文字。

<div class="loader">
 <div class="loading-1"></div>
 <div class="loading-2">Loading...</div>
</div>

CSS样式

该loading动画中使用了3个animation动画，第一个load动画是用于进度条从0运动到100%。第二个turn动画用于进度条在Y轴方向上旋转。第三个bounce动画用于文字的弹跳。

.loader {
 width: 150px;
 margin: 50px auto 70px;
 position: relative;
}
.loader .loading-1 {
 position: relative;
 width: 100%;
 height: 10px;
 border: 1px solid #69d2e7;
 border-radius: 10px;
 animation: turn 4s linear 1.75s infinite;
}
.loader .loading-1:before {
 content: "";
 display: block;
 position: absolute;
 width: 0%;
 height: 100%;
 background: #69d2e7;
 box-shadow: 10px 0px 15px 0px #69d2e7;
 animation: load 2s linear infinite;
}
.loader .loading-2 {
 width: 100%;
 position: absolute;
 top: 10px;
 color: #69d2e7;
 font-size: 22px;
 text-align: center;
 animation: bounce 2s linear infinite;
}
@keyframes load {
 0% {
 width: 0%;
 }
 87.5%, 100% {
 width: 100%;
 }
}
@keyframes turn {
 0% {
 transform: rotateY(0deg);
 }
 6.25%, 50% {
 transform: rotateY(180deg);
 }
 56.25%, 100% {
 transform: rotateY(360deg);
 }
}
@keyframes bounce {
 0%,100% {
 top: 10px;
 }
 12.5% {
 top: 30px;
 }
}

超酷CSS3loading加载动画特效

推荐度：

点击下载本文 文档为doc格式

标签：加载特效效果

热门焦点

超酷CSS3loading加载动画特效

超酷CSS3loading加载动画特效

超酷CSS3loading加载动画特效

最新推荐

猜你喜欢

热门推荐