2015-4-20 BAV Promotion page changes before and after the comparison-secure online shopping

1 Discovery Differences

Use too much div. There are many unnecessary duplicate codes. There are many heights (height) not necessary to set large. Adaptive method of use. Cetucci is not good, PS use needs to be strengthened. The download button is different. The animation effect is not finished. 2. Learn to use background positioning flexibly: background-position. Background size: Background-size. The contain expands the image image to its maximum size so that its width and height are fully adapted to the content area. Use good padding to set the background color. Use @media screen and to implement page self-adaptation. Pay attention to inheritance and reduce duplication of code. Box-shadow set Border Shadow animation with element binding: Animation:mymove 5s Infinite;-webkit-animation:mymove 5s Infinite;animation property is a shorthand property, Used to set the six animation properties:animation-name  Specifies the keyframe name that needs to be bound to a selector. animation-duration  specifies the time, in seconds or milliseconds, that the animation will take to complete. animation-timing-function  Specifies the speed curve of the animation. animation-delay  specifies the delay before the animation begins. animation-iteration-count  specifies the number of times the animation should play. Infinite Unlimited Play animation-direction  Specifies whether the animation should be rotated in reverse. Note: Always specify the Animation-duration property, otherwise the duration is 0, it will not play the animated transform property translate (x, y)   define 2D conversion. Translate3d (x, Y, z)   defines 3D transformations.   TranslateX (x)   defines the conversion, just with the value of the x-axis.   Translatey (y)   Define the conversion, just use the y-axis value.   Translatez (z)   defines 3D conversions, just using the z-axis values.   Scale (x, y)   define 2D scaling transformations.   Scale3d (x, Y, z)   define 3D scaling transformations.   ScaleX (x)   defines the zoom transformation by setting the value of the x-axis.   ScaleY (y)   define the zoom transformation by setting the value of the y-axis.   Scalez (z)   defines the 3D scaling transformation by setting the value of the z-axis.   Rotate (angle)   defines 2D rotation, which specifies the angle in the parameter.   Rotate3d (x,y,z,angle)   define 3D rotation.   Rotatex (angle)   defines 3D rotation along the X-axis.   Rotatey (angle)   defines 3D rotation along the Y-axis.   Rotatez (angle)   defines 3D rotation along the Z-axis.   Skew (X-angle,y-angle)   defines a 2D tilt transition along the x and Y axes.   SKEWX (angle)   defines a 2D tilt transition along the X-axis.   Skewy (angle)   defines a 2D tilt transition along the Y-axis.   Perspective (N)   defines a Perspective view for 3D transformation elements. Use the animation effect 1, set a class name Music-play bind Musicplay set duration 2 seconds.

. music-play {

-webkit-animation:musicplay infinite 2s linear;

Animation:musicplay infinite 2s linear;

}。

2, set the animation of Musicplay.

@-webkit-keyframes Musicplay {

0%{opacity:0;-webkit-transform:scale (0.7) rotate (30deg) translate (0);}

15%{-webkit-transform:scale (0.8) Rotate (0deg) translate ( -0.2REM,-0.2REM);}

30%{opacity:0.8;-webkit-transform:scale (0.9) rotate ( -30deg) translate ( -0.1rem, -0.4rem);}

50%{-webkit-transform:rotate (0deg) Translate ( -0.4rem, -0.6rem);}

75%{opacity:0.2;-webkit-transform:rotate (30deg) Translate ( -0.9rem, -0.7rem);}

100%{opacity:0;-webkit-transform:rotate (0deg) Translate ( -0.6rem, -1.1rem);}

}

@keyframes Musicplay {

0%{opacity:0; Transform:scale (0.7) rotate (30deg) translate (0);}

15%{Transform:scale (0.8) Rotate (0deg) translate ( -0.2REM,-0.2REM);}

30%{opacity:0.8; Transform:scale (0.9) rotate ( -30deg) translate ( -0.1rem, -0.4rem);}

50%{transform:rotate (0deg) Translate ( -0.4rem, -0.6rem);}

75%{opacity:0.2; transform:rotate (30deg) Translate ( -0.9rem, -0.7rem);}

100%{opacity:0; transform:rotate (0deg) Translate ( -0.6rem, -1.1rem);}

}

3. Call the animation effect.

<div calss= "Music-play" ><div>;

Then the DIV has music-play so the animated effect is set.

Summarize

Can see oneself still have a lot of insufficient, for code of not attribute, PS software uses unfamiliar. Make it less productive.

Give each part a good name and a point.

Reduce duplication of code by reducing the amount of code.

The animation effect should be more practice to see.

2015-4-20 BAV Promotion page changes before and after the comparison-secure online shopping