CSS3 加载动画修饰类（class）

Zero element loading animation (horizontal)。不需要额外的元素来显示加载动画，只需要给DIV加上css class即可。

《three.js使用多个渐变torus模拟光环光晕》申请公开！

第三方库
作品简介 3992
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

编译

CSS

*,
:before,
:after {
    box-sizing: border-box;
}
html {
    background: #eaeaea;
    height: 100%;
}
body {
    width: 600px;
    margin: 0 auto;
    font-family: 'Poiret One', cursive;
    height: 100%;
}
a {
    color: #db5361;
}
.example-1 {
    position: relative;
    height: 200px;
    margin: 1em 0;
    background: #bce27f;
}
.example-1:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 150px;
    border-radius: 10px;
    border: solid 10px #96b566;
    transform: translate(-50%, -50%);
}
.example-1:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 15px;
    height: 15px;
    z-index: 999;
    border-radius: 50%;
    background: #f6ff97;
    animation-name: example-1;
    animation-duration: 2s;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes example-1 {
    0% {
        transform: translate(-72.5px, -7.5px);
    }
    100% {
        transform: translate(58.5px, -7.5px);
    }
}
.example-2 {
    padding: 0 1em;
    border: solid 3px #96b566;
}
.example-2 #more {
    position: relative;
    padding: 1em;
    text-align: center;
    border: dashed 2px #96b566;
}
.example-2 #more:target:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 999;
    width: 100px;
    border-radius: 10px;
    border: solid 5px #96b566;
    transform: translate(-50%, -50%);
}
.example-2 #more:target:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    z-index: 999;
    border-radius: 50%;
    border: solid 5px #f6ff97;
    animation-name: example-2;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
.example-2 #more:target a {
    visibility: hidden;
}
@keyframes example-2 {
    0% {
        transform: translate(-50px, -10px);
    }
    100% {
        transform: translate(30px, -10px);
    }
}
.example-3 {
    position: relative;
}
.example-3:hover:before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100px;
    height: 40px;
    z-index: 999;
    border-radius: 20px;
    border: solid 10px #f6ff97;
    transform: translate(-50%, -50%);
}
.example-3:hover:after {
    content: '';
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    z-index: 999;
    background: #96b566;
    animation-name: example-3;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes example-3 {
    0% {
        transform: translate(-40px, -10px);
    }
    100% {
        transform: translate(20px, -10px);
    }
}
.example-4 {
    position: relative;
    padding: 1em;
    margin: 1em 0;
    text-align: center;
    border: dashed 2px #96b566;
}
#page:target {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.9);
}
#page:target {
    position: absolute;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: rgba(255, 255, 255, 0.9);
}
#page:target:before {
    content: '';
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #96b566;
    animation-name: example-4a;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
#page:target:after {
    content: '';
    position: absolute;
    z-index: 999;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #bce27f;
    animation-name: example-4b;
    animation-duration: 1s;
    animation-direction: alternate;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes example-4a {
    0% {
        transform: translate(-70px, -10px);
    }
    100% {
        transform: translate(-10px, -10px);
    }
}
@keyframes example-4b {
    0% {
        transform: translate(70px, -10px);
    }
    100% {
        transform: translate(10px, -10px);
    }
}

HTML

<a id="page" href="#"></a>

<h1>Zero element loading animations</h1>
<p>Unlike a lot of single element loading animations this example can be applied on almost any existing element just by adding a class.</p>
<div class="example-1"></div>
<p>This means they can even be applied using <code>:hover</code> or <code>:target</code>.</p>
<div class="example-2">
    <h2>Example</h2>
    <p>The old man knew he was going far out and he left the smell of the land behind and rowed out into the clean early morning smell of the ocean. He saw the phosphorescence of the Gulf weed in the water as he rowed over the part of the ocean that the
        fisherman called the great well because there was a sudden deep of seven hundred fathoms where all sorts of fish congregated because of the swirl the current made against the steep walls of the floor of the ocean. Here there were concentrations
        of shrimp and bait fish and sometimes schools of squid in the deepest holes and these rose close to the surface at night where all the wandering fish fed on them.</p>
    <p id="more"><a href="#more">Load more</a>
    </p>
</div>
<p>Hover to load the rhino.</p>
<div class="example-3"><img src="//lorempixel.com/600/300/animals/1">
    <p style="text-align:center;">Note: Internet explorer does not have 'rhino load' capability.</p>
</div>

<div class="example-4"><a href="#page">click to apply to page</a>
</div>

Zero element loading animation (horizontal)。不需要额外的元素来显示加载动画，只需要给DIV加上css class即可。

编辑器支持Emmet

快捷键

Zero element loading animation (horizontal)。不需要额外的元素来显示加载动画，只需要给DIV加上css class即可。

css 3d圆台形状加载按钮（带进度动画）

使用CSS3 PerspectiveTransform实现的逼真3D地球自转动画

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：