1.<link rel="stylesheet" href="字体图标类">
在对应的标签直接调用iconfont 图标名
2.iconfont上传矢量图生成字体图标
(1)与设计师沟通,得到svg矢量图
(2)打开iconfont登录上传(小云彩),加入购物车,下载的时候选择添加项目
3.平面转换
目的:使用transform属性实现元素的位移、旋转、缩放等效果
改变盒子在平面内的形态(位移、旋转、缩放)
2D转换
(1)位移:
+x右-x左-y上+y下
transform:translate(水平移动距离,垂直移动距离)
只给一个值表示水平方向移动距离;单独设置某个方向的移动距离translateX/Y。
谁变谁设置:transiton:all 0.5s//移动的元素和移动速度
像素单位数值或百分比(参考盒子子级自身的尺寸)
在一定情况下用translate快速实现绝对定位的居中,能有效避免开发维护。使用left和right各加50%再使用margin-left和margin-top来移动的话加的是数字+px有局限性,transform:translate(-50%,-50%)能更高效。
(2)通过位移的方法实现双开门:
关键代码:
<div class="box">
</div>
//body里面放一个div标签
* {
margin: 0;
padding: 0;
}
//清除默认样式表
.box {
width: 1366px;
height: 600px;
margin: 0 auto;
background: url('./images/bg.jpg');
overflow: hidden;
}
//设置盒子的尺寸,背景图,overflow用来用来隐藏盒子溢出部分
.box::before,
.box::after {
float: left;
content: '';
width: 50%;
height: 600px;
background-image: url(./images/fm.jpg);
transition: all 0.5s;
}
//设置两个为元素标签设置尺寸和背景图,过渡的时间,谁变加给谁
.box::after {
background-position: right 0;
}
//右边的伪标签显示一张图片的右半部分
/* 鼠标移入的时候的位置改变的效果 */
.box:hover::before {
transform: translate(-100%);
}
哪个变哪个就加hover
.box:hover::after {
transform: translateX(100%);
}
注意事项:可以直接用三个div加浮动的方式来实现,用伪类标签更快,想让谁hover就E:hover之后再找子级谁要变化,一层一层找到子级,伪类元素的content ' ' 必须要加,before和after创建出来的都是行内标签使用定位、display、或浮动让其显示。
(3)旋转:
正顺负逆
围绕几何图形的中心旋转:
用rotate实现元素的旋转效果;transform:rotate(角度)单位是deg。旋转的时候必须加过渡transition:all ?s; 属性实现旋转的过程,不然浏览器显示不了动态旋转。
固定原点旋转:
使用transform-origin属性改变转换的原点,是一个复合属性:原点的水平位置 原点的垂直位置
取值:方位名词:right bottom或者其他center
(4)多重转换:
transform:translate() rotate();//边走边转,不能先旋转再位移
原因:在旋转的过程中坐标轴的方向会发生改变,这样就导致位移的方向发生了改变。
注意:多重转换的时候必须要复合写,不能分开写,css有层叠性,会将上面的transform给覆盖了。
(5)图片的缩放:
transform:scale(x轴缩放的倍数,y轴缩放的倍数),一般情况下transform:scale(缩放的倍数)
注:直接从中心点出发的缩放,基础班学的将width:150%没有将图片从中心点放大。
opacity:0~1;设置透明度
注:使用transform时必须时刻注意其复合属性,避免被层叠影响。