前端知识
-
3D转换
我们生活的环境是3D的,照片就是3D物体在2D平面呈现的例子。 特点 近大远小 物体后面遮挡不可见 当我们在网页上构建3D效果的…
-
2D转换综合性写法
注意: 同时使用多个转换,其格式为transform: translate() rotate() scale()等 其顺序会影响…
-
2D转换(scale缩放)
缩放,顾名思义可以放大和缩小。只要给元素添加上了这个属性就能控制它放大还是缩小。 语法: 注意: 注意其中的x和y用逗号分隔 t…
-
2D转换中心点/设置转换中心点(transform-origin)
语法: xy可设置为方位名词,例如设置左下角为中心点:transform-origin: left bottom; xy可设置为…
-
2D转换(rotate旋转)
2D旋转指的是让元素在二维平面内顺时针或者逆时针旋转。 语法: 重点 rotate里面跟度数,单位是deg。例如rotate(4…
-
2D转换(translate移动)
2D移动是2D转换里面的一种功能,可以改变元素在页面中的位置,类似定位。 语法: 重点: 定义2D转换中的移动,沿着X和Y轴移动…
-
计算盒子宽度calc函数
CSS3 calc函数 calc() 此css函数让你在声明css属性值时执行一些计算。 括号里面可以使用+ – *…
-
HTML5音频标签
音频:<audio> 使用audio可以方便在页面中插入音频,而不再去使用Flash和其他浏览器插件。HTML5在不使用插…
-
HTML5视频标签
视频:<video> 使用video可以方便在页面中插入视频,而不再去使用Flash和其他浏览器插件。HTML5在不…
-
字体图标
字体图标下载 icomoon字库:icomoon.io 阿里iconfont字库:www.iconfont.cn 字体图标引入 …
-
精灵图(sprites)
使用精灵图: 精灵技术主要针对于背景图片使用。就是把多个小背景图片整合到一张大图片中 这个大图片也称为sprites 精灵图 或…
-
元素的显示与隐藏(display、visibility、overflow)
重要! 本质:让一个元素在页面中隐藏或显示出来。 Display属性 display属性用于设置一个元素如何显示。 displa…