[Css] I want to use css to draw images (5) and css to draw images

[Css] I want to use css to draw images (5) and css to draw images

Next to the previous [css], I used css to draw a picture (4). This time I added a dialog to James and used a simple animation effect.

 

Github: https://github.com/bee0060/Css-Paint, complete code available in pages/sun-house-4.html and related css

Demo: http://bee0060.github.io/Css-Paint/pages/sun-house-5.html

 

The complete html is as follows:

1 <! DOCTYPE html> 2  

I put the required animated css in a separate file:

1. human-speak {2 color: # fff; 3 float: left; 4-webkit-animation-duration: 3 s; 5-webkit-animation-name: humanLineAppear; 6} 7 8. human-speak-delay-3 {9-webkit-animation-delay: 3s10} 11 12. human-speak-delay-6 {13-webkit-animation-delay: 6s14} 15 16. human-speak-delay-9 {17-webkit-animation-delay: 9s18} 19 20. human-speak-delay-12 {21-webkit-animation-delay: 12s22} 23 24. human-speak-delay-15 {25-webkit-animation-delay: 15s26} 27 28 @-webkit-keyframes humanLineAppear {29 from {30 top:-50px; 31 color: # fff; 32} 33 20% {34 top:-40px; 35 color: #000; 36 z-index: 10; 37} 38 80% {39 top:-40px; 40 color: #000; 41 z-index: 10; 42} 43 to {44 top:-50px; 45 color: # fff; 46 z-index: 1; 47} 48}Human-animate.css

 

The unfamiliar css attributes or keywords used here include:

1.-webkit-animation-duration

2.-webkit-animation-delay

3.-webkit-animation-name

4. @-webkit-keyframes

 

Follow the example above MDN document address: https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Animations/Using_CSS_animations

 

Css of the animation System (animation attribute and its sub-attribute) must be prefixed with the browser (-webkit-) in chrome. In this case, no prefix is required for cutting-edge chrome, A little pity. The following descriptions omit the prefix.

 

The above 1-3 values are all css attributes. You can add them to the css selector or directly add them to the style attribute of the tag in the form of inline attributes.

The 4th keyframes are different. Let's talk about it later.

 

1. animation-duration: specifies the time required for executing the entire animation. The value in time format must be in the number + unit format. The unit can be s (seconds) or ms (milliseconds ), the default value is 0 s.

2. animation-delay: the animation execution delay time, that is, the time between the object loading and the start of the animation. The accepted time format is also the time. The default value is 0 s.

3. animation-name: Specifies the name of the animation rule used. The default value is none.

4. @ keyframes: This is a keyword, and Chinese translation is "Key Frame ". The "@" symbol at the beginning is required, and the browser prefix should be written as @-webkit-keyframes yourKeyframesName. yourKeyframesName is your key frame name.

This keyword is used to declare an animation rule. It can also be considered as a special selector. Similar to the function keyword used to declare a function in js. The syntax is similar to the following: (The-wekit-prefix is added in the example)

 1 @-webkit-keyframes humanLineAppear{ 2     from{ 3         top: -50px; 4         color: #fff; 5     } 6     20%{ 7         top: -40px; 8         color: #000; 9         z-index:10;10     }11     80%{12         top: -40px;13         color: #000;14         z-index:10;15     }16     to{17         top: -50px;18         color: #fff;19         z-index:1;20     }21 }

The key frame syntax is as follows. css attributes are written in a key frame in a way similar to a selector. However, the "selector" name is no longer the id or className, but the description of the frame, it is also called the description of the time node. It accepts the from, to, or percentage value.

Where from is equivalent to 0%, to is equivalent to 100%,

0% indicates the animation start time, and 100% indicates the end time. If the animation execution time (the value of the animation-duration Attribute) is 10 s, 50% indicates the moment of 5th s.

 

Each percentage value in it represents a time node in the animation execution process. It is called "frame", and the CSS attribute set of frames is called "frame selector ".

The frame selector is used to set the css style of a certain time node in the animation.

 

If the same css attribute name and different attribute values are set between different frames,

Based on the frame time sequence, the browser will find the combination of the most adjacent frames with different attribute values for this CSS attribute (there may be a combination of multiple frames). The sample code is used as an example, the following combination is found for the top attribute:

1. from (0%) --> 20%: top changes from-50px to-40px

2. 80% --> to (100%): top changes from-40px to-50px

 

The preceding frame combination has both the start and end frames, and both contain at least one CSS attribute change. We temporarily call it "frame range ".

When the Browser executes an animation, the CSS attribute changes at a constant speed within the frame range, that is, the attribute value specified for the starting frame increases or decreases at a constant speed to the attribute value specified for the ending frame.

 

I'm an abrupt split line --------------------------------------------------------------------------------

 

To make an animation take effect, the following three conditions must be met:

1. The animation-name must point to a valid key frame declared with @ keyframes, indicating that the animation has a valid animation rule.

2. the animation-duration value is greater than 0 s, indicating that the animation will be executed more than 0 s.

3. The animation-iteration-count value is greater than 0, indicating that the animation will be executed at least once. (The default value of this attribute is 1, so you do not need to set it)

 

Now you can write a simple animation of your own.

 

This is today. Thank you for watching. If any error occurs, please correct it.