初学者 日益维新 记录所学点点滴滴

今日学习了

1.字体图标的使用方法,首先我们需要去iconfont官网去下载一些字体图标,字体图标这一块与精灵图相比,他们的区别在于精灵图是多个颜色,最低为两种颜色,而字体图标是单个颜色

2.运用字体图标

第一步先引入iconfont.css<link rel="stylesheet" href="./fonts/iconfont.css">第二步填写类名<i class="iconfont icon-gouwuchekong"></i>

3.transform几个属性名的运用,有transform :translate(x,y) 位移

transform: rotate 旋转 单位是(deg) 度 还有(turn)圈 正值代表顺时针 负值代表逆时针

transform: scale 缩放 scale(1)表示原始状态 大于1表示放大,小于1表示缩小

4.倾斜

.box {width: 200px;height: 200px;background-color: pink;margin: 200px auto;/* 倾斜 skew(角度deg)*//* 倾斜的度数不要超过90度 */transform: skew(45deg);}

5.渐变色

用的属性是background-image: linear-gradient(颜色1,颜色2,颜色,)中间颜色用逗号隔开

background-image: linear-gradient(to right, red, blue, yellow);这个代表改变颜色方向

.box {width: 400px;height: 400px;/* linear-gradient线性渐变(颜色1,颜色2....) *//* background-image: linear-gradient(red, blue, yellow); *//* to(到哪里去...)属性 改变渐变色的方向 */background-image: linear-gradient(to right, red, blue, yellow);/* 不能使用to属性,换成deg */background-image: linear-gradient(45deg, red, blue, yellow);/* 几个常用的背景色 *//* 透明色到黑色半透明 */background-image: linear-gradient(transparent, rgba(0, 0, 0, 0.5));/* 透明色到白色半透明 */background-image: linear-gradient(transparent, rgba(255, 255, 255, 0.5));}