HTML5CSS3 special effects-Up and down the ball-zhudi tornado, html5css3 Special Effects
(-1) Preface
I used chrome49, which I saw when I answered a question in stackoverflow. Thanks to this colleague, I have deepened my understanding of many technical points. I recently arrived in Beijing, after a busy day or two, an interview will be arranged in the following days, and the study plan can only be followed by a workflow. After this is done, it will take a very cool effect, so excited!
(0) effect demonstration(1) Implementation Plan
Animation effects are all made with animation.
(2) a. border-radius: 40px;When the div length and height are all 80 PX, The div is a circle. In fact, when the length and height are all 60 PX, it is also a circle. Similarly, the 40 and 30 are also round. Of course, this method is not used in this case. The specific implementation is described in the Code
B. position: absolute;When div uses this attribute, margin: 0 auto is invalid. The ball uses this attribute and Its Implementation Method of horizontal center is described in the Code.
C. animation: down 1.5 s infinite alternate;I .1.5s is the animation duration, because the delay time appears after the duration, so only one parameter with s is the duration.
II. The alternate here refers to reverse playback of an animation. For example, the frame of an animation is as follows:
@ Keyframes down
{
From
{
...
}
95%
{
...
}
To
{
...
}
}
Forward playback is from-95-to, reverse playback to-95%-from
D. @ keyframes down {95% {...}}If the corresponding animate: down 1.5 s;
When the animation is executed to 95%, it reaches the final state, and the remaining 5% of the time is used to return to the initial state.
(3) Code and Explanation<! DOCTYPE html>
<Html lang = "en">
<Head>
<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.5 s infinite alternate;
}
@ Keyframes down
{
95%
{
Width: 15px;
Height: 15px;
Border-radius: 7.5px;/* Ensure that the 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 );
/* Mentioned in the previous article */
-Webkit-background-clip: text;/* cut the background color and only display it on the text */
-Webkit-text-fill-color: transparent;/* fill in transparent text */
Background-size: 100% 700%;
/* Mentioned in the previous article */
Animation: bc 6 s infinite;
}
@ Keyframes bc
{
To
{
Background-position: 100% 100%;
/* Mentioned in the previous article */
}
}
</Style>
<Script type = "text/javascript">
</Script>
</Head
<Body>
<Div id = "frame">
<Div id = "head"> Animatiom </div>
<Div id = "lol"> </div>
</Div>
</Body>
</Html>
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
