1、移动Web

一、字体图标

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

1、字体图标：

字体图标展示的是图标，本质是字体。
处理简单的、颜色单一的图片

2、字体图标的优点：

（1）灵活性：灵活地修改样式，例如：尺寸、颜色等
（2）轻量级：体积小、渲染快、降低服务器请求次数
（3）兼容性：几乎兼容所有主流浏览器
（4）使用方便：
<1>下载字体包
<2> 使用字体图标

3、图标库

  • Iconfont：https://www.iconfont.cn/
    下载字体包：
    登录（新浪微博） → 选择图标库 → 选择图标，加入购物车 → 购物车 → 添加至项目 → 下载至本地


<!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>
    <!-- 1、引入样式表；2、调用类名 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">
    <style>
        .iconfont{
            font-size: 200px;
        }

    </style>
</head>
<body>
    <!-- iconfont 是固定 -->
    <span class="iconfont icon-xihuan"></span>
</body>
</html>

运行结果：

4、案例：淘宝购物车

（1）布局标签：li > a>span * 3
（2）字体图标
<1>引入字体图标样式表

<2>购物车和箭头span调用字体图标类名
<!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>
    <link rel="stylesheet" href="../../移动web-资料/day01/01-案例/01-字体图标/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;
        }

        .icon-cart-Empty-fill{
            color: orange;
        }
    </style>
</head>
<body>
    <div class="nav">
        <ul>
            <li>
                <a href="#">
                    <span class="iconfont icon-cart-Empty-fill"></span>
                    <span>购物车</span>
                    <span class="iconfont arrow-down icon-arrow-down"></span>
                </a>
            </li>
        </ul>
    </div>
</body>
</html>

5、上传矢量图：

（1）思考：如果图标库没有项目所需的图标怎么办？
答：IconFont网站上传矢量图生成字体图标
1、与设计师沟通，得到SVG矢量图
2、 IconFont网站上传图标，下载使用
（2）上传矢量图：
上传 → 上传SVG图标
浏览本地图标 → 去除颜色提交
加入购物车 → 下载使用


二、平面转换

目标：使用transform属性实现元素的位移、旋转、缩放等效果

1、平面转换

（1）平面转换概念
<1>改变盒子在平面内的形态（位移、旋转、缩放）
<2>2D转换
(2)平面转换属性:transform

2.1 位移

（1）语法
transform: translate(水平移动距离, 垂直移动距离);
（2）取值（正负均可）
a.像素单位数值
b.百分比（参照物为盒子自身尺寸）
注意：X轴正向为右，Y轴正向为下
(3)技巧
a.translate()如果只给出一个值, 表示x轴方向移动距离
b.单独设置某个方向的移动距离：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>位移-基本使用</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>

运行结果：

2.2 位移-绝对定位居中

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

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

2.3 案例

<!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-image: url(../../移动web-资料/day01/01-案例/02-平面转换/03-案例-双开门/images/bg.jpg);

            /* 超出父级范围的隐藏 */
            overflow: hidden;
        }

        /* 左右相同的样式 */
        /* 伪元素：行内显示模式 */
        .box::before,
        .box::after{
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(../../移动web-资料/day01/01-案例/02-平面转换/03-案例-双开门/images/fm.jpg);
            transition: all, 1s;
        }
        .box::after{
            background-position: right 0;
        }

        /* 鼠标移入box，before向左移动 */
        .box:hover::before{
            transform: translate(-100%);
        }
        /* 鼠标移入box，after向右移动 */
        .box:hover::after{
            transform: translate(100%);
        }

    </style>
</head>
<body>
    <div class="box">
        <!-- 手写2个div;用css伪元素 before after -->
    </div>
</body>
</html>

运行结果：

3.1 旋转

目标：使用rotate实现元素旋转效果
（1）语法
transform: rotate(角度);
(必须配合着过渡)
（2）注意：角度单位是deg
（3）技巧：取值正负均可
a.取值为正, 则顺时针旋转
b.取值为负, 则逆时针旋转

    <style>
        img{
            width: 250px;
            transition: all 2s;
        }
        img:hover{
            /* transform: rotate(360deg); */
            transform: rotate(-360deg);

        }

    </style>
</head>
<body>
    <img src="../../移动web-资料/day01/01-案例/02-平面转换/images/rotate.png" alt="">
