当前位置: 首页 > 工具软件 > favorites-web > 使用案例 >

移动web第一天(字体图标下载使用+平面转换+渐变)

薛泰
2023-12-01

一:国内iconfont字体图标下载使用:

 1、下载

    注册账号 => 登录 => 把需要的图标加入购物车 => 下载代码/添加到项目,再去下载

2、使用

    2-1、引入 iconfont.css

    2-2、调用类名 => 公共基础类名(iconfont)、 自己的特定类名(icon-xxx)

<style>
    <!-- 第一步:先引入下载好字体图标库的 css 文件 -->
    <link rel="stylesheet" href="./iconfont/iconfont.css">

    <!-- 第三步:修改字体文件,调用其特定类名 -->
    .icon-favorites-fill{
          color:red;
    }
</style>

    <!-- 第二步:调用一下对应图标的类名(公共类名 iconfont , 特定类名直接去复制) -->
    <span class="iconfont icon-favorites-fill"></span>

3、上传

     SVG => 矢量图形 => 放大缩小都不会让图像变形失真

二、平面转换(2D)

 属性名称 : transform

 属性值 

1、位移: transform: translate(水平移动距离, 垂直移动距离);

取值(正负均可)

        ➢ 像素单位数值

        ➢ 百分比(参照物为盒子自身尺寸) 注意:X轴正向为右,Y轴正向为下

<style>
.father:hover>.son {
            /* 1、px */
            transform: translate(50px, 50px);
            /* 2、百分比(相对于自身的宽高尺寸) */
            transform: translate(100%, 100%);
            transform: translate(-100%, -100%);

            /* 沿着x轴位移 */
            transform: translateX(100px);

            /* 沿着Y轴位移 */
            transform: translateY(100px);

            /* 当给一个值的时候, 沿着x轴位移 */
            transform: translate(100%);
        }
</style>
<body>
    <!-- 需求:鼠标移入到父盒子.father时,子盒子.son改变自己的位置  -->
    <div class="father">
        <div class="son"></div>
    </div>
</body>

2、旋转 transform:rotate(deg);

角度取值为正,顺时针旋转

 角度取值为负,逆时针旋转

        

<style>
        img {
            width: 250px;
            transition: all 2s;
        }

        /* 平面旋转属性:transform:rotate(度数) */
        /*  
            角度取值为正,顺时针旋转
            角度取值为负,逆时针旋转
        */
        img:hover {
            transform: rotate(360deg);
        }
    </style>

<body>
    <img src="./images/rotate.png" alt="">
</body>

3、转换原点:transform-origin:x轴的位置 y轴的位置;

默认的原点在元素的中点

transform-origin:0 0;

transform-origin:center bottom;

<style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            /* 修改元素的转换原点 */
            /* 1-方位名词 */
            transform-origin: right bottom;
            transform-origin: center;

            /* 2-像素值px */
            transform-origin: 100px 100px;

            /* 3-百分比% */
            transform-origin: 50% 50%;

            /* 0,0 => 左上角 */
            transform-origin: 0 0;
        }

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

<body>
    <img src="./images/rotate.png" alt="">
</body>

4、缩放  transform:scale(倍数);

倍数:0~1 缩小;   >1 放大;     =1 不变

                   

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

        .box img {
            width: 100%;
        }
        .box:hover img{
            /* 设置宽高虽然可以放大,但以左上角为定点,效果很不好用,因此放大缩小一般用trasnsform:scale(倍数) */
            /* width: 150%; */
            transform: scale(1.5);

            /*倍数大于1为放大,0~1为缩小 0完全缩小不见 */
            transform: scale(0.5);
        }
    </style>

<body>
    <!-- 需求: 鼠标移入.box盒子, 让img图片放大或者缩小 -->
    <div class="box">
        <img src="./images/product.jpeg" alt="">
    </div>
</body>

5、倾斜  transform:skew(deg);             

            /* 倾斜-度数正值为向左倾斜 */

            transform: skew(45deg);

            /* 倾斜-度数负直为向右倾斜 */

            transform: skew(-30deg);

三:渐变 

属性:background-image      属性值:liner-gradient

渐变的默认方向: 从上到下

background-image: linear-gradient(red, blue);

修改渐变的方向 : to 方位名词

   background-image: linear-gradient(to right, red, blue);

  透明 => 半透明         

/* rgba(0,0,0,0) / transparent => 完全透明 */
   background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .5));
   background-image: linear-gradient(transparent, rgba(0, 0, 0, .5)); 

     

 类似资料: