Mobile web (Font Icon, plane conversion, color gradient)

Record what you have learned , Welcome comments and corrections .  

The fonts icon

Unionde Introduce methods :

1. introduce  iconfont.css  file
2. Prepare a label , Add a... To this label iconfont The name of the class
3. find  demo_index.html  Copy the corresponding font code Put it in the label
   
    

Font class Introduce methods :

1. introduce  iconfont.css  file
2. Add two class names to a tag  iconfont icon-xxx
   • iconfont  The purpose is to tell the text in this box is the Font Icon . Not ordinary words .
   • icon-daohangdizhi, Tell the box which small icon to use .
     
      

Pseudo elements display font icons

1. introduce  iconfont.css  file

2. Add... To the label Pseudo elements

3. from  demo_index.html  Find the... Corresponding to the text Icon Unicode value , Copy from e Letter start value , Put into pseudo element content Properties of the

4. Add... To the element  font-family  attribute The value is  iconfont.css  in font-family Value

   Be careful ： Use pseudo element Font Icon , Be sure to declare the font . font-family: "iconfont"

   
    

deformation transform

Displacement translate

translate:  You can let the box go along x Axis or y Axis to move .

    //x,y  Can be percentages and pixel values 
    transform: translate(x, y);  
    transform: translateX(x);  
    transform: translateY(y);    

1. When moving, you can write the percentage , If the percentage used , Moving is the box   Its own width
2. translate  When only one value is set , amount to  translateX

rotate rotate

• rotate:  Rotation can make the box rotate by an angle .

    // If it's a positive degree , It rotates clockwise 
    // If it's a negative degree , It's counter clockwise 
    transform: rotate(45deg);    // Be sure to write the unit   
  

• transform-origin:  Set the position of the center point of rotation

    transform-origin: right bottom;   
  

• Multi form deformation tips

     // If you need to move , You also need to rotate , Be sure to write mobile first , Post write rotation , css Attribute writing order affects code execution 
     transform: translate(-50%, -50%) rotate(360deg);  
  

  Be careful : Multiple values are preceded by Whitespace separated .  

The zoom scale

scale:  He uses the center point to zoom , Again, he won't affect other boxes .

    transform: scale(1.2);   

scale It affects the level of the element , Need to use z-index,z-index Can only act on positioning elements

The gradient linear-gradient

Basic grammar ：

    background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5))