[CSS3]属性增强1

二十雨辰2025-05-17 18:15

字体图标

使用字体图标可以实现简洁的图标效果, 字体图标展示的是图标, 本质是字体, 适合简单, 颜色单一的图标

优势

  1. 灵活性: 灵活的修改样式, 比如尺寸, 颜色等
  2. 轻量级: 体积小, 渲染快, 降低服务器请求次数
  3. 兼容性: 几乎兼容所有主流浏览器
  4. 使用方便:
  • 下载字体包
  • 使用字体图标

使用字体图标:

下载字体包

  1. 阿里字体图标库: https://www.iconfont.cn/
  2. 我的账户 167****0001
  3. 建议使用官方的图标, 免费还好用, 效果复杂的图标还是使用精灵图实现
  1. 登录后→选择图标库, 点进去查看图标→选择合适的图标，加入购物车→点击购物车→把购物车添加至项目中 → 没有项目就建一个 →下载至本地

使用字体图标

  1. 打开demo_index.html页面, 里面会教我们如何集成到项目中

  1. 先把iconfont.css文件引入到项目

  2. 使用一个标签(一般是span或者i), 添加 iconfont 和 icon-xihuan 两个类名

    <!DOCTYPE html> <html lang="en"> <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>字体图标基本使用-类名</title> <link rel="stylesheet" href="./iconfont/iconfont.css"> <style> i { font-size: 60px; } </style> </head> <body> </body> </html>

  3. 可以通过css的方式, 调整字体图标的尺寸和颜色

扩展一下, 了解 iconfont 这个类名的作用

  1. iconfont类名 定义在 iconfont.css文件中
  1. iconfont类名最重要的事情是引用字体
  1. 字体定义中引用了字体文件

上传矢量图

如果图标库中找不到需要的图标. iconFont网站支持上传矢量图生成字体图标

  1. 与设计师沟通, 得到SVG矢量图
  2. 在iconFont网站上传图标, 然后下载使用
  1. 上传时建议去除颜色提交
  1. 提交完成后, 查看我的资源, 一样加入购物车→下载使用

平面转换

使用transform属性实现元素的位移、旋转、缩放等效果

平面转换需要拆开理解

  1. 平面就是2D的概念, 只关注元素的X轴和Y轴
  2. 转换就是改变元素在平面内的状态, 比如位置, 旋转, 缩放

位移效果

语法: transform: translate(水平移动距离,垂直移动距离)

取值说明:

  1. 正负均可
  2. 像素单位值
  3. 半分比值 (参考物是盒子自身尺寸)
  4. x轴正向为右, y轴正向为下

