The principle is achieved through a large number of CSS3 properties, such as: animation, transform, keyframes, and so on, the example uses the structural pseudo-class selector e:nth-child (n), for the selection of HTML elements and control output, Interested friends can understand the next
The principle of this example is implemented by a large number of CSS3 properties, such as animation, transform, keyframes, and so on. It is noteworthy that this example uses the structural pseudo-class selector E:nth-child (n) to select the HTML element and control the output. Believe that this pseudo-class selector will be a powerful tool in the future. Recommend everyone to understand and practice the use. This pseudo-class selector E:nth-child (n) is the meaning of the nth child element e that matches the parent element. For example: UL Li:nth-child (3) is the selection <ul> elements inside the 3rd <li>. Note that this property is not supported under the IE8 (included IE8) version.
Development of children's shoes using cross-platform development tools--Unified development environment Ude to view, debug, Develop Oh ~ ~ It is a HTML5 cross-platform one-stop application development, debugging and deployment tools, support HTML5 cross-platform Development, the original Java Cross-platform plug-in support android/symbian/ Kjava's cross-platform and native development provides developers with rich application templates, sample code, and developer community services that cover Android, IOS, WP, Symbian, and Kjava operating system platforms.
Ude Simulator Debugging Effect diagram:
Let's take a look at the implementation code for the example below. Complete code download please see attached.
HTML Structure Code
Copy Code code as follows:
<div class= "center" >
<ul>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
</div>
CSS style code
Copy Code code as follows:
@keyframes Bump {
0% {
opacity:0;
left:535px;
}
100% {
left: -10px;
opacity:0;
}
10%, 85% {
opacity:1;
}
}
@keyframes Spin {
0%, 100% {
height:20px;
top:50px;
}
50% {
height:100px;
top:0;
}
}
Body {
Background:rgba (0, 0, 0, 0.2);
}
Div.center {
Text-align:center;
margin-top:40px;
}
ul {
Background-color:rgba (255, 255, 255, 0.4);
position:relative;
Display:block;
padding:0;
Margin:auto;
width:600px;
height:10px;
List-style:none;
border-radius:200px;
border:5px Solid Rgba (255, 255, 255, 0.2);
margin-top:100px;
box-shadow:0 0 5px 5px rgba (0, 0, 0, 0.1);
}
ul li {
Position:absolute;
margin-top: -55px;
}
ul Li:nth-child (1) {
animation:bump 1.5s Infinite;
Animation-delay:0.1s;
}
ul li:nth-child (1) div {
border-radius:22px;
Transform-origin:center;
Position:absolute;
height:60px;
width:80px;
Animation:spin 0.4s Infinite;
Animation-delay:0.1s;
Background-color:rgba (120, 120, 120, 0.3);
}
ul Li:nth-child (2) {
animation:bump 1.5s Infinite;
animation-delay:0.2s;
}
ul Li:nth-child (2) div {
border-radius:22px;
Transform-origin:center;
Position:absolute;
height:60px;
width:80px;
Animation:spin 0.4s Infinite;
animation-delay:0.2s;
Background-color:rgba (120, 0, 0, 0.3);
}
ul Li:nth-child (3) {
animation:bump 1.5s Infinite;
animation-delay:0.3s;
}
ul Li:nth-child (3) div {
border-radius:22px;
Transform-origin:center;
Position:absolute;
height:60px;
width:80px;
Animation:spin 0.4s Infinite;
animation-delay:0.3s;
Background-color:rgba (120, 120, 0, 0.3);
}
ul Li:nth-child (4) {
animation:bump 1.5s Infinite;
animation-delay:0.4s;
}
ul Li:nth-child (4) div {
border-radius:22px;
Transform-origin:center;
Position:absolute;
height:60px;
width:80px;
Animation:spin 0.4s Infinite;
animation-delay:0.4s;
Background-color:rgba (0, 120, 0, 0.3);
}
ul Li:nth-child (5) {
animation:bump 1.5s Infinite;
animation-delay:0.5s;
}
ul Li:nth-child (5) div {
border-radius:22px;
Transform-origin:center;
Position:absolute;
height:60px;
width:80px;
Animation:spin 0.4s Infinite;
animation-delay:0.5s;
Background-color:rgba (0, 120, 120, 0.3);
}
UL Li:nth-child (6) {
animation:bump 1.5s Infinite;
animation-delay:0.6s;
}
ul Li:nth-child (6) div {
border-radius:22px;
Transform-origin:center;
Position:absolute;
height:60px;
width:80px;
Animation:spin 0.4s Infinite;
animation-delay:0.6s;
Background-color:rgba (0, 0, 120, 0.3);
}
ul Li:nth-child (7) {
animation:bump 1.5s Infinite;
animation-delay:0.7s;
}
ul Li:nth-child (7) div {
border-radius:22px;
Transform-origin:center;
Position:absolute;
height:60px;
width:80px;
Animation:spin 0.4s Infinite;
animation-delay:0.7s;
Background-color:rgba (120, 0, 120, 0.3);
}
Note: Please add the browser prefix (such as:-webkit-,-moz-) to the desired place, otherwise it will not display the effect normally.
Download the source please see attached
