1.Unicode字体图标的使用
<!-- 1.引入iconfont.css文件 -->
<link rel="stylesheet" href="./iconfont/iconfont.css" />
声明字体图标库
<!-- 2.通过i标签把unicode编码复制过来 -->
在线引入字体图标,注意前面要加http:
<link
rel="stylesheet"
href="http://at.alicdn.com/t/font_2970681_7my4eaeshh7.css"
/>
2.位移的基本使用
transform可以改变盒子的层级关系,提高盒子的层级
transform: translateX(100px)
顺时针旋转 360deg
transform: rotate(360deg);
逆顺时针旋转 360deg
transform: rotate(-360deg);
旋转原点改变
transform-origin: right top;
transform-origin: -100px -100px;
transform-origin: -50% -50%;
多重转换旋转
如果平移和旋转一起设置,要先写平移,再写旋转
transform: translate(600px) rotate(360deg);
3.渐变背景
背景颜色渐变 bgi background-image: linear-gradient(参数1, 参数2, 参数3, ....);
参数1:
方位:默认的方位从上到下
1.方位名词:to right,to right bottom
2.角度deg:直接写度数即可,不用再加to
参数2:颜色1;
参数3:颜色2;.
background-image: linear-gradient(45deg, #59c173, #a17fe0, #5d26c1);