font Icon font
Use Font Icon skills to achieve simple icon effect in web pages
Advantages of font icons:
1. Flexibility: modify the style flexibly, such as size, color, etc
2. Lightweight: small size, rendering blocks, reducing the number of server requests
3. Compatibility: it is compatible with almost all mainstream browsers
4. Easy to use
Icon Library:
Iconfont: https://www.iconfont.cn/ Alibaba font library (common)
Download font package (understand):
Log in (Sina Weibo) → select icon library → select icon, add to shopping cart → shopping cart → add to project → download to local
Font Icon: Step 1: copy the relevant files to the local directory and import the Font Icon css file. Step 2: use font icons for labels.
Font Icon - class name import
1. Use Font Icon - class name: import font icon style sheet
<!-- introduce css -->
<link rel="stylesheet" href="../fonts/iconfont.css">2. Call the class name corresponding to the icon. You must call two class names
· iconfont class: basic styles, including the use of fonts, etc
· icon XXX: the class name corresponding to the icon
<span class="iconfont icon-shouye"></span>
The font icon is used because the Alibaba font library is relatively stable. In many cases, we don't need to download relevant files locally, and we can directly import the online address.
<!-- Remember to add http: -->
<link rel="stylesheet" href="http://at.alicdn.com/t/font_3234864_h0da2uig6lr.css">Remember to add http:
Font Icon -unicode
Use font icons – unicode encoding:
HTML
<!-- Use a fixed class name -->
<span class="iconfont"></span>Call class name class= "iconfont"
Use font icons – pseudo elements: by viewing iconfont CSS file
i::after {
content: '\e606';
}Plane conversion
Objective: use the transform attribute to achieve the displacement, rotation, scaling and other effects of elements
Plane conversion:
1. Change the shape of the box in the plane (displacement, rotation, scaling)
2. 2D conversion
Plane conversion properties:
transform
Goal: use translate to achieve element displacement effect
Syntax:
Transform: translate (horizontal movement distance, vertical movement distance);
Value (both positive and negative)
1. Pixel unit value
2. Percentage (the reference is the size of the box itself)
Note: the positive direction of X axis is right, and the positive direction of Y axis is down
skill:
1. translate() if only one value is given, it indicates the moving distance in the x-axis direction
2. Set the moving distance in a certain direction separately: translatex() & translatey()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
background-color: pink;
/* Mobile box */
/* margin-left: 100px; */
/* Displacement translate(x,y) */
/* transform: translate(-100px, 0); */
/* When the y-axis is 0, it can be omitted */
/* transform: translate(100px); */
/* Displacement translate (horizontal direction, vertical direction) mark this */
transform: translate(100px, 100px);
/* Displacement translatex (horizontal direction) translatey (vertical direction)*/
transform: translateX(100px) translateY(100px);
/* Unidirectional writing */
/* transform: translateX(100px); */
}
</style>
</head>
<body>
<div></div>
</body>
</html>Displacement - absolute positioning center
Goal: use translate to quickly achieve the element centering effect of absolute positioning
Implementation method:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
background-color: pink;
position: relative;
}
.one {
width: 200px;
height: 200px;
background-color: aqua;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="box">
<div class="one"></div>
</div>
</body>
</html>Rotation effect
Goal: use rotate to achieve element rotation effect
Syntax:
Transform: rotate (angle);
Note: the angle unit is deg
Skill: take both positive and negative values
1. If the value is positive, rotate clockwise
2. If the value is negative, rotate counterclockwise
Case:
1. Rotating triangle and Avatar
Convert origin
Goal: use the transform origin attribute to change the origin of the transform
Syntax:
1. The default dot is the center point of the box
2. Transform origin: horizontal position of origin vertical position of origin;
Value:
1. Location nouns (left, top, right, bottom, center),
2. Pixel unit value
3. Percentage (calculated by referring to the size of the box itself)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 600px;
height: 600px;
border-radius: 50%;
background-color: pink;
transition: all 2s;
margin: 100px auto;
}
.box:hover {
transform: rotate(2turn)
}
.box img {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div class="box">
<img src="../images/p4-tx3.png" alt="">
</div>
</body>
</html>Multiple conversion
Goal: use transform composite attribute to realize multi-modal transformation
Multiple transformation skills: transform: translate() rotate()
Multiple conversion principle:
1. Rotation will change the coordinate axis of web page elements
2. If the rotation is written first, the axis of the subsequent conversion effect will be subject to the axis after the rotation, which will affect the conversion result
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.an-box {
position: relative;
width: 299px;
height: 299px;
margin: 50px auto 45px;
}
.an-box .png {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.inner-img0 {
width: 100%;
height: 100%;
background: url(../images/page2_img4.png) no-repeat;
transition: all 2s;
}
/* rotate */
.inner-img1 {
width: 226px;
height: 226px;
background: url(../images/page2_img3.png) no-repeat;
transition: all 2s;
}
.inner-img2 {
width: 185px;
height: 185px;
background: url(../images/page2_img2.png) no-repeat;
transition: all 2s;
}
/* rotate */
.inner-img3 {
width: 167px;
height: 167px;
background: url(../images/page2_img1.png) no-repeat;
transition: all 2s;
}
.an-box:hover .inner-img1 {
transform: translate(-50%, -50%) rotate(360deg);
}
.an-box:hover .inner-img2 {
transform: translate(-50%, -50%) rotate(360deg);
}
.an-box:hover .inner-img3 {
transform: translate(-50%, -50%) rotate(180deg);
}
</style>
</head>
<body>
<div class="an-box">
<div class="inner-img0 png"></div>
<div class="inner-img1 png"></div>
<div class="inner-img2 png"></div>
<div class="inner-img3 png"></div>
</div>
</body>
</html>zoom
Goal: use scale to change the size of elements
Think: can you change the width or height attribute of an element?
Syntax:
transform: scale(x-axis scale, y-axis scale);
skill:
1. Generally, only one value is set for scale, which means that the x-axis and y-axis are scaled equally,
2. Transform: scale;
3. A scale value greater than 1 indicates enlargement, and a scale value less than 1 indicates reduction
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.one {
width: 500px;
height: 400px;
margin: 200px auto;
overflow: hidden;
}
.one img {
width: 100%;
height: 100%;
transition: all 1s;
}
.one:hover img {
transform: scale(1.2);
}
</style>
</head>
<body>
<div class="one">
<img src="../images/hp.png" alt="">
</div>
</body>
</html>Gradient background color
Objective: use the background image attribute to achieve the gradient background effect
1. Gradient is the visual effect of multiple colors changing gradually
2. It is generally used to set the background of the box
/*The gradient is from top to bottom by default*/
background-image: linear-gradient(yellow, red, green);
/*Gradient left to right to attribute followed by orientation NOUN*/
The first parameter can set the direction
background-image: linear-gradient(to right, red, yellow, aqua);
/*Gradient can also be set by angle, and the unit is deg*/
background-image: linear-gradient(45deg, yellow, red, aqua, blue);
/*The most used gradient color changes from transparent color to translucent color, which is used more*/
background-image: linear-gradient(transparent, rgba(0, 0, 0, .5));