摘要:
3D特点 近大远小。 物体后面遮挡不可见 三维坐标系 三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。 简单记住他们的坐标:相对盒子本身的位置来移动的 x左边是负的,右边是正的 y 上面是负的, 下面是正的 z 里面是负的, 外面是正的 rotateX() 就是沿着 x 立体旋转. im 阅读全文
摘要:
动画是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。 动画序列 0%是动画的开始,100%是动画的完成。这样的规则就是动画序列。 在@keyframes中规定某项css样式,就能创建由当前样式逐渐改变为新样式的动画效果 动画是使元素从一种样式逐 阅读全文
摘要:
transform是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、倾斜、缩放,甚至支持矩阵方式 变形转换 transform transform 变换 变形的意思 移动 translate(x, y) 1. 2D移动是2D转换里面的 一种功能,可以改变元素在页面中的位置,类似定位 tra 阅读全文
摘要:
过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用 Flash 动画或 JavaScript 的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 帧动画:通过一帧一帧的画面按照固定顺序和速度播放。如电影胶片 在CSS3里使用transition可以实现补间动画( 阅读全文
摘要:
精灵技术产生的背景 当用户访问一个网站时,需要向服务器发送请求,网页上的每张图像都要经过一次请求才能展现给用户。 然而,一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接受和发送请求,这将大大降低页面的加载速度。为了有效地减少服务器接受和发送请求的次数,提高页面的 阅读全文
摘要:
图片是有诸多优点的,但是缺点很明显,比如图片不但增加了总文件的大小,还增加了很多额外的"http请求",这都会大大降低网页的性能的。更重要的是图片不能很好的进行“缩放”,因为图片放大和缩小会失真。 我们后面会学习移动端响应式,很多情况下希望我们的图标是可以缩放的。此时,一个非常重要的技术出现了, 这 阅读全文
摘要:
CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。 主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向 侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的 方向:默认主轴从左向右,侧轴默认从上到下 主 阅读全文
摘要:
滑动门出现的背景 为了使各种特殊形状的背景能够自适应元素中文本内容的多少,出现了CSS滑动门技术。它从新的角度构建页面,使各种特殊形状的背景能够自由拉伸滑动,以适应元素内部的文本内容,可用性更强。 最常见于各种导航栏的滑动门。 核心技术 核心技术就是利用CSS精灵(主要是背景位置)和盒子paddin 阅读全文