摘要：
立体呈现 目标:使用tranform-style:preserve-3d呈现立体图形 呈现立体图形步骤 盒子父元素添加transform-style:preserve-3d; 按需求设置子盒子的位置(位移或旋转) 注意 空间内,转换元素都有自己独立的坐标轴,互不干扰 实现正方体 <!DOCTYPE 阅读全文
摘要：
空间旋转 目标:使用rotate实现元素空间旋转效果 语法 transform:rotateZ(值); transform:rotateX(值); transform:rotate(值); 拓展 rotate3d(x,y,z,角度度数) 用来设置自定义旋转轴的位置及旋转的角度 x,y,z取值为0-1 阅读全文
摘要：
空间转换 目标:使用transform属性实现元素在空间内的位移,旋转,缩放等效果 空间:是从坐标轴角度定义的.x,y,z三条坐标轴构成了一个立体空间,z轴是视线方向 空间转换也叫3D转换 属性:transform 空间位移 目标:使用translate实现元素空间位移效果 语法 transform 阅读全文
摘要：
渐变 目标:使用background-image属性实现渐变背景效果 渐变是多个颜色逐渐变化的视觉效果 一般用于设置盒子的背景 语法 线性渐变(从一个方向到另外一个方向) background-image:linear-gradient(transparent,rgba(0,0,0 .6)) 径向渐 阅读全文
摘要：
旋转 **目标:**使用rotate实现元素旋转效果 语法 transform:rotate(角度) 注意:角度单位是deg 默认参照元素几何中心进行旋转 **技巧:**取值正负均可 取值为正,则顺时针旋转 取值为负,则逆时针旋转 转换原点 **目标:**使用transform- 阅读全文
摘要：
平面转换 目标:使用transform属性实现元素的位移、旋转、缩放等效果 平面转换 改变盒子在平面内的位置形态(位移、旋转、缩放) 2D转换 平面转换属性 transform 位移 语法 transform:teanslate(水平移动距离,垂直移动距离) 取值(正负均可) 参照元素的原始坐标进行 阅读全文
摘要：
上传矢量图: 问:如果图标库没有项目所需的图标怎么办? 答:IconFont网站上传矢量图生成字体图标 与设计师沟通,得到SVG矢量图 IconFont网站上传图标,下载使用 使用字体图标技巧实现网页中简洁的图标效果 <!DOCTYPE html> <html lang="en"> <head> < 阅读全文
摘要：
字体图标 **目标:**使用字体图标技巧实现网页中简洁的图标效果 字体图标的的优点: **灵活性:**灵活地修改样式,例如:尺寸,颜色等 **轻量级:**体积小,渲染快,降低服务器请求次数 **兼容性:**几乎兼容所有主流浏览器 使用方便: 下载字体包 使用字体图标 图标库 Iconfont: ht 阅读全文
摘要：
光标类型 场景:设置鼠标光标在元素上时显示的样式 属性名:cursor 常见属性值: 属性值 效果 default 默认值,通常是箭头 pointer 小手效果,提示用户可以点击 text 工字型,提示用户可以选择文字 move 十字光标,提示用户可以移动 not-allowed 禁止点击 wait 阅读全文
摘要：
定位层级 定位方式 属性值 相对谁移动 是否占位置 静态定位 static 不能通过方位属性移动 占位置 相对定位 relative 相对于自己原来的位置 占位置 绝对定位 absolute 相对于最近的且有定位的祖先元素移动 不占位置(脱标) 固定定位 fixed 相对浏览器可视区域 不占位置(脱 阅读全文
