[移动web01]

1. 字体图标

  • 使用场景
    网页中需要用到的小图标可以使用字体图标
  • 实质: 展示样式为图标 本质还是文字 可以按照文字的方式处理
  • 特点:
    1. 轻量级: 渲染快 减少请求次数
    2. 灵活性: 可以根据需求方便的转换突变样式 大小
    3. 兼容性: 几乎可以兼容所有浏览器
    放大不会失真

使用方法

首先访问iconfont 阿里巴巴矢量图标库, 选取图标 加入到项目中 将图标下载到本地 解压后iconfont文件添加到本地项目

    1. Unicode码方式引入图标
      a. 通过link标签引入iconfont样式表
      b. 使用i标签包裹需要图标对应的unicode码
      c. 在i标签对应的css样式中添加css代码:
css:
 <link rel="stylesheet" href="./iconfont/iconfont.css" />
  i{
     font-family:iconfont;
   } 
html
  <i>&#xe7ce;</i>
    1. 类名方式引入字体图标
      a. 通过link标签引入iconfont样式表
      b. 给引用图标的i标签添加 class='iconfont' 设置字体样式 根据引用图标的样式 添加对应的图标类名 类名可以通过iconfont.css文件查看
  • 注意:
    如果需要更改样式 建议添加类名修改
    在原来的类名上直接修改样式会层叠之前的样式
css:
   <link rel="stylesheet" href="./iconfont/iconfont.css" />
   
html:    
     <i class='iconfont  iconfont-arrow-right'></i>
    1. 伪元素方式使用字体图标
      字体unicode码可在iconfont.css文件查看
css: <link rel="stylesheet" href="./iconfont/iconfont.css" />
  span::before{
        content:'\ed40';
        font-family:iconfont;
  }
html:
  <span></span>
  • 4 在线引入图标
    link标签引入网址:操作同上
  • 5 上传图标:
    打开项目 上传svg文件 添加到项目 下载即可

2.平面转换 transform:

  • 平面内元素平移 旋转 缩放
  • 2D效果


    网页坐标系

2.1 transform: translate:(x,y)平移

语法:

  • transform:translateX() translateY();
  • translateX:水平方向上的偏移 正值 向右
  • translateY:垂直方向上的偏移 正值 向下
    translate(value) 当value值只有一个时 与translateX一样的效果
  • 单位:
    1 数值+px
    2 百分比 百分比的值是根据⭐自身元素大小⭐计算出来的
  • 特点:
    1⭐不脱标⭐ 元素的移动是根据自身在标准流的位置进行偏移的 离开后原来的位置仍然保留
    2 ⭐对行内元素⭐不起作用
    3 translate移动的元素 ⭐不会影响其他元素的位置⭐

垂直水平居中

 .fa{
        position:relation;
  }
 div{ 
    position:absolute;
    top:50%;
    left:50%;
    width:200px;
    hieght:200px;
    transform:translate(-50%,-50%);
}

2.2 rotate(x,y)旋转: 默认旋转的原点是盒子的中心点

  • x为正值 顺时针旋转
  • x值为负值 逆时针旋转

可以搭配 transition属性使用 谁需要过渡加在谁身上 不要要在链接伪类上: :hover 当鼠标悬停有过渡效果 离开时没有过渡效果

2.3 transform-origin:(x,y)可以修改元素的旋转原点

  • 默认旋转的原点是盒子的中心点
    位移偏移从左上角顶点计算
    单位: 1 方位名词 2 数值+px 3 百分比

2.4 transform:scale(x,y)缩放

  • 语法: 使用scale改变元素的尺寸
  • 单位: 数值 >1 放大
    < 1 缩小
    scale(n)表示等比例缩放n倍
  • 注意:
    (1) 当这三个属性同时出现时使用时 注意每次改变只写一个属性其他的属性 可能会被默认值覆盖掉
    (2) 要先写平移 再写其他两个属性 旋转后坐标轴方向会变

3. 渐变

3.1 background-image:linear-gradient(方向,颜色参数1 ,arg2,arg3,...);
3.2 background-image:radical-gradient;径向渐变

CSS 径向渐变 (w3school.com.cn)

颜色渐变网站 https://uigradients.com/#Harvey

  • 默认渐变方向是从上到下 也可以自己设置渐变方向
  • 省略起点
    1. 方位名词 :to 终点 to left / right /右下 right bottom
    2. 角度 deg 0 向上 90 向右 180 向下 -90 向左
   .grad {
         background-image: linear-gradient(to right, red , yellow);
    }

    #grad {
      background-image: linear-gradient(to bottom right, red, yellow);
    }

https://www.w3school.com.cn/css/css3_gradients_radial.asp

注意点:

** 显示隐藏是不可以参与过渡的 所以过渡效果想要出现透明的情况一般使用opacity属性**
diaplay:none;
visibility:hidden;
opacity:0;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,634评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,951评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,427评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,770评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,835评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,799评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,768评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,544评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,979评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,271评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,427评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,121评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,756评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,375评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,579评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,410评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,315评论 2 352

推荐阅读更多精彩内容