Shulou(Shulou.com)06/01 Report--

(1) the three elements of the transition module:

1. There must be an attribute change.

2. The system must be told which attribute needs to perform the transition effect.

3. The system must be told how long the transition effect lasts.

Ps: separate multiple attributes with commas when they need to perform transition effects at the same time

Transition-property: width, background-color

Transition-duration: 5s, 5s

Sample code:

Transition module

Effect picture:

Before the change

Changing

After change

(2) other attributes of the transition module:

1. Tell the system how many seconds to delay before starting the transition animation: transition-delay: 2s

2. Tell the system the speed of the transition animation: transition-timing-function: linear

Sample code:

89-transition module-other attributes * {margin: 0; padding: 0;} div {width: 100px; height: 50px; background-color: red; transition-property: width; transition-duration: 5s / * tell the system how many seconds to delay before starting the transition animation * / transition-delay: 2s;} div:hover {width: 300px;} ul {width: 800px; height: 500px; margin: 0 auto; background-color: pink; border: 1px solid # 000 } ul li {list-style: none; width: 100px; height: 50px; margin-top: 50px; background-color: blue; transition-property: margin-left; transition-duration: 10s;} ul:hover li {margin-left: 700px } ul li:nth-child (1) {/ * tell the system the speed of the transition animation motion * / transition-timing-function: linear;} ul li:nth-child (2) {transition-timing-function: ease;} ul li:nth-child (3) {transition-timing-function: ease-in } ul li:nth-child (4) {transition-timing-function: ease-out;} ul li:nth-child (5) {transition-timing-function: ease-in-out;} linear ease ease-in ease-out ease-in-out

Different movement speeds will lead to different transition effects. Please take a look at the running effect diagram:

Before exercise

In motion

After exercise

(3) transitional concatenated format

Transition: transition attribute transition time long motion speed delay time

Pay attention to transitional concatenation

1 is the same as writing separately, if you want to add transition effects to multiple attributes, you can separate them with commas.

The latter two parameters can be omitted when concatenated, because the three elements of the transition have been satisfied as long as the first two parameters have been written.

3 if the speed / delay time / duration of the motion of multiple attributes are the same, it can be abbreviated as: transition:all 0s

Sample code:

Concatenation of the transition module * {margin: 0; padding: 0;} div {width: 100px; height: 50px; background-color: red; / * the code before shorthand in the comment: transition-property: width; ransition-duration: 5s Transition: width 5s linear 0s background-color 5s linear 0s; transition: background-color 5s color 0s; transition: width 5s linear 5s; transition: width 5s force height 5s * / * the abbreviated code is * / transition: color 5s;} div:hover {width: 300px; height: 300px; background-color: blue }

(4) the writing routines and cases of excessive modules

Write routines:

1. Never mind the transition, write the basic interface first

2. Modify the attributes that we think need to be modified

3. Go back and add the transition to the element of the modified attribute

Case 1:

Train of thought:

1. Do the basic page layout first and add style sheets to div and span

2. Consider how to achieve the effect to be done and the attributes that need to be changed

3. Add transition effect to attributes. It is recommended to use transition:all 1s when only one attribute changes or multiple attributes have the same transition time.

Transition module-elasticity * {margin: 0; padding: 0;} div {height: 150px; background-color: green; margin-top: 100px; text-align: center; line-height: 150px;} div span {font-size: 80px Transition: margin 3s;} div:hover span {margin: 020px;} L M S programmer to cross over

Sample picture:

Before the transition

In transition

After excessive

Case 2:

Accordion effect, sample code:

Transition module-accordion effect

Train of thought:

1. Complete the basic layout by floating, as shown in the figure:

2. Consider the effects you need to achieve, such as the following figure, that is, after the mouse is moved, the width of the li with the hover event becomes larger, and the rest is the same.

We can make all li smaller through the: hover event of ul, and then make the current li width larger by the: hover time of li. The case is small, the idea is big, this idea is often used in the future js or other places, that is, initialize all the elements first, and change the element attributes that need to be changed separately.

Second, 2d conversion module transform

(1) Writing method: transform: value; there are three commonly used values of transform:

1. Rotation: where deg is the unit, how many degrees does it represent: transform: rotate (45deg)

2. Move: first parameter: horizontal direction, second parameter: vertical direction, transform: translate (100px, 0px)

3. Zoom: the first parameter: horizontal direction, the second parameter: vertical direction, transform: scale (0.5,0.5); transform: scale (1.5)

Note:

If the value is 1, it means no change.

If the value is greater than 1, it means you need to zoom in.

If the value is less than 1, it means that it needs to be reduced.

If the horizontal and vertical scaling are the same, it can be abbreviated to a parameter

Ps:1, if multiple conversions are required, separate them with spaces

2. The 2D conversion module will change the coordinate system of the element, so the translation after rotation is not horizontal translation.

Sample code:

2D conversion module * {margin: 0; padding: 0;} ul {width: 800px; height: 500px; border: 1px solid # 000; margin: 0 auto;} ul li {list-style: none; width: 100px; height: 50px Background-color: red; margin: 0 auto; margin-top: 50px; text-align: center; line-height: 50px;} ul li:nth-child (2) {transform: rotate (45deg);} ul li:nth-child (3) {transform: translate (100px, 0px) } ul li:nth-child (4) {transform: scale (1.5);} ul li:nth-child (5) {transform: rotate (45deg) translate (100px, 0px) scale (1.5,1.5); / * transform: translate (100px, 0px) * /} normal rotation, translation, scaling, synthesis

Sample picture:

(2) the deformation center point of the conversion module:

By default, all elements rotate with their own center point as a reference, and we can modify its reference point by deforming the center point attribute.

1. Transform-origin: left top; the first parameter: horizontal direction, the second parameter: vertical direction.

Ps: there are three forms of values

Specific pixels: transform-origin: 200px 0px

Percentage: transform-origin: 50%

Special keyword: transform-origin: center center

2. Sample code:

Deformation center point of 2D conversion module * {margin: 0; padding: 0;} ul {width: 200px; height: 200px; border: 1px solid # 000; margin: 100px auto; position: relative;} ul li {list-style: none Width: 200px; height: 200px; position: absolute; left: 0; top: 0; transform-origin: left top;} ul li:nth-child (1) {background-color: red; transform: rotate (30deg) } ul li:nth-child (2) {background-color: green; transform: rotate (50deg);} ul li:nth-child (3) {background-color: blue; transform: rotate (70deg);}

(3) the rotation axis of the 2d conversion module

The rotate rotation attribute rotates around the z axis by default. If you need to change the rotation axis, you can add the rotation axis after rotate, namely: rotateX (); rotateY (); rotateZ ()

1. When rotating around the x and y axes, it will change the distance of the attribute from us, that is, perspective. What kind of perspective is near big and far small.

2. You will find that the rotation of the element around the x-axis or y-axis does not have a far-reaching effect, so you need to add a perspective attribute: perspective: 500px; Note: this attribute needs to be added to the parent container of the element

Rotate axis * {margin: 0; padding: 0;} ul {width: 800px; height: 500px; margin: 0 auto;} ul li {list-style: none; width: 200px; height: 200px; margin: 0 auto Margin-top: 50px; border: 1px solid # 000; perspective: 500px;} ul li div {width: 200px; height: 200px; background-color: # ac4345;} ul li:nth-child (1) div {transform: rotateZ (45deg) } ul li:nth-child (2) div {transform: rotateX (45deg);} ul li:nth-child (3) div {transform: rotateY (45deg);}

Sample picture:

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.