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

最新推荐文章于 2024-11-12 22:33:37 发布

mc.byte

最新推荐文章于 2024-11-12 22:33:37 发布

阅读量109

点赞数

分类专栏： web前端 # 笔记文章标签：平面 css 前端 css3

本文链接：https://blog.csdn.net/m0_58044090/article/details/126216992

版权

web前端同时被 2 个专栏收录

31 篇文章 0 订阅

订阅专栏

笔记

30 篇文章 0 订阅

订阅专栏

一：国内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));