使用技巧:

  1. translate()如果只给一个值, 表示x轴方向的移动距离

  2. 可以单独设置某个方向的移动距离: translateX() & translateY()

    <!DOCTYPE html> <html lang="en"> <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>位移-基本使用</title> <style> .father { width: 500px; height: 300px; margin: 100px auto; border: 1px solid #000; }
    复制代码 
         .son {
         width: 200px;
         height: 100px;
         background-color: pink;
         transition: all 0.5s;
     }
 
     /* 鼠标移入到父盒子，son改变位置 */
     .father:hover .son {
         /* transform: translate(100px, 50px); */

         /* 百分比: 盒子自身尺寸的百分比 */
         /* transform: translate(100%, 50%); */
         /* transform: translate(-100%, 50%); */

         /* 只给出一个值表示x轴移动距离 */
         /* transform: translate(100px); */

          /* 单独设置一个方向的位移 */
         transform: translateY(100px);
     }
 </style>
    </head> <body>
    </body> </html>

示例: 使用translate快速实现绝对定位的元素居中效果

复制代码 
<!DOCTYPE html>
<html lang="en">
<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>绝对定位元素居中效果</title>
    <style>
        .father {
            position: relative;
            width: 500px;
            height: 300px;
            margin: 100px auto;
            border: 1px solid #000;
        }
        
        .son {
            position: absolute;
            left: 50%;
            top: 50%;
            // 使用margin实现元素居中
            /* margin-left: -100px;
            margin-top: -50px; */

             // 使用位移实现元素居中
            // 原理: 位移取值为百分比时, 参照的是盒子自身尺寸计算移动距离
            transform: translate(-50%, -50%);

            width: 203px;
            height: 100px;
            background-color: pink;          
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>
</body>
</html>

示例: 实现双开门效果

复制代码 
<!DOCTYPE html>
<html lang="en">

<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>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1366px;
            height: 600px;
            margin: 0 auto;
            background: url('./images/bg.jpg');
            overflow: hidden;
        }

         /** 左右伪元素相同的样式 */
        .box::before,
        .box::after {
            float: left;
            content: '';
            width: 50%;
            height: 600px;
            background-image: url(./images/fm.jpg);
            transition: all .5s;
        }

         // 单独控制右边伪元素的背景位置
        .box::after {
            background-position: right 0;
        }

        /* 鼠标移入的时候, 改变元素的位置 */
        .box:hover::before {
            transform: translate(-100%);
        }

        .box:hover::after {
            transform: translateX(100%);
        }
    </style>
</head>

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

</html>

旋转效果

使用rotate实现元素旋转效果

  1. 语法: transform: rotate(角度);
  2. 注意: 角度单位是deg
  3. 技巧: 取值正负均可

  • 取值为正，则顺时针旋转

  • 取值为负，则逆时针旋转

    <!DOCTYPE html> <html lang="en"> <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>旋转效果</title> <style> img { width: 250px; transition: all 2s; }
    复制代码 
          img:hover {
          /* 顺时针方向 */
          transform: rotate(360deg);

          /* 逆时针方向 */
          /* transform: rotate(-360deg); */
      }
  </style>
    </head> <body> </body> </html>

使用transform-origin属性改变转换原点

语法

  1. 默认原点是盒子中心点
  2. transform-origin: 原点水平位置 原点垂直位置;

取值

  1. 方位名词(left、top、right、bottom、center)
  2. 像素单位数值
  3. 百分比(参照盒子自身尺寸计算)

图例

  1. 时钟的秒针旋转, 原点是在bottom/center
  2. 风车的旋转原点是在 center/center, 也是默认的

示例

复制代码 
<!DOCTYPE html>
<html lang="en">
<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>转换原点</title>
    <style>
        img {
            width: 250px;
            border: 1px solid #000;
            transition: all 2s;
            transform-origin: right bottom;
            transform-origin: left bottom;
        }
        
        img:hover {
            transform: rotate(360deg);
        }
    </style>
</head>
<body>
    <img src="./images/rotate.png" alt="">
</body>
</html>

使用transform复合属性实现多形态转换

语法: transform: translate() rotate();

复制代码 
<!DOCTYPE html>
<html lang="en">

<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>多重转换</title>
    <style>
        .box {
            width: 800px;
            height: 200px;
            border: 1px solid #000;
        }
        
        img {
            width: 200px;
            transition: all 8s;
        }
        
        .box:hover img {
            /* 边走边转 */
            transform: translate(600px) rotate(360deg);

            /* 旋转可以改变坐标轴向 */
            /* transform: rotate(360deg) translate(600px); */
            
            /* 分开书写受层叠性影响 */
            /* transform: translate(600px);
            transform: rotate(360deg); */
        }
    </style>
</head>

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

</html>

多重转换原理

  1. 旋转会改变网页元素的坐标轴向
  2. 先写旋转，则后面的转换效果的轴向以旋转后的轴向为准，会影响转换结果

缩放效果

使用scale改变元素的尺寸

语法

  1. transform: scale(x轴缩放倍数, y轴缩放倍数)

技巧

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

  2. transform: scale(缩放倍数);

  3. scale值大于1表示放大, scale值小于1表示缩小

    <!DOCTYPE html> <html lang="en"> <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>缩放效果</title> <style> .box { width: 300px; height: 210px; margin: 100px auto; background-color: pink;
    复制代码 
         }

     .box img {
         width: 100%;
         transition: all 0.5s;
     }
     
     .box:hover img {
         /* width: 150%; */

       // 缩小
       /* transform: scale(0.8); */
       // 放大
       transform: scale(1.2);
     }
 </style>
    </head> <body>
    </body> </html>

倾斜效果

使用skew实现元素倾斜效果

  1. 语法: transform:skew();
  2. 取值: 角度度数, 单位deg

  1. 示例

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> div { margin: 100px auto; width: 100px; height: 200px; background-color: red; transform: all 0.5s; }
    复制代码 
     div:hover {
   transform: skew(30deg);
 }
    </style> </head> <body>
    </body> </html>

渐变背景

使用background-image属性实现渐变背景效果

语法:

取值:

  1. 渐变方向: 可选
  • to 方位名词
  • 角度度数
  1. 终点位置: 可选
  • 半分比

作用:

  1. 渐变是多个颜色逐渐变化的视觉效果

  2. 一般用于设置盒子的背景

    <!DOCTYPE html> <html lang="en"> <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></title> <style> .box { width: 300px; height: 200px; /* 纯色线性渐变 */ /* background-image: linear-gradient(pink, green); */
    复制代码 
             /* 透明渐变: 从透明到某色半透明 */
         /* background-image: linear-gradient(transparent, rgba(255, 0, 0, 0.6)); */

         /* 纯色线性渐变: 改变渐变方向 */
         /* background-image: linear-gradient(to right, green, hotpink); */

         /* 纯色线性渐变: 改变渐变角度 */
         /* background-image: linear-gradient(45deg, green, hotpink); */

         /* 纯色线性渐变: 改变颜色位置(比例)  */
         background-image: linear-gradient(green 70%, hotpink);
     }
 </style>
    </head> <body>
    复制代码 
     <div class="box"></div>
    </body> </html>

径向渐变: 给按钮添加高光效果

语法:

取值:

  • 半径可以是2条，则为椭圆
  • 圆心位置取值: 像素单位数值 / 百分比 / 方位名词

示例:

复制代码 
<!DOCTYPE html>
<html lang="en">

<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>渐变背景</title>
  <style>
    div {
      width: 100px;
      height: 100px;
      background-color: palegoldenrod;
      border-radius: 50%;
      /* 渐变半径, 渐变中心点, 指定颜色 */
      /* background-image: radial-gradient(50px at center center,
          red,
          pink); */

      /* 指定两条半径: 椭圆效果 */
      /* background-image: radial-gradient(50px 20px at center center,
          red,
          pink); */

      /* 改变圆心位置  */
      /* background-image: radial-gradient(50px at 50px 30px,
          red,
          pink); */

      /* 改变颜色终点: */
      background-image: radial-gradient(50px at center center,
          red,
          pink 90%);
    }

    button {
      width: 100px;
      height: 40px;
      color: #fff;
      background-color: green;
      border: none;

      /* 给按钮增加高光效果 */
      background-image: radial-gradient(30px at 30px 30px,
          rgba(255, 255, 255, 0.5), transparent);
    }
  </style>
</head>

<body>

  <div></div>

  <button>按钮</button>

</body>

</html>
相关推荐
我是大头鸟24 分钟前
SpringMVC 内容协商处理
前端
Humbunklung25 分钟前
Visual Studio 2022 中添加“高级保存选项”及解决编码问题
前端·c++·webview·visual studio
墨水白云41 分钟前
nestjs[一文学懂nestjs中对npm功能包的封装，ioredis封装示例]
前端·npm·node.js
满怀10151 小时前
【Vue 3全栈实战】从响应式原理到企业级架构设计
前端·javascript·vue.js·vue
luckywuxn1 小时前
使用gitbook 工具编写接口文档或博客
前端
梅子酱~2 小时前
Vue 学习随笔系列二十三 -- el-date-picker 组件
前端·vue.js·学习
伟笑2 小时前
elementUI 循环出来的表单，怎么做表单校验？
前端·javascript·elementui
辣辣y2 小时前
React中useMemo和useCallback的作用:
前端·react
Alice-YUE2 小时前
【HTML5学习笔记1】html标签（上）
前端·笔记·学习·html·html5
Alice-YUE2 小时前
【HTML5学习笔记2】html标签（下）
前端·笔记·html·html5
热门推荐
01YOLOv8入门 | 重要性能衡量指标、训练结果评价及分析及影响mAP的因素【发论文关注的指标】02KGG转MP3工具|非KGM文件|解密音频03从零安装 LLaMA-Factory 微调 Qwen 大模型成功及所有的坑04【SpeedAI科研小助手】2分钟极速解决知网维普重复率、AIGC率过高，一键全文降！文件格式不变，公式都保留的！05DeepSeek各版本说明与优缺点分析06Coze扣子平台完整体验和实践（附国内和国际版对比）07YOLOv5改进 | 添加CA注意力机制 + 增加预测层 + 更换损失函数之GIoU08苍穹外卖面试总结09yolov8，yolo11，yolo12 服务器训练到部署全流程 笔记10YOLOV11改进1-检测头篇