前端基础进阶1

前端基础进阶

字体图标 — Iconfond

  • 使用字体图标技巧实现网页中简洁的图标效果

  • 案例：淘宝购物车

    • 布局标签

      • li > span * 3

    • 字体图标

      • 引入字体图标样式表

      • 购物车和箭头span调用字体图标类名


    <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>

  • 如果图标库没有项目所需的图标怎么办？

    • IconFont网站上传矢量图生成字体图标

      • 1、与设计师沟通，得到SVG格式的矢量图

      • 2、IconFont网站上传图标，下载使用

平面转换概念

  • 平面转换

    • 改变盒子在平面内的形态（位移、旋转、缩放）

    • 2D转换

  • 平面转换属性

    • transform

位移

  • 语法

    • transform: translate(水平移动距离, 垂直移动距离);

  • 取值（正负均可）

    • 像素单位数值

    • 百分比（参照物为盒子自身尺寸）

    注意：X轴正向为右，Y轴正向为下

  • 技巧

    • translate()如果只给出一个值, 表示x轴方向移动距离

    • 单独设置某个方向的移动距离：translateX() & translateY()


    <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>

位移-绝对定位居中

  • 使用translate快速实现绝对定位的元素居中效果

  • 原理

    • 位移取值为百分比数值，参照盒子自身尺寸计算移动距离


    <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>

  • 案例：使用translate实现元素位移效果


    <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>Documenttitle>
        <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 {
                /* 此精灵图就是一左一右两个车，想让它从右边开始显示，垂直方向可不就是0，顶对齐 */
                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>

旋转

  • 使用rotate实现元素旋转效果

  • 语法

    • transform: rotate(角度);

      注意：角度单位是deg

  • 技巧：取值正负均可

    • 取值为正, 则顺时针旋转

    • 取值为负, 则逆时针旋转


    <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>

转换原点

  • 使用transform-origin属性改变转换原点

  • 语法：

    • 默认圆点是盒子中心点

    • transform-origin: 原点水平位置 原点垂直位置;

  • 取值：

    • 方位名词（left、top、right、bottom、center）

    • 像素单位数值

    • 百分比（参照盒子自身尺寸计算）


    <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>

多重转换

  • 使用transform复合属性实现多形态转换

  • 多重转换技巧

    • transform: translate( ) rotate( );

  • 多重转换原理

    • 旋转会改变网页元素的坐标轴向

    • 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果


    <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>

缩放

  • 思考: 改变元素的width或height属性能实现吗？能呀~

  • 语法：

    • transform: scale(x轴缩放倍数, y轴缩放倍数);

  • 技巧

    • 一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放

      • transform: scale(缩放倍数);

      • scale值大于1表示放大, scale值小于1表示缩小


    <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>

渐变背景

  • 使用background-image属性实现渐变背景效果

    • 渐变是多个颜色逐渐变化的视觉效果

    • 一般用于设置盒子的背景

    



    
    
    
    渐变背景

     

移动web

相关

移动web_平面转换

标签