icono de fuente

Objetivo: Usar técnicas de íconos de fuentes para lograr efectos de íconos concisos en páginas web

inserte la descripción de la imagen aquí
El ícono de fuente muestra que el ícono es esencialmente una fuente y maneja imágenes simples de un solo
color.Objetivo: Usar técnicas de íconos de fuentes para lograr efectos de íconos concisos en páginas
web.Efectos breves
de íconosVentajas de los íconos de fuentes:
Ø Flexibilidad: Flexibilidad para modificar estilos, por ejemplo: tamaño, color, etc.
Ø Ligero: tamaño pequeño, renderizado rápido, reduciendo el número de solicitudes del servidor
Ø Compatibilidad: Compatible con casi todos los principales navegadores
Ø Fácil de usar:

Descarga el paquete de fuentes
Utilice iconos de fuentes
Flexibilidad: modifique estilos de forma flexible, como el tamaño, el color, etc.
Biblioteca de iconos
l Iconfont: https://www.iconfont.cn/
Iconfont
Descargue el paquete de fuentes:
l Inicie sesión (Sina Weibo) → seleccione la biblioteca de iconos → seleccione Ícono, agregue al carrito de compras → carrito de compras → agregue al proyecto → descargue a local

Usar ícono de fuente - Codificación Unicode:
l Importar hoja de estilo: iconfont.css
l Copie y pegue el código Unicode correspondiente al ícono
l Establezca la fuente del texto
y Importe la hoja de estilo iconfont.cssCopy Pegue el código Unicode correspondiente al ícono y establezca el

enlace de fuente de texto rel="hoja de estilo" href="./iconfont.css"
span class="iconfont icon-xxx"
Caso: Taobao carrito de compras
l etiqueta de diseño
Ø li > intervalo * 3 l fuente Icono
Ø Introducir icono de fuente hoja de estilo
Ø Carrito de la compra y flecha llamada de intervalo icono de fuente nombre de clase

<!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>字体图标基本使用-类名</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        /* .iconfont {
    
    
            font-size: 60px;
        } */

        i {
    
    
            font-size: 60px;
        }
    </style>
</head>
<body>
    <i class="iconfont icon-favorites-fill"></i>
</body>
</html>

iconfont icono-favoritos-llenar

<!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>购物车</title>
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        * {
    
    
            margin: 0;
            padding: 0;
        }
        
        li {
    
    
            list-style: none;
        }
        
        a {
    
    
            color: #333;
            text-decoration: none;
        }
        
        .nav {
    
    
            width: 200px;
            margin: 50px auto;
            font-size: 12px;
        }
                
        .orange {
    
    
            color: #f40;
        }
    </style>
</head>

<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill orange"></span>
                    <span>购物车</span>
                    <span class="iconfont icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>

</html>

.nav{width:200px;margin:50px auto;font-size:12px;}
Subir gráficos vectoriales:
l Pensando: ¿Qué sucede si la biblioteca de íconos no tiene los íconos requeridos por el proyecto?
l Respuesta: Cargue gráficos vectoriales en el sitio web de IconFont para generar iconos de fuentes
Ø 1. Comuníquese con los diseñadores para obtener gráficos vectoriales SVG
Ø 2. Cargue iconos en el sitio web de IconFont, descargue y use
Cargar gráficos vectoriales:
l Cargar → Cargar iconos SVG
l Explorar iconos locales → eliminar colores Enviar
l Agregar al carrito → Descargar y usar
inserte la descripción de la imagen aquí

transformación de plano

Objetivo: utilizar el atributo de transformación para realizar el desplazamiento, la rotación, el escalado y otros efectos del elemento.l Transformación del
plano
Ø Cambiar la forma de la caja en el plano (desplazamiento, rotación, escalado)
Ø Transformación 2D
l Atributo de transformación del plano
Ø transformar
cambia la forma del cuadro en el plano, Desplazamiento, rotación, escalado
Rotación 2D
inserte la descripción de la imagen aquí
l Sintaxis
Ø transformar: traducir (distancia de movimiento horizontal, distancia de movimiento vertical);
l Valor (tanto positivo como negativo)
Ø Valor de unidad de píxel
Ø Porcentaje (la referencia el objeto es del tamaño de la caja en sí)
Nota: Eje X La dirección positiva es la derecha, y la dirección positiva del eje Y es la inferior
l Habilidades
Ø Si solo se da un valor en translate(), significa la distancia de movimiento en la dirección del eje X.
Ø Establezca la distancia de movimiento en una cierta dirección por separado: translateX() & translateY()

transform:translate (horizontal, vertical)
valor de unidad de píxel, la referencia porcentual es el tamaño propio del cuadro
translateX(),translate(Y);
inserte la descripción de la imagen aquí

position:absolute;
letf:50%;
top:50%;
transform:translate(-50% , -50%);
el valor de desplazamiento es un valor porcentual, y la distancia de movimiento se calcula con referencia al tamaño de la propia caja

Objetivo: Usar traducir para lograr el efecto de desplazamiento de elementos

inserte la descripción de la imagen aquí
l La imagen de fondo del cuadro de la derecha
Ø posición de fondo: derecha;
l La imagen de fondo del cuadro de la derecha
Ø izquierda: mueve su propio ancho a la izquierda
Ø derecha: mueve su propio ancho a la derecha

girar

