前端小林

导航

2022年3月4日 #

css动画 animation 关键帧 @keyframes

摘要： 动画 定义动画 @keyframes 动画名称 { form{} 初始状态，如果和盒子状态相同可省略 form{} 0%{} 结束状态to{} 100%{} } @keyframes move { 0% { transform: translate(0); } 100% { transform: t 阅读全文

posted @ 2022-03-04 20:20 前端小林 阅读(173) 评论(0) 推荐(0) 编辑

css空间转换transform 3D

摘要： 空间转换（三维）transform 3D 平移 transform:translateZ() z轴是指垂直屏幕向外的轴 可以实现z轴方向的位置便宜 z轴偏移正值是屏幕向外的反向，负值是屏幕向内的反向 transform:translate3d(x,y,z) <!DOCTYPE html> <html 阅读全文

posted @ 2022-03-04 20:06 前端小林 阅读(140) 评论(0) 推荐(0) 编辑

2022年3月2日 #

CSS渐变

摘要： 渐变 background-image:linear-gredient([方向],参数1,参数2,参数3.....) 线性渐变：从一个方向到另外一个方向 参数是指颜色 取值： 参数1：方位 a.方位名词：to right，to left bottom； b.角度deg，就不用再加to，直接设置角度 阅读全文

posted @ 2022-03-02 20:53 前端小林 阅读(46) 评论(0) 推荐(0) 编辑

css平面变换 transform

摘要： 平移 CSS语法 transform:translate(X轴偏移量，Y轴偏移量) 取值：可以正负 1.具体的像素单位； 2.百分比(参照盒子自身尺寸) transform:translateX(); transform:translateY(); 如果translate(只有一个值) transl 阅读全文

posted @ 2022-03-02 20:29 前端小林 阅读(247) 评论(0) 推荐(0) 编辑

字体图标iconfont

摘要： #字体图标 ###优点 1.它是一个文本内容，矢量图，放大不会失真 2.它是文本，所以可以按照文本样式进行设置 ##使用方法 ###百度搜索iconfont进入阿里巴巴矢量图标库--选择图标 添加入库--点击购物车--添加至项目--下载 没有项目就默认创建一个noname项目 建议自己创建一个项目 阅读全文

posted @ 2022-03-02 20:02 前端小林 阅读(178) 评论(0) 推荐(0) 编辑