</body>

3.2 转换原点

目标：使用transform-origin属性改变转换原点
（1）语法
a.默认圆点是盒子中心点
b.transform-origin: 原点水平位置 原点垂直位置;
(2)取值
<1>方位名词（left、top、right、bottom、center）
<2>像素单位数值
<3>百分比（参照盒子自身尺寸计算）

3.3 多重转换

目标：使用transform复合属性实现多形态转换
多重转换：一个盒子有多重形态的转换

<!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: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        img{
            width: 200px;
            transition: all 8s;
        }
        .box:hover img{
            transform: translate(600px) rotate(720deg);
            
            /* 不行：旋转会改变坐标轴向，先旋转改变了坐标轴向，位移方向会受影响
            ---多重转换如果涉及到旋转往最后书写 */
            /* transform:rotate(720deg) translate(600px) ; */
           
           /* 不行，因为层叠性，最后只会实现最后一行旋转的代码 */
            /* transform: translate(600px);
            transform: rotate(720deg); */
        }
    </style>
</head>
<body>
    <div class="box">
        <img src="../../移动web-资料/day01/01-案例/02-平面转换/images/tyre1.png" alt="">
    </div>
</body>
</html>

4.1 缩放

目标：使用scale改变元素的尺寸
（1）思考: 改变元素的width或height属性能实现吗？
不能
（2）语法
transform: scale(x轴缩放倍数, y轴缩放倍数);
（3）技巧
a.一般情况下, 只为scale设置一个值, 表示x轴和y轴等比例缩放
b.transform: scale(缩放倍数);
c.scale值大于1表示放大, scale值小于1表示缩小

<style>
        .box {
            width: 300px;
            height: 210px;
            margin: 100px auto;
            background-color: pink;
            
        }

        .box img {
            width: 100%;
            transition: all 0.5s;
        }
        
        .box:hover img {
            /* 宽高实现不了效果 */
            /* width: 400px;
            height: 300px; */

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

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

4.2 案例

播放按钮
Ø 布局
Ø ::after
Ø 样式
Ø 居中
Ø 效果
Ø 缩放
Ø 透明度（opacity）

<!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;
        }

        li{
            list-style: none;
        }

        img{
            width: 100%;
        }

        .box{
            width: 249px;
            height: 210px;
            margin: 50px auto;
            /* 超出父级的隐藏 */
            overflow: hidden;
        }
        .box p{
            color: #3b3b3b;
            padding: 10px 10px 0 10px;
        }
        .box .pic{
            position: relative;
        }
        /* 
        1.播放按钮的盒子，压在img标签的上面（定位）
        2.hover 的时候缩放效果
           默认：看不见；特别大
           hover：看得见；小的：58
        */
        .box .pic::after{
            position: absolute;
            left: 50%;
            top: 50%;
            /* margin-left: -29px;
            margin-top: -29px; */
            content: '';
            width: 58px;
            height: 58px;
            background-image: url(./images/play.png);

            /* 复合元素一起写，分开写影响效果 */
            transform:translate(-50%, -50%) scale(5);
            opacity: 0;

            /* 过渡 */
            transition: all, 0.5s;
        }
        /* 鼠标移入li，让after 有变化 */
        .box li:hover .pic::after{
            opacity: 1;
            transform:translate(-50%, -50%) scale(1);
        }
    </style>
</head>
<body>
    <div class="box">
        <ul>
            <li>
                <div class="pic"><img src="./images/party.jpeg" alt="">
                    <!-- 伪元素添加播放按钮 -->
                </div>
                <p>【和平精英】“初火”音乐概念片：四圣觉醒......</p>
            </li>
        </ul>
    </div>
</body>
</html>

运行结果：

三、渐变

目标：使用background-image属性实现渐变背景效果

1、渐变背景

渐变是多个颜色逐渐变化的视觉效果
一般用于设置盒子的背景


四、综合案例

略

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 204,590评论 6赞 478
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 86,808评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 151,151评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,779评论 1赞 277
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,773评论 5赞 367
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,656评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 38,022评论 3赞 398
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,678评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 41,038评论 1赞 299
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,659评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,756评论 1赞 330
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,411评论 4赞 321
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,005评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,973评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,203评论 1赞 260
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 45,053评论 2赞 350
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,495评论 2赞 343

推荐阅读更多精彩内容