今日学习目标*
• 字体图标
• 平面转换
• 渐变
1.字体图标
1.1字体图标的使用
步骤:1、登录iconfont官网,选择对应的字体图标添加到购物车
2、下载选择好的字体图标(添加到项目进行下载)
3、解压下载好的字体图标文件
4、把相关文件拖到项目文件夹中
5、按照提示使用字体图标
<!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> <link rel="stylesheet" href="./fonts/iconfont.css"> </head> <body> <i class="iconfont icon-gouwuchekong"> </i> <span class="iconfont icon-arrow-down"></span> </body> </html>
最好用i/ span/ em标签 字体图标属于行内元素
购物车案例
<link rel="stylesheet" href="./fonts/iconfont.css"> <style> div { width: 100px; height: 40px; background-color: #f0f; line-height: 40px; text-align: center; } .font { color: #f84510; } </style> </head> <body> <div> <i class="iconfont icon-gouwuchekong font"></i> 购物车 <span class="iconfont icon-arrow-down"></span> </div> </body>
1.1.1字体图标的缩写
.font { font-size: 50px; font-weight: 700; color: #f0f; } /* 这里字体大小不生效 因为标签选择器<类选择器 */ /* i { font-size: 50px; } */
1.2.unicode的写法
引入字体图标的css样式
<link rel="stylesheet" href="./fonts/iconfont.css">
<i class="iconfont"> </i> <span class="iconfont"></span>
1.3.伪元素的使用
<link rel="stylesheet" href="./fonts/iconfont.css"> <style> i::after { content: '\e666'; } span::before { content :'\e667'; } </style> </head> <body> <i class="iconfont"></i> <span class="iconfont"></span> </body>
2.平面转换
目标:使用transform属性实现元素的位移、旋转、缩放等效果
2.1 平面转换概念
平面转换:改变盒子在平面内的形态(位移、旋转、缩放)
属性:transform
2.2 平面转换之位移
代码:
transform: translate(100px, 100px);
取值:1、像素+px
2、百分比(参照物为盒子自身尺寸)
注意:X轴正向为右,Y轴正向为下
技巧:1、translate()如果只给出一个值,表示x轴方向移动距离
2、单独设置某个方向的移动距离:translateX() & translateY()
2.2.1 位移-绝对定位居中
代码:
position: absolut*; left: 50%; top: 50%; transform: translate(-50%, -50%);
2.2.2、平面转换之旋转
语法:
transform: rotate(旋转角度);
注意:角度单位是deg
技巧:1、取正值,则为顺时针旋转
2、取负值,则为逆时针旋转
• 设置旋转中心点
语法:
transform-origin: right bottom;
注意:盒子默认以中心点为旋转中心点
取值:1、方位名词(left、top、right、bottom、center)
2、像素单位数值
3、百分比(参照盒子自身尺寸计算)
• 多重转换
目标:使用transform复合属性实现多形态转换
代码:
transform: translateX(600px) rotate(360deg);
2.2.3 平面转换之缩放
语法:
transform: scale(x轴缩放倍数, y轴缩放倍数)
技巧:1、一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放
2、scale值大于1表示放大,scale值小于1表示缩小
> **注意: 一般情况下,只为scale设置一个值,表示x轴和y轴等比例缩放** > >**transform: scale(缩放倍数)**
3.渐变
目标:使用background-image属性实现渐变背景效果
代码:
background-image: linear-gradient(red, green, blue);
拓展
margin和2d位移的区别
margin :1.移动的100%是屏幕的大小
2.magin移动的盒子会影响其他的元素
2d位移: 1.移动的100%自己本身的大小.
2.2d唯一移动盒子 不影响其他的元素 并且不脱离标准流
<style> div { width: 200px; height: 200px; background-color: pink; } .one { /* margin-right: 100%; margin-top: 50px; */ transform: translateY(50px) } .two { transform: translateX(100%); background-color: yellowgreen; </style> </head> <body> <div class="one">1</div> <div class="two">123</div> </body> </html>