当前位置： 首页 > news >正文

[CSS3]属性增强1

news 2025/7/2 20:38:51

字体图标

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

优势

  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><i class="iconfont icon-favorites-fill"></i>
</body>
</html>
  1. 可以通过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><div class="father"><div class="son"></div></div>
</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><img src="./images/rotate.png" alt="">
</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><div class="box"><img src="./images/product.jpeg" alt=""></div>
</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><div></div>
</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>

http://www.dtcms.com/a/195555.html

相关文章：

  • STM32CubeMX使用SG90舵机角度0-180°
  • TIP-2021《SRGAT: Single Image Super-Resolution With Graph Attention Network》
  • 逻辑复制环境删除订阅报错 replication slot does not exist
  • 记录一次vue项目页面内嵌iframe页面实现跨域上传和下载附件的功能
  • 如何为直播平台集成美颜SDK？美颜与美型功能的开发指南
  • 二叉树子树判断：从递归到迭代的全方位解析
  • 向量和矩阵范数
  • 对置式光电传感器市场报告：预计2031年全球市场销售额将攀升至 5.68 亿美元
  • querySelectorAll 和 getElementByClassName 的区别是啥
  • 数据预处理-数据清洗（缺失值、重复值、异常值）
  • MySQL——十一、主从复制
  • Unity 批量将图片从默认类型改为Sprite类型
  • 【Linux网络】详解应用层http协议
  • 基于大数据的租房信息可视化系统的设计与实现【源码+文档+部署】
  • 深度学习中的归一化：提升模型性能的关键因素
  • 城市综合管廊监测与维护一体化解决方案
  • C++运算符重载练习
  • 【python编程从入门到到实践】第十章 文件和异常
  • 遥感图像非法采矿矿区识别分割数据集labelme格式1818张3类别
  • 人脸表情识别检测数据集VOC+YOLO格式9400张8类别
  • linux环境下 安装svn并且创建svn版本库详细教程
  • python中元组的操作
  • 149.WEB渗透测试-MySQL基础（四）
  • 三轴云台之智能分析与识别技术篇
  • 蒟蒻编程日志
  • 腾讯云代码助手CodeBuddy使用体验
  • 第八章 模板项目生成
  • Matrix-Game：键鼠实时控制、实时生成的游戏生成模型（论文代码详细解读）
  • SPL做量化---MTM（动量指数）
  • Linux！启动~