Meta: Usar rotar para lograr el efecto de rotación de elementos
transformar: rotar (ángulo)
rotar (ángulo) grados
sintaxis
Ø transformar: rotar (ángulo);
Nota: la unidad de ángulo es grados
l Habilidad: el valor puede ser positivo o negativo
Ø Si el el valor es positivo, luego la rotación en el sentido de las agujas del reloj
Ø toma un valor negativo, luego la rotación en el sentido contrario a las agujas del reloj

Transformar origen

Objetivo: usar la propiedad transform-origin para cambiar el origen de la transformación
transform-origin
cambiar el punto lejano de la transformación
l Sintaxis
Ø El punto predeterminado es el punto central del cuadro
Ø transform-origin: la posición horizontal del origen, la posición vertical de el origen; la posición horizontal del
punto lejano del origen de la transformación, la posición vertical del origen
l Valor
Ø Sustantivo de orientación (izquierda, arriba, derecha, abajo, centro) Ø Valor de unidad de píxel
Ø Porcentaje (calculado con referencia al tamaño de la caja en sí)

<!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>位移-基本使用</title>
    <style>
        .father {
    
    
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
    
    
            width: 200px;
            height: 100px;
            background-color: pink;
            transition: all 0.5s;
        }
    
        /* 鼠标移入到父盒子，son改变位置 */
        .father:hover .son {
    
    
            /* transform: translate(100px, 50px); */

            /* 百分比: 盒子自身尺寸的百分比 */
            /* transform: translate(100%, 50%); */

            /* transform: translate(-100%, 50%); */

            /* 只给出一个值表示x轴移动距离 */
            /* transform: translate(100px); */

            transform: translateY(100px);
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>

</html>

<!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>绝对定位元素居中效果</title>
    <style>
        .father {
    
    
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
    
    
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -100px;
            margin-top: -50px; */

            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

<!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>
        * {
    
    
            margin: 0;
            padding: 0;
        }
        
        .box {
    
    
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            overflow: hidden;
        }
        
        .box::before,
        .box::after {
    
    
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s;
        }

        .box::after {
    
    
            background-position: right 0;
        }

        /* 鼠标移入的时候的位置改变的效果 */
        .box:hover::before {
    
    
            transform: translate(-100%);
        }

        .box:hover::after {
    
    
            transform: translateX(100%);
        }
    </style>
</head>

<body>
    <div class="box">

    </div>
</body>

</html>

múltiples conversiones

Objetivo: Usar el atributo compuesto de transformación para realizar una transformación polimórfica
inserte la descripción de la imagen aquí
l Principio de transformación múltiple
Ø La rotación cambiará el eje de coordenadas de los elementos de la página web
Ø Escriba primero la rotación, luego el eje del efecto de transformación posterior se basa en el eje después de la rotación, que afectará el resultado de la transformación
La rotación cambiará el eje de coordenadas del elemento de la página web Escriba primero la rotación y el efecto de conversión posterior se basará en el eje rotado. inserte la descripción de la imagen aquí

<!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>旋转效果</title>
    <style>
        img {
    
    
            width: 250px;
            transition: all 2s;
        }
        
        img:hover {
    
    
            /* 顺 */
            transform: rotate(360deg);

            /* 逆 */
            /* transform: rotate(-360deg); */
        }

        
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

<!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>转换原点</title>
    <style>
        img {
    
    
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        
        img:hover {
    
    
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

zoom

Objetivo: Usar la escala para cambiar el tamaño de un elemento
l Reflexión: ¿Es posible cambiar el ancho o el alto de un elemento?
l Sintaxis
Ø transformada: escala (factor de escala del eje x, factor de escala del eje y);
l Habilidades
Ø En general, solo establezca un valor para la escala, lo que significa que el eje x y el eje y se escalan proporcionalmente
Ø transformada: escala (factor de escala);
Ø valor de escala superior a 1 significa acercar, valor de escala menor a 1 significa alejar
l Botón de reproducción Ø
disposición
Ø ::después
Ø estilo
Ø centro Ø efecto
Ø zoom

fondo degradado

Objetivo: Usar la propiedad de imagen de fondo para lograr un efecto de fondo degradado. El degradado
es un efecto visual de cambiar gradualmente varios colores.
Generalmente se usa para configurar el fondo de un cuadro
. El degradado es un efecto visual de cambiar gradualmente varios colores, y el degradado es un efecto visual. efecto de cambiar gradualmente varios colores
background-image:linear-gradient :linear-gradientlinear-gradient
inserte la descripción de la imagen aquí

<!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>多重转换</title>
    <style>
        .box {
    
    
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
    
    
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
    
    
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);

            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(360deg) translate(600px); */
            
            /* 层叠性 */
            /* transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/tyre1.png" alt="">
    </div>
</body>

</html>

。box: hover imgtransform: traducir (600 px) rotar (360 grados);

<!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>缩放效果</title>
    <style>
        .box {
    
    
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
    
    
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
    
    
            /* width: 150%; */

            transform: scale(1.2);
            transform: scale(0.8);
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

</html>

margen: 100px automático;
color de fondo: rosa;
.box img{ancho:100%;transición:todos 0.5s;}
.box:hover img{transformar:escala(.12);
transorem:escala(0.8);

Mover icono de fuente Web(1), transformación de plano, rotación, origen de transformación