Pure CSS3 creates a very dazzling loading animation, and css3 creates a loading

Pure CSS3 creates a very dazzling loading animation, and css3 creates a loading

A brilliant loading graph created by pure css3. It is suitable for loading at a certain time. First:

Click here for Online Preview

The code is very simple. No javascript code is used. Pure css3 implementation.

Html code:

 <div class="content">        <div style="width: 970px; margin: auto">        </div>        <div class="rotate">            <span class="triangle base"></span><span class="triangle no1"></span><span class="triangle no2">            </span><span class="triangle no3"></span>        </div>    </div>

Css code:

 body {    padding:0;    margin:0;        background-color: #2a4e66;  overflow: hidden;}.content {    width:100%;    height:100%;    top:0;    right:0;    bottom:0;    left:0;    position:absolute;}.rotate {    position: absolute;    top: 50%;    left: 50%;    margin: -93px 0 0 -93px;    background: transparent;    width: 186px;    height: 186px;    border-radius: 50%;    z-index: 20;}.rotate:after {    content: '';        position: absolute;    box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff;    width: 186px;    height: 186px;    border-radius: 50%;    z-index: 10;}span.triangle.base {    position: absolute;    width: 0;     height: 0;    margin: 46px 0 0 13px;    border-left: 80px solid transparent;    border-right: 80px solid transparent;                    border-top: 140px solid #eeeeee;    transform-origin: 50% 50%;    z-index: 20;}span.triangle.no1 {    position: absolute;    margin: 46px 0 0 13px;    width: 0;     height: 0;     border-left: 80px solid transparent;    border-right: 80px solid transparent;                    border-bottom: 140px solid #eeeeee;    transform-origin: 0 100%;    z-index: 20;}span.triangle.no2 {    position: absolute;    margin: 46px 0 0 13px;    width: 0;     height: 0;     border-left: 80px solid transparent;    border-right: 80px solid transparent;                    border-bottom: 140px solid #eeeeee;    transform-origin: 100% 100%;    z-index: 20;}span.triangle.no3 {    position: absolute;    margin: 46px 0 0 13px;    width: 0;     height: 0;     border-left: 80px solid transparent;    border-right: 80px solid transparent;                    border-bottom: 140px solid #eeeeee;    transform-origin: 50% 100%;    z-index: 20;}/* Animation */.rotate {    -webkit-animation: rotateTriangle 3s linear infinite;    animation: rotateTriangle 3s linear infinite;}@-webkit-keyframes rotateTriangle {    from { -webkit-transform: rotate(0deg); }    to { -webkit-transform: rotate(60deg); }}@keyframes rotateTriangle {    from { transform: rotate(0deg); }    to { transform: rotate(60deg); }}.rotate:after {    -webkit-animation: glowAnimation 3s ease infinite;    animation: glowAnimation 3s ease infinite;}@-webkit-keyframes glowAnimation {            0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }    10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }    100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }}@keyframes glowAnimation {    0% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }    10% { box-shadow: 0 0 80px #ffffff, 0 0 20px #ffffff, 0 0 2px #ffffff, inset 0 0 4px #ffffff, inset 0 0 8px #ffffff; }    100% { box-shadow: 0 0 30px #ffffff, 0 0 10px #ffffff, 0 0 2px #ffffff, inset 0 0 2px #ffffff, inset 0 0 4px #ffffff; }}span.triangle.base {    -webkit-animation: scaleTriangleBase 3s linear infinite;    animation: scaleTriangleBase 3s linear infinite;}@-webkit-keyframes scaleTriangleBase {    from { -webkit-transform: translate(0px,-11px) scale(0.5); }    to { -webkit-transform: translate(0px,0px) scale(1); }    }@keyframes scaleTriangleBase {    from { transform: translate(0px,-11px) scale(0.5); }    to { transform: translate(0px,0px) scale(1); }}span.triangle.no1 {    -webkit-animation: scaleTriangleOne 3s linear infinite;    animation: scaleTriangleOne 3s linear infinite;}@-webkit-keyframes scaleTriangleOne {    from { -webkit-transform: translate(0px,-46px) scale(0.5); }    to { -webkit-transform: translate(-80px,0px) scale(0); }}@keyframes scaleTriangleOne {    from { transform: translate(0px,-46px) scale(0.5); }    to { transform: translate(-80px,0px) scale(0); }}span.triangle.no2 {    -webkit-animation: scaleTriangleTwo 3s linear infinite;    animation: scaleTriangleTwo 3s linear infinite;}@-webkit-keyframes scaleTriangleTwo {    from { -webkit-transform: translate(0px,-46px) scale(0.5); }    to { -webkit-transform: translate(80px,0px) scale(0); }}@keyframes scaleTriangleTwo {    from { transform: translate(0px,-46px) scale(0.5); }    to { transform: translate(80px,0px) scale(0); }}span.triangle.no3 {    -webkit-animation: scaleTriangleThree 3s linear infinite;    animation: scaleTriangleThree 3s linear infinite;}@-webkit-keyframes scaleTriangleThree {    from { -webkit-transform: translate(0px,-116px) scale(0.5); }    to { -webkit-transform: translate(0px,-280px) scale(0); }}@keyframes scaleTriangleThree {    from { transform: translate(0px,-116px) scale(0.5); }    to { transform: translate(0px,-280px) scale(0); }}

Reprinted please indicate Source Address: http://www.cnblogs.com/liaohuolin/p/3911528.html

How does css3 + html load the display animation instead of clicking a button to achieve the effect?

When loading the page, a js script is automatically loaded and the button is clicked.
 
What technologies are used to implement the popular drop-down animation effects on Web pages? Only js and css3? Answer in detail

In fact, this is simple to say, but it is still difficult to do it. In fact, it is a series of things around js. First, we use js to listen to page rolling events and window size change events, judging from these two events whether the webpage has loaded new data, if so, we should use js for loading and ajax for remote data retrieval, after obtaining remote data and returning data, you can use js to display the returned data and delete the loading effect. This is probably the case.

Js = scroll resize
Determine the webpage location in scroll and resize
If the location is correct
Js, modify css =, load results, and obtain data (ajax)
When data is obtained successfully (ajax returns data), use js to display data = Cancel loading at the same time
The basic process is as follows: