移动端笔记

字体图标

1. 创建一个新的文件夹引入四个文件! 2.用link标签引入css文件

<link rel="stylesheet" href="./fonts/iconfont.css">

3.在说明书中找到对应的类名 !

4.内名引入即可

<span class="iconfont icon-icon-test1"></span>

伪类图标

1.映入link标签

2.在伪类里更改content内容 ,! 将e前的内容去掉换成\

3.更改字体系列 font-family: "iconfont";

代码如下

 <link rel="stylesheet" href="./fonts/iconfont.css">
  <style>

    .box::after {
      content: '\e633';
      font-family: "iconfont";
    }
  </style>
</head>

<body>
  <div class="box"></div>
</body>

平面转换

位移:transform:translate(x,y)

x指水平方向的距离 (x轴右边为正值)

	  y指垂直移动的距离(y轴下为正值)

translate如果只给一个值，表示向x轴方向移动.若要单独设置某个方向:translateX()&translateY()

单位可以是像素值,百分比( 使用百分比时,相对于自身移动)

 <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: rgb(128, 249, 255);
      transition: all 2s;
      transform-origin: right center;
    }

    .box:hover {
      transform: translateX(800px);
    }
  </style>


<body>
  <div class="box"></div>
</body>

位移和margin的区别

**margin:**盒子在使用margin进行移动时,它会挤走其他的盒子,影响其他盒子的布局

位移:在使用位移元素移动盒子时,则不会影响其他盒子的布局,和定位不一样的是,他仍然是标准流

旋转:transform:roate(角度)

角度度数的单位是deg

一班transform:roate属性配合transition过渡使用看起来更加直观

属性值为正值则是顺时针旋转反之逆时针旋转

 <style>
    img {
      width: 100px;
      height: 100px;
      transform-origin: 50% 30%;
      transition: all 5s;
    }


    img:hover {
      transform: rotate(-900000deg);
    }
  </style>

<body>
  <img src="./images/p4-tx3.png" alt="">
</body

转换原点 transform-origin

改属性的默认原点是盒子的中心

语法:

transform-origin:原点的水平位置  原点的垂直位置;
<style>
.box {
      width: 100px;
      height: 100px;
      background-color: rgb(128, 249, 255);
      transition: all 2s;
      transform-origin: right;
    }

    .box:hover {
      transform: rotate(360deg);
    }

取值可以是方位名词, 像素单位值, 百分比

多重转换 transform的复合写法

transform: translate( ) rotate( );

上面语法可以理解为边移动边发生旋转 (先进行移动在进行旋转),若是调换位置,则变成先旋转在移动,由于移动是跟随xy轴平行或垂直移动,所以旋转时会改变XY轴的方向,做不规律的移动,所以不可以调换位置.

<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: 300px;
      border: 1px solid #000;
      margin: 100px auto;
    }

    img {
      transition: all 2s;
    }

    .box:hover img {
      transform: translate(500px) rotate(720deg);
    }
  </style>
</head>

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

属性值位置顺序不能改变否则达到的效果不一样

若想要两种效果都生效,则不可以单独写,因为有层叠性关系,下方的代码会层叠上面的代码

缩放 transform:scale(X,Y)

X是指X轴的缩放倍数, Y是指Y轴的缩放倍数,

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

当数字大于1表示放大,反之表示缩小

<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 {
        /*溢出隐藏*/
      overflow: hidden;
      width: 300px;
      height: 300px;
      border: 3px solid rgb(55, 212, 255);
      margin: 100px auto;
    }

    .box img {
      width: 100%;
      height: 100%;
      transition: all .3s;

    }

    .box:hover img {
         /*缩放*/
      transform: scale(1.2);

    }
  </style>
</head>

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

渐变

渐变就是多个颜色逐渐变换的视觉效果

语法:

<style>
.box {
      width: 300px;
      height: 300px;
      background-image: linear-gradient(rgba(0, 0, 0, .6)10%,
       red, green, blue, pink);
    }

移动端 平面转换{2D}