移动web总结

wdb一

一、字体图标 1、Ø字体图标展示的是图标，本质是字体。

Ø处理简单的、颜色单一的图片

2、字体图标的优点： Ø灵活性：灵活地修改样式，例如：尺寸、颜色等

Ø轻量级：体积小、渲染快、降低服务器请求次数

Ø兼容性：几乎兼容所有主流浏览器

Ø使用方便：1.下载字体包

2.使用字体图标

3、图标库：lIconfont：www.iconfont.cn/

二、平面转换概念

目标：使用transform属性实现元素的位移、旋转、缩放等效果 1.Ø改变盒子在平面内的形态（位移、旋转、缩放）

Ø2D转换

l平面转换属性值 Øtranslate()如果只给出一个值, 表示x轴方向移动距离

Ø单独设置某个方向的移动距离：translateX(px) & translateY(px)； 正值x右 y值下

2.位移-绝对定位居中

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

小目标 使用transform实现位移效果 利用2个伪元素设置好左右门 * { margin: 0; padding: 0; }

  .box {
    position: relative;
    width: 1366px;
    height: 600px;
    background: url("./images/bg.jpg");
    margin: 50px auto;
    overflow: hidden;
  }

  /* 利用::before和::after创建左右门 */
  .box::before,
  .box::after {
    position: absolute;
    top: 0;
    content: "";
    width: 50%;
    height: 100%;
    background: url(./images/fm.jpg);
    transition: 1s;
  }
  .box::after {
    right: 0;
    background-position: right;
  }

  /* 鼠标悬停box让左右门移动 */
  .box:hover::before {
    transform: translate(-100%);
  }
  .box:hover::after {
    transform: translate(100%);
  }
</style>

三、旋转、转换旋转原点、多重转换、缩放

1、旋转 transform:rotate(30deg),意思是转换，旋转。deg是角度单位，正顺时针旋转负逆时针

2、改变旋转原点：transform-origin(方位名词)

Ø 默认圆点是盒子中心点

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

取值

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

Ø 像素单位数值

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

3、多重转换transform:translate() rotate()； 注意点：位移属性必须设置在前面

4、缩放（scale） Ø transform: scale(x轴缩放倍数, y轴缩放倍数);

l 技巧

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

Ø transform: scale(缩放倍数);

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

小目标：播放按钮（伪元素、缩放、居中、hover也得设置居中效果）

布局

Ø ::after

Ø 样式

Ø 居中

Ø 效果

Ø 缩放

Ø 透明度（opacity）

代码： .box { width: 250px; height: 200px; border: 1px solid #000; margin: 100px; line-height: 1.5; /* 溢出隐藏 */ overflow: hidden; }

  .pic img {
    width: 100%;
  }

  /* 刚开始的状态，图片放大5倍且要透明 */
  .pic {
    /* 父相 */
    position: relative;
  }
  .pic::after {
    /* 子绝 */
    position: absolute;
    left: 50%;
    top: 50%;
    /* 缩放 */
    transform: translate(-50%, -50%) scale(5);
    content: '';
    width: 58px;
    height: 58px;
    background: url(./images/play.png);

    /* 元素的整体透明度 */
    opacity: 0;

    /* 添加过渡 */
    transition: 300ms;
  }

  /* 当鼠标移在box上时，要显示出正常倍数的播放图片 */
  .box:hover .pic::after {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    
    

五、渐变background-image:linear gradient (transparent),rgba(0,0,0,0.2 透明度)

生命的意义在于拼搏，世界本就是一个无限大的竞技场