1. Create a background
1.1 As a prospective front end to enter the industry, there is no foundation, temporarily according to the guidance of online predecessors, learning step by step. The first step is to learn how to use CSS3. In the early stage, I have done several simple imitation of the homepage of the website, and now I want to try the production of animation effect. If there is any wrong place, welcome criticism and correction: I want to progress!
1.2 I have no art foundation and can’t design, so I found an interesting case and wanted to try it. So far, I haven’t seen the original code. Failed to fully achieve the effect of the others, later have the opportunity to modify in detail. I couldn’t do the pixel-level restoration, so my little brother didn’t look quite the same…
Source (I did case 1) :Links to describe
Here’s my full code on GitHub:Links to describe
Static effect
2.1 Background
2.1.1 The first is the circular background in the figure, which is easier to achieve.
To position it in the center of the screen and at a distance from the top, first set the following style:
<body>
<div class="container">
</div>
</body>Copy the codebody{
margin:50px 0 0 0;
}
.container{
margin-left:auto;
margin-right: auto;
}Copy the codeThe HTML code is as follows:
<div class="bg-circle">
<div class="bg"></div>
</div>Copy the codeThe CSS code is as follows:
.bg{
height: 30px;
width: 300px;
background-color: #699;
}
.bg-circle{
margin-left:auto;
margin-right:auto;
width: 300px;
height: 300px;
border-radius: 50%;
overflow: hidden;
}Copy the codeIn general, the CSS section can be a single file, and to introduce it, just write in <head></head> :
<link rel="stylesheet" href="shakehead.css">Copy the codeI’m putting the HTML page and the CSS page in the same directory, so I can just put the file name in the href of the path. In the code above:
margin-left:auto; margin-right:auto; Horizontal center display is ensured. border-radius: 50%; You can turn a square into a perfect circle. overflow: hidden; You can ensure that the child element does not exceed the region given by this element.Copy the codeAlso, because.bg-circle sets overflow: hidden; So if the BG is bigger than 300px, you won’t be able to tell the difference. .
2.1.2 There is a shadow on the left and the right, so it should be used as a child tag of.bg-circle. The HTML code is as follows:
<div class="bg-circle">
<div class="bg"></div>
<div class="shadow-left"></div>
<div class="shadow-right"></div>
</div>Copy the codeThe CSS code is as follows:
.shadow-left{
position: absolute;
z-index: 59;
width: 240px;
height: 100px;
background-color: #476b6b;
opacity: .8;
transform: rotate(45deg);
}
.shadow-right{
position: absolute;
width: 320px;
height: 100px;
background-color: #e0ebeb;
opacity: .7;
transform: rotate(-35deg);
}Copy the codeCareful words, should have found that the shadow on the left, a little covered the body of the young man, but also covered a letter, so it is higher than other layers. The z-index property must be set, and the specific value can be written according to the data of the layer you want to stack. If it is larger than 1 point, it is also larger. However, to set the Z-index, you must set position: relative, Absolute, or fixed.
Transform: rotate(Xdeg); You can do that, but sometimes you have to think about the position of the tilted element, so you can also set the transform-origin property to be more serious. There are a lot of this application online, I believe that the average person can understand. The main thing to remember is that the first value is horizontal (X) and the second value is vertical (Y); The default center is 50%, 50%, the top left corner is 0,0, and the bottom right corner is 100%, 100%.
But because these two shadows came out a little later, they are not visible when the code is finished. For debugging, it can be temporarily positioned to the final position:
.shadow-left{ left:-100px; bottom:-10px; } .shadow-right{ right: -100px; bottom:10px; };Copy the codeOr right-click and check, in the Elements field, and select the label you want to view to show where it is.
2.2 Figure head
2.2.1 The composition structure of the figure’s head should be the most complicated in the whole picture. From the purpose, I want to do a pure CSS3 web page, would like to do not cut the map to complete; From the effect, almost every part has to have action, cut a head out of the useless, if it is to cut each part out, to be honest, I am not good at PS, have that time I would rather USE CSS; In addition, it is said that web pages written with CSS are faster, hey hey!
As far as you can see, all parts of the head, yes, all parts, are rectangular elements with different rounded corners. So what we need to do is to adjust the height and width of each element, the appropriate rounded corners, do a good job of the stacking relationship of each layer, and finally layout in the appropriate position, even if completed.
2.2.2 First of all, in the animation, the head, as a whole, has an action, so there must be a layer wrapped around it, which is the label. Head.
The HTML code is as follows:
<div class="head"></div>Copy the codeIn addition, when positioning, there is a wrapping layer, which is also conducive to the positioning of eyebrows, eyes, nose, etc., I think it is quite convenient. The CSS code is as follows:
.head{
position: absolute;
top: 20px;
left: 50%;
}Copy the codeAbsolute positioning helps to position this head where I want it, which is top,left and I can set it on top of that.
When doing horizontal center display, it is usually left:50%; margin-left:-a px; (A is half the width of the element to be centered horizontally). But since the. Head is just a wrapping layer, there is no need to set the width and height, so I only use left: 50%; This sentence. Open the browser’s own inspection tool and you can see that the. Head is a little to the right of the central axis and has no area.
2.2.3 In the picture, the most conspicuous part is the big face, which is also the best part to write:
The HTML code is as follows:
<div class="head">
<div class="face"></div>
</div>Copy the codeJust have the face — face as a child of the.head. The CSS code is as follows:
.face{
position: absolute;
top:75px;
left: 50%;
margin-left: -60px;
width: 120px;
height: 170px;
border-radius: 30px;
background-color: #fff7e5;
}Copy the codeSince.face is the lowest level of the header, you can leave the z-index attribute unset. This pair of friends are used to center.face.
left: 50%;
margin-left: -60px;Copy the codeWidth: 120px; In the half. To create a rounded chin for this guy, I set border-radius: 30px; In fact, all four corners are round, and the top two corners are hidden by the hair anyway (like a friend of mine who has bangs so he doesn’t have to draw his eyebrows carefully, which makes us mad that we spend time every day exposing our foreheads to people with symmetrical eyebrows). However, if you are more ocD than I am, you can just set the border-bottom-left-radius and border-bottom-right-radius values, which are the same. But it is said that you have written two lines of code, which is not optimal from a code optimization point of view. 2.2.4 Then, I came up with the idea of adding hair, which I think is also easy to write, but the ideal is always full… After all, the hair is in the shape of an arch, and when the main body is made, the forehead is exposed, and there is a dull hair on the top of the head, and a little clump of hair in the middle of the forehead, and technically, a little temple in front of the ears. Oh my God… In the actual production, I choose to leave the sideburns for the ears, after all, they are close to each other, at this time, don’t care if it is hair, right, heh heh. 2.2.4.1 First determine the HTML structure. The HTML code is as follows:
<div class="head">
<div class="face"></div>
<div class="hair">
<div class="forehead"></div>
<div class="rub-up"></div>
<div class="rub-down"></div>
</div>
</div>Copy the codeThe robber – forces the forehead, and the forehead rubs-up and bangs -down in the label of hair. .
2.2.4.2 Start with the main part of the hair.
The CSS code is as follows:
.hair{
position: absolute;
z-index: 9;
top:160px;
left: 50%;
margin-left: -70px;
width: 140px;
background-color: #ffd11a;
}Copy the codeThe hair should be placed under the eyebrows and eyes, so the Z-index should be smaller than the eyebrows and eyes written later. But considering that when you’re animating, the ears are actually coming out of the back of the hair, so I want to give them some leeway, so I’m going to give.hair a Z-index of 9 here. The problem of animation should be mentioned in advance: in the final effect, the hair part is displayed from the bottom up, so the height and rounded corners cannot be given at the top. Both are written in the final state of animation effect, which will be mentioned later. The width doesn’t change, so I can write it right here. There is no height, so we can’t see hair now. But it doesn’t have a height, and the stuffiness and bangs behind it won’t show up, so I’ll add the following code to the.hair first:
{
height: 100px;
top:60px;
border-radius: 40px 40px 0 0;
}Copy the code2.2.4.3 Then the forehead.
The CSS code is as follows:
.forehead{
position: absolute;
bottom:0;
left: 50%;
margin-left: -55px;
width: 110px;
height: 65px;
border-radius: 25px 25px 0 0;
background-color: #fff7e5;
}Copy the codeAn arched hair effect is achieved by placing a layer on top of the hair shown by the background color of the face and placing two rounded corners at the top. Instead of “top, right, bottom, left” for margin and padding, border-radius is “top, left, top, right, bottom, left”.
2.2.4.4 Dull hair on top and bangs.
The CSS code is as follows:
.rub-up{
position: absolute;
top: -10px;
left: 50%;
margin-left: -40px;
width: 80px;
border-top-right-radius: 15px;
background-color: #ffd11a;
}
.rub-down{
position: absolute;
top: 25px;
left: 50%;
margin-left: -20px;
width: 40px;
border-bottom-left-radius:20px;
background-color: #ffd11a;
}
.hair,.rub-up,.rub-down{
background-color: #ffd11a;
}Copy the codeThe dumb hair on top of the hair only needs the rounded corner in the top right corner, so just border-top-right-radius: 15px; This one will do. It is important to note that the order of speech is different from That in Chinese, where “up/down” is said first and “left/right” is followed. Similarly, bangs should be rounded at the bottom left, so border-bottom-left-radius:20px. Both locks are animated by changing their height and positioning. To illustrate the final result, I added the following code:
.rub-up{
height: 30px;
transform:rotate(0deg);
}
.rub-down{
height: 30px;
}Copy the codeFinally, use the same color on all three parts of your hair to make it look like one. Class names are separated by a comma (,) (always use a comma.) . You could also create a common class name for each tag that uses a hair color, like this:
<div class="hair hair-color">
<div class="forehead"></div>
<div class="rub-up hair-color"></div>
<div class="rub-down hair-color"></div>
</div>Copy the codeThen give the class a separate color:
.hair-color{
background-color: #ffd11a;
}Copy the codeThat way, if you want to use the background color later, just add this class. In my opinion, on the premise of code optimization, if it can ensure convenient use and semantic as far as possible, it will be more conducive to the writing of the whole code and later modification and maintenance. 2.2.5 From top to bottom, we are going to talk about eyebrows, eyes, ears and mouth respectively. Why not mention the nose? I think you have guessed, I will talk about this later, heh heh! 2.2.5.1 First determine the HTML structure. The HTML code is as follows:
<div class="eyebrows">
<div class="brow-left"></div>
<div class="brow-right"></div>
</div>
<div class="eyes">
<div class="eye-left"></div>
<div class="eye-right"></div>
</div>
<div class="sockets">
<div class="socket-left"></div>
<div class="socket-right"></div>
</div>
<div class="earsandtemples">
<div class="ear-left"></div>
<div class="ear-right"></div>
<div class="temple-left"></div>
<div class="temple-right"></div>
</div>
<div class="mouth"></div>Copy the codeDivs (.Eyebrows,.eyes,.sockets,.earsandTemples,.mouth) are the children of the.head, the siblings of the.face and the.hair. As I said before, I wrote the ear and the bristle horns together because they are close to each other. Actually, I wanted to write eyes and dark circles together, but guess what? Yeah, because in the animation, the eyes blink and blink, and they blink together. My idea was to write that action on the envelope where the eye is, and then, ok, the black eye blinks… If you don’t believe in evil, you can try it, and the effect is awesome… But now when I’m writing this article, it occurs to me that if I write a separate animation for each eye, it’s ok to write the same one. Why am I so single-minded? I think it shows that there are different ways to achieve the same effect, and that’s the fun of writing code, right?
2.2.5.2 As for the style, let’s start with the eyebrows: they are two rectangular divs, and the one on the right is OK if it is slightly tilted.
The CSS code is as follows:
.eyebrows{ position: absolute; z-index: 59; top:-50px; /*----- The final effect at the end of the animation is top:120px; */ left: 50%; margin-left: -45px; width: 90px; } .brow-left,.brow-right{ width: 30px; height: 8px; background-color: #ffd11a; } .brow-left{ float: left; } .brow-right{ float:right; transform: rotate(10deg); }Copy the codeBecause just.hair’s z-index: 9; One of them is the forehead, so if you want to show your eyebrows, you have to have at least a 9, no less, no more. So the 59 that I set here is also ok. The two eyebrows are wrapped in one. “Eyebrows”, I think it is very convenient to float the two eyebrows left and right as long as the parent element is absolutely positioned and the width is clearly written. I don’t know if there’s a better way. The eyebrows were written together because they were the same size and color.
Transform: Rotate (Xdeg); Transform: rotate(Xdeg) And the default rotation center is exactly the center of the element, which is exactly what I want, so I didn’t go out of my way to write transform-Origin.
2.2.5.3 Now it’s time to talk about eyes and dark circles under the eyes. .
The CSS code is as follows:
.eyes{ position: absolute; z-index: 69; bottom: -162px; left: 50%; margin-left: -35px; width: 70px; } .eye-left,.eye-right{ width: 14px; border-radius: 7px; background-color: #264c73; /*------ the final effect of the end of the animation should be added :*/ height: 22px; } .eye-left{ float: left; } .eye-right{ margin-left: 56px; } .sockets{ position: absolute; z-index: 59; top:155px; left: 50%; margin-left: -38px; width: 76px; } .socket-left{ float: left; } .socket-right{ float: right; } .socket-left,.socket-right{ height: 10px; width: 20px; border-radius: 0 0 10px 10px; /*------ */ background-color: #cc6600; Opacity: 0.1; }Copy the codeThe eyes are above the orbit, so the orbit (59) is still higher (or at least equal) than the hair (59) on the Z-index, but the eye (69) is higher than the orbit.
As you can see here, we’ve used the border-radius attribute several times. I feel it can achieve a lot of shapes, it’s amazing! The eyes here, for example, look semicircular at the top and bottom with a rectangle in the middle, but really just set the border-radius value to half the width. If you see here, if you didn’t understand what was going on at the beginning of the perfect circle, you can understand it, right? Just make the rounded element the same width and height! If the width and height are inconsistent, it will have the same effect as the eyes here
So, semicircular orbits are easy to write about, right? Set only the bottom two rounded border-radius: 0 0 10px 10px.
But! I didn’t set the initial color for the eyes, so you can’t see them as they are now, so I’ll add them here for effect. Because in the animation, they fade out, so I write them directly in the animation, otherwise, well, interested friends can try it out for themselves…
2.2.5.3 For the temples and ears, as mentioned above, attention should be paid to the overlapping relationship.
The CSS code is as follows:
.earsandtemples{ position: absolute; z-index:1; top:160px; left: 50%; margin-left:-70px; width: 140px; } .ear-left,.ear-right{ position: absolute; width: 10px; background-color: #fff7e5; } .ear-left{ border-bottom-left-radius:10px; } .ear-right{ border-bottom-right-radius: 10px; } .temple-left,.temple-right{ position: absolute; width: 5px; /*------ the final effect of the end of the animation should be added :*/ height: 20px; bottom:-20px; opacity: 1; } .temple-left{ left: 10px; } .temple-right{ right: 10px; }Copy the codeAlso add these two sideburns to the front of the hair color setting:
.hair,.rub-up,.rub-down,.temple-left,.temple-right{
background-color: #ffd11a;
}Copy the codeWhat’s interesting about this is that they all come from the hair about the temple, so let’s say position: absolute; The specific position is written in the animation, and you can change the top, bottom, left or right to achieve the final effect.
2.2.5.3 The writing of mouth is the same as black circles under the eyes.
The CSS code is as follows:
.mouth{ position: absolute; top: 195px; left: 50%; margin-left: -25px; width: 50px; border-radius: 0 0 25px 25px; background-color: #fff; /*------ the final effect of the end of the animation should be added :*/ height: 20px; }Copy the codeWhen I write the forehead covering the face, I end up above the ear, so I don’t have to write the Z-index in the mouth.
2.2.6 All that is missing from the head now is the shadow that takes up half the face, and the nose that accompanies it. I wrote them all together. Yeah, I put my nose here because it’s close to me. Did you guess right, my friend?
The HTML code is as follows:
<div class="shadowandnose">
<div class="shadow"></div>
<div class="nose"></div>
</div>Copy the codeHere,.shadowandnose is also a child of.head. The CSS code is as follows:
.shadowandnose{ position: absolute; z-index: 79; top:75px; left: 50%; margin-left: -60px; width: 120px; } .shadow{ width: 60px; height: 170px; border-radius: 30px; /*------ The final effect at the end of animation should add :*/ opacity:.1; background-color: #555; } .nose{ position: absolute; left: 50%; top:50%; margin-top:-5px; height: 30px; border-top-left-radius: 15px; background-color: #fff7e5; /*------ add :*/ width: 15px; margin-left: -15px; }Copy the code.Shadowandnose’s z-index should be greater than or equal to 69. Here, I set it to 79. In addition, since the. Nose tag is written after the. Shadow tag, it is written above it by default, so you can omit the z-index attribute. On the contrary, if you change the order of these two labels, you must write, interested friends can have a try.
And the other thing is, the top part of the head is going to be outside the circle, so the whole head div, the.head, can’t be wrapped around the.bg-circle, and its Z-index is higher than the.bg-circle. So I set them to be peers, and because of the z-index of the front dot bg-circle, the dot head can be displayed above it even if it doesn’t have the z-index set.
Here, the young man’s head is basically complete, which has a small amount of code to write action after the complete embodiment, but I also all write out first!
2.3 Figure body
2.3.1 Compared to the head mentioned above, the body part of the figure is simpler. Let’s start with the black T-shirt.
The HTML code is as follows:
<div class="bg-circle">
<div class="bg"></div>
<div class="shirt"></div>
<div class="shadow-left"></div>
<div class="shadow-right"></div>
</div>Copy the codeBecause it’s kind of superimposed on those two shadows, I’ll write it as a child of dot bg-circle as well. The CSS code is as follows:
.shirt{
position: absolute;
z-index: 39;
bottom: -10px;
left: 50%;
margin-left: -90px;
width: 180px;
background-color: black;
}Copy the codeIn this case, I want the black T-shirt to be above the light shadow and under the deep shadow. When I write the light shadow, I don’t give z-index, so the black T-shirt only needs z-index greater than 0. Dark shadow I wrote z-index: 59, so black T-shirt less than 59 is ok. However, you can’t set the Z-index too high because there are several words on the black T-shirt, so I set the Z-index to 39.
2.3.2 The letters on these T-shirts appear one by one in the animation, so I write them out separately.
The HTML code is as follows:
<div class="bg-circle"> <div class="bg"></div> <div class="shirt"></div> <div class="logo"> <div class="i">I</div> <div Class = "love" > has < / div > < div class = "c" > c < / div > < div class = "s1" > S < / div > < div class = "s2" > S < / div > < / div > < div class="shadow-left"></div> <div class="shadow-right"></div> </div>Copy the codeAt this point, the.bg-circle structure is complete! The CSS code is as follows:
.logo{ display: flex; justify-content: space-around; position: absolute; z-index: 49; left:50%; bottom:-35px; margin-left:-60px; width: 120px; height: 105px; color: #fff; font-size: 22px; font-weight: bold; } .love{ color:red; } .i,.love,.c,.s1,.s2{ margin-top:100px; /*------ add :*/ margin-top:25px; }Copy the codeTo make it easier to keep the letters evenly spaced, I use display: flex; Property, and set context-content: space-around; Property that equalizes the spacing on both sides of each element with space at both ends. In fact, if I change this to justify-content to space-between, the effect is similar.
I copied the heart from the case page, I don’t know how to type it (/ω \).
These letters are on the top of the black T-shirt and need to be covered by dark shadows, so I set z-index to 49.
2.4 The two swaying notes are easier to write. If you don’t think about animations, just make them appear and sit on top of the entire central section.
The HTML code is as follows:
<div class="notes">
<div class="note2"><img src="note2.png"></div>
<div class="note1"><img src="note1.png"></div>
</div>Copy the codeIn the same way that the.head is displayed above the.bg-circle area, it must be the same as it is, and because.bg-circle{z-index:0; }, you can leave out the z-index of. Notes. The CSS code is as follows:
.notes{
position: absolute;
left: 50%;
margin-left:-170px;
width: 340px;
}
.note2{
float: left;
margin-left: 30px;
opacity: 0;
}
.note1{
float: right;
margin-right: 30px;
opacity: 0;
}Copy the codeI don’t need to say anything else, but some might ask, what is the purpose of setting opacity: 0 at the top? To be honest, it’s been less than half a month since I wrote this myself, and I’m totally confused. . I went back and tried it out, and it turned out to be like this: because the animation of these two notes has a delay value, they don’t start to wobble, they have to wait for their face to finish, so they have to be invisible when they stand by, and when they come out, they will be shown in the animation effect. And just to illustrate, I’m going to arbitrarily take one of the values of their motion and add them to it, just so you can see where they are. The code is as follows:
.note1,.note2{
transform: rotate(0deg);
opacity: .7;
margin-top:-150px;
}Copy the code2.5 This is not the end. I don’t know if you remember, but there were four yellow rings that appeared one after the other, and they only appeared once?
The HTML code is as follows:
<div class="rounds">
<div class="round1"></div>
<div class="round2"></div>
<div class="round3"></div>
<div class="round4"></div>
</div>Copy the code.rounds is also.bg-circle’s sibling, so that it is not affected by.bg-circle’s over-flow:hidden, and is under the hair, the note. The CSS code is as follows:
.round1,.round2,.round3,.round4{
position: absolute;
top:76px;
left: 50%;
margin-left: -124px;
border-radius: 50%;
background-color: transparent;
}Copy the codeIf you just write it this way, they’re invisible. I’m going to take one of the process values in their animation and let one of them circle out and say:
.round1{ border:1px solid #ffd11a; width: 240px; height: 240px; The transform: scale (1.2); }Copy the codeProbably just out of personal habit, I put a.rounds layer on it, but I don’t actually style it. I tried to delete it and it made no difference to the result. As it turns out, the wrap is only useful when I want to fold up the parts. I don’t understand much now, and I’ll supplement it when I have new ideas. The other thing is interesting. It works wonders if I’m going to put the current styles in. RoundX instead of putting them on separate. I think these attempts will also help beginners understand how CSS works, so if you’re interested, try them out. Code can’t be seen, it can only be typed. I think it’s the same with everything else. (Occupational disease, may be terminal, probably can not be treated……)
3. Animate
3.1 Reference cases, record the animation effect and sequence of each part I used a rather stupid method, with a small book, refresh the page again and again, see which action appeared first, what is next, what is the effect of each action, whether there are other actions at the same time. But after all, it depends on the estimated time difference and various angles, so it can not be highly restored, so the whole meaning is almost the same. Otherwise I might have to do something a little more earthier, like set up a timer or something (/ω \). Here’s my timeline, or my progress chart, right? Start – > [blue background circle (appear larger – normally, 0.8 s) + black T (appear larger – normally, 1 s)] + face (larger – normal, 0.5 s, late 1 s) – > [hair body (from the bottom up, 0.8 s, 1.5 s later) + sideburns (0.4 s, 2.3 s later)] – > cap (0.6 s, 2.3 s) late — > ear (0.4 s, 2.9 s) late — > bang (0.4 s, 3.3 s later) – > {[eyes appear (0.5 s, 3.7 s) late] + eye socket (0.3 s, 3.7 s later) + [eyebrows appear (0.4 s, 3.7 s later), the right eyebrow (3 s, late 2.5 s)]} — > mouth (0.5 s, 4.2 s) late — > letters (4 s + 1 s, late) – > [shadow on both sides (5.7 s, delay to write in the animation) + four circle (5 s + 1 s +, late) + face profile (0.5 s, 4.7 s later) + nose (0.5 s, 4.7 s later) + shook his head (1 s, late 5.2 s) + blink (5 s, late 5.2 s)] – > notes (2 s, 5 s +) later. This is actually the most time-consuming part, I feel. It was hard to keep track of then, and now it’s a mess to write… But writing it down or writing it down, forming a plan or timeline, is always better than watching and doing. 3.2 Animation 3.2.1 Basic operations: After planning, writing animation effects is actually the easiest! First, let’s take that circular background as an example:
.bg-circle{/* Animation: block.8s forwards Linear; } @keyframes bigger{ 0%{height: 200px; width: 200px; margin-top: 40px; 75%} {the transform: scale (1.0, 1.0); 100%} {the transform: scale (0.8, 0.8); margin-top: 0; }}Copy the codeInside the style of the element to be animated, add an animation:… ; This is ok (I use the shorthand method here, or each animation effect can be written separately, this can be found on the Internet, I will not systematically list). The first property (bigger) is the name of the animation I want to call, animation-name; The second property (.8s, or written as 0.8s) is the time it takes to complete the animation. If it is played multiple times, this is the time of each cycle, animation-duration; The third property (forwards) is what style the element will be in after the animation is finished, animation-fence-mode. Forwards is to maintain the final posture when the Settings animations are finished, don’t move. There’s a lot more to this property, but I haven’t used anything else, so I’m afraid to say; Linear sets the speed curve of this action, that is, animation-timing-function. Linear is a velocity from beginning to end. I also use ease, slow-fast-slow, very natural. This property also has many values, try more, better use later. Since I’m using Chrome myself, I haven’t done any browser compatibility exercises yet (I’ll write separately if I do in the future). So just use @keyframes bigger{… } to define the animation. In @ keyframes youranimation {… } it is said that it is best to always set from/0% and to/100%. I have no research on these two methods, and I have no problems with either method when testing. Other process value, can be set casually, do not stick to 50%, 75% and so on, I set 88% to debug, also ok. But if you don’t have to, if the effect is not too bad, don’t bother yourself by multiplying animation-duration by 88%. 3.2.2.1 Sometimes, an element has two actions, such as the eyes: at the beginning, the eyes have to be enlarged and then returned to normal size, and then when everything on the face appears, the eyes have to blink with the shaking of the head. Also, we need to allow the action to wait a little while before starting, also known as delay. At this point, the action effect can be written like this:
Eye-left,. Eye-right {/* Animation: OpenEyes 0.5s 3.7s forward,wink 5s 5.2s infinite; } @keyframes openeyes{ 0%{} 75%{height: 33px; width: 21px; Opacity: 0.4; border-radius: 0; } 100%{height: 22px; } } @keyframes wink{ 0%,90%{height:22px; } 95%{height: 0; } 100%{height:22px; }}Copy the codeFor the same element, two actions must be written in the same animation, separated by “, “. If I write two animations :… ; The last one will cover the first one, so it’s like just writing one. In addition, each group of shorthand animation:… ; The first value is the length of the animation period, and the second value is the delay time, i.e. Animation-delay. At first, I insisted on writing them separately because I was worried that there might be some misunderstanding. And then I found an example on the web, which is shorthand, and I changed my code to that. After all, in the name of code optimization, every line saved is a line saved! 3.2.2.2 in @ keyframes youranimation {… }, you can also use shorthand. If the action has the same effect at several points in time, you can write it all together. For example, when I write wink above, I write 0%,90% of the time as the same effect, which is equivalent to using 90% of the animation time as the delay. Or when I was writing a cartoon about Dumb Hair:
@keyframes upper{ 0%,90%,100%{transform-origin: 80% 100%; } 0%{height: 0; top:5px; transform:rotate(-5deg); } 90%{height: 30px; transform:rotate(10deg); } 100%{height: 30px; transform:rotate(0deg); }}Copy the codeIn my code, this usage is relatively common. 3.2.2.3 In another case, when multiple elements call a preset animation at the same time, we only need to make some minor adjustments to make the multiple elements have different effects. Like the four rings that spread out from the center, remember?
Round2 {animation:rd2.8s 5.6s forward; }. Round3 {animation:rd2.8s 5.7s forward; }. Round4 {animation:rd2.8s 5.8s forward; } @keyframes rd2{ 0%{border:2px solid #ffd11a; width: 240px; height: 240px; } 90%{border:1px solid #ffd11a; width: 240px; height: 240px; The transform: scale (1.3); } 100%{opacity:0; }}Copy the codeI’ve changed a little bit here, but I’ve changed the delay of each ring differently, and that’s what it looks like. I’ll try other variations when I get the chance. It’s fun!
4. Conclusion
At the beginning, WHEN I was going to do exercises based on other people’s cases, I refused… After all, I’ve never had any experience making CSS work. But that’s what I thought when I first started working with Flex. I can’t say how proficient I am now, but after using it a few times, I at least know what Flex does and where to find out if it doesn’t. This process I think is very important. So this time, I also give myself cheer, tell myself can do it! In the process of manufacturing, there are many problems, especially the problem of positioning. I have not experienced such a complex positioning relationship before, in fact, from this point can also see how poor my foundation… But I always ask myself: Why can others do it? Is it because he’s a genius? Or is it because he can dream it? If not, then they are also a little bit of learning, I can also. I may be slower, I may not be as quick, but I can always learn, and it’s better than stopping when I see a problem. So, every time I don’t understand something, I check the tutorial online to see if anyone asks questions and see the answers of others. If you really don’t understand, look slowly. Again do not understand, write up the others code, a deleted, to see which words play a role, there are a few words is to play a role together. In this process, I found it very effective to use the browser’s own inspection tools. After I finished writing it all, I felt quite talented. It’s like climbing a mountain! After a while, I began to learn Jquery the next day. I read a book and wrote a case of a big turntable. Then I realized that I couldn’t finish writing these things. I had to summarize them, or I would definitely forget them later. As I go back to writing this article today, just a week or two later, I have a few thoughts: What was I thinking? What’s so hard about this thing? What is it? Why is the sequence of these codes so strange? I feel that this shows that I am indeed making progress, and that without keeping records, I can gradually forget things I thought I would never forget. CSS code should be written in a certain order: position, size, text, background, etc. As I was writing this article, I realized that I was literally writing whatever came to mind. There was no order. Also, there’s a lot of redundant code that doesn’t work, probably the legacy of an unsuccessful debug. In this arrangement, I have modified all of them. Before I saw other technical masters write their own experience, wrote that time to do such a summary. Name, can improve their attention; For oneself is also the process of further internalizing the knowledge learned. You must be able to settle down and accumulate your thoughts. Inward vision is also a kind of practice. Inspired by this, I gritted my teeth and forced myself to do the same. To be honest, my head hurts just thinking about starting this article. To escape, I even started finding myself other things to do, making it seem like I didn’t have time. But later I still face up to themselves, do not run, run more than the first and run 15. Think also, cheat oneself stem what? When I actually started doing it, I realized how important it was and how good it was for me. The most direct, but also the most brutal side, is their previous shortcomings and defects, one by one to fall in front of the eyes: this is you think you are good, this is the so-called you finished? ! But thankfully, isn’t it great that I’m the first one to see these deficiencies? It’s better than gloating and showing others what you’ve done and then being criticized for being worthless.