扁蛋蛋蛋的博客

浏览器私有前缀浏览器私有前缀是为了兼容老版本的写法, 比较新版本的浏览器无须添加私有前缀-moz-: 代表firefox浏览器私有属性-ms-: 代表ie浏览器私有属性-webkit-: 代表safari, chrome私有属性-o-: 代表Opera私有属性提倡的写法-moz-border-radius: 10px;-webkit-border-radius: 10px;-o-border-radius: 10px;border-radius: 10px;...

3D转换有什么特点?近大远小物体后面遮挡不可见三维坐标系三维坐标系其实就是指立体空间, 立体空间是由3个轴共同组成的x轴: 水平向右 注意: x右边是正值, 左边是负值y轴: 垂直向下 注意: y下面是正值, 上面是负值z轴: 垂直屏幕 注意: 往外面是正值, 往里面是负值主要知识点3D位移: translate3d(x, y, z);3D旋转: rotate3d(x, y, z);透视: perspective3D呈现: transfrom-style3D移动tr

动画动画(animation)是CSS3种具有颠覆性的特征之一, 可通过设置多个节点来精确控制一个或一组动画, 常用来实现复杂的动画效果相比较过渡, 动画可以实现更多变化, 更多控制, 连续自动播放等效果动画的基本使用制作动画分为两步先定义动画再使用(调用)动画用keyframes定义动画(类似定义器选择器)语法:@keyframes 动画名称 { 0% { width: 100px; } 100% { width: 200px;

CSS3 2D转换**转换(transform)**是CSS3中具有颠覆性的特征之一, 可以实现元素的唯一, 旋转, 缩放等特效效果转换(transform)可以简单理解为变形移动: translate旋转: rotate缩放: scale1) 2D转换之移动translate2D移动是2D转换里面的一种功能, 可以改变元素在页面中的位置, 类似定位语法:transform: translate(x, y); 或者分开写 -> transform: translateX(n) t

CSS3的现状新增的CSS3特性有兼容性问题， ie9+才支持移动端支持优于PC端不断改进中应用相对广泛现阶段主要学习：新增选择器和盒子模型以及其他特性CSS3新增选择器属性选择器结构伪类选择器伪元素选择器注意：类选择器， 属性选择器， 伪类选择器， 权重为101. 属性选择器属性选择器可以根据元素特定的属性来选择元素。 这样就可以不用借助类或者id选择器用中括号[]权重为10下面权重为11 标签选择器+属性选择器input[value] { color

精灵图为什么需要精灵图?一个网页中往往会应用很多小的背景图像作为修饰, 当网页中的图像过多时, 服务器就会频繁地接收和发送请求图片, 造成服务器请求压力过大, 这将大大降低页面的加载速度因此, 为了有效地减少服务器接收和发送请求次数, 提高页面的加载速度, 出现了CSS精灵技术(也称为CSS Sprites, CSS雪碧)精灵图(spriyes)的使用(重要)使用精灵图核心:精灵技术主要针对于背景图片使用. 就是把多个小背景图片整合到一张大图片中这个大图片也称为sprites精灵