Home > Developer > Web Develop
I use is chrome49, this idea is I in StackOverflow answer question when see, thank this colleague, deepened my understanding to many technical points, recently arrived in Beijing, busy a day or two, in follow-up days, will be arranged interview, study plan can only press the workflow go, Finish this to see a particularly cool effect, so excited!
(0) Effect demonstration (1) Implementation planAnimation effects are made with animation.
(2) Detailed knowledge of the point A. border-radius:40px;When the height of the div is 80px, Div is a circle, in fact, the height is 60px is also a round, the same is 40, 30 is also round, of course, the case is not used in this way. Specific implementations are described in the code
B. Position:absolute;When the DIV uses this property, margin:0 Auto is invalid, the ball uses this property, and his horizontal center implementation is illustrated in the code
C. Animation:down 1.5s Infinite Alternate;I.1.5s is the duration of the animation because the delay occurs after the duration, so only one parameter with S is the duration.
II. The alternate here refers to the reverse animation, such as the frame of an animation as follows
@keyframes down
{
From
{
...
}
85D
{
...
}
To
{
...
}
}
Forward playback is from-95-to, reverse play To-95%-from
D. @keyframes down{95%{...}}If the corresponding Animate:down 1.5s;
The animation reaches its final state at 95%, and the remaining 5% of the time is returned to its original state.
(3) Code plus explanation<! DOCTYPE html>
<meta charset=utf-8>
<link rel= "shortcut icon" href= "Favicon.ico" type= "Image/x-icon" >
<title> for Life </title>
<style type= "Text/css" >
*
{
margin:0;
padding:0;
}
#lol
{
margin:0px Auto;
top:100px;
width:80px;
height:80px;
background-color:red;
border-radius:40px;
Position:absolute;
left:160px;
Animation:down 1.5s Infinite Alternate;
}
@keyframes down
{
85D
{
width:15px;
height:15px;
border-radius:7.5px; /* Ensure Div is always a circle */
top:300px;
left:192.5px;/* ensure that the ball is always horizontally centered */
Background:blue;
}
}
#frame
{
width:400px;
height:315px;
margin:100px Auto;
BORDER:1PX Red Solid;
position:relative;
}
#head
{
width:400px;
height:100px;
Text-align:center;
font-size:40px;
Font-weight:bold;
line-height:100px;
Background-image:-webkit-linear-gradient (90deg, #be1e1e, #be9b1e, #1ebe21, #1ebeb5, #1e24be, #ba1ebe, #be1e1e);
/* The previous article mentions */
-webkit-background-clip:text;/* clipping background color, only displayed on text */
-webkit-text-fill-color:transparent;/* text fill as transparent color */
background-size:100% 700%;
/* The previous article mentions */
ANIMATION:BC 6s Infinite;
}
@keyframes BC
{
To
{
background-position:100% 100%;
/* The previous article mentions */
}
}
</style>
<script type= "Text/javascript" >
</script>
<body>
<div id= "Frame" >
<div id= "Head" >Animatiom</div>
<div id= "LOL" ></div>
</div>
</body>
HTML5CSS3 special effects-bouncing balls up and down-ground tornado
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
