摘要:
2.9 动画(animation) 「动画」是CSS3中最具颠覆性的特征之一,可通过设置多个节点来精确的控制一个或者一组动画,从而实现复杂的动画效果。 相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果。 2.9.1「动画的使用」 先定义动画 再调用定义好的动画 /*1. 定义动画*/@ 阅读全文
摘要:
2.8 2D 转换 转换(transform )是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果 转换( transform )你可以简单理解为变形 2D转换:是改变标签在二维平面上的位置和形状 移动:translate 旋转:rotate 缩放:scale 2.8.1 二维坐 阅读全文
摘要:
2.7 CSS3过渡(重点) 过渡(transition)是CSS3中具有颠覆性的特征之一,我们可以在不使用Flash 动画或JavaScript的情况下,当元素从一种样式变换为另一种样式时为元素添加效果。 过渡动画︰是从一个状态渐渐的过渡到另外一个状态 可以让我们页面更好看,更动感十足,虽然低版本 阅读全文
摘要:
2.6 CSS3其他特性(了解) 2.6.1 CSS3滤镜filter: filter CSS属性将模糊或颜色偏移等图形效果应用于元素。 filter:函数(); /*例如: filter: blur(5px); blur模糊处理数值越大越模糊*/ 2.6.2 CSS3 calc函数: calc() 阅读全文
摘要:
2.5 CSS3盒子模型 CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box,这样我们计算盒子大小的方式就发生了改变。 可以分成两种情况︰ box-sizing:content-box盒子大小为width + padding + bo 阅读全文
摘要:
2.4 伪元素选择器(重点) 伪元素选择器可以帮助我们利用CSS创建新标签元素,而不需要HTML标签,从而简化HTML结构。 选择符简介 ::before 在元素内部的前面插入内容 ::after 在元素内部的后面插入内容 注意︰ before和after创建一个元素,但是属于行内元素 新创建的这个 阅读全文
摘要:
2.3 结构伪类选择器 结构伪类选择器主要根据文档结构来选择器元素,常用于根据父级选择器里面的子元素 选择符简介 E:first-child 匹配父元素中的第一个子元素E E:last-child 匹配父元素中最后一个E元素 E:nth-child(n) 匹配父元素中的第n个子元素E E:first 阅读全文
摘要:
2.2属性选择器 属性选择器可以根据元素特定属性的来选择元素。这样就可以不用借助于类或者id选择器。 选择符简介 E[att] 选择具有att属性的E元素 E[att="val"] 选择具有att属性且属性值等于val的E元素 E[attN="val"] 匹配具有att属性且值以val开头的E元素 阅读全文
摘要:
2.1 CSS3的现状 新增的CSS3特性有兼容性问题,ie9+才支持 移动端支持优于PC端 不断改进中 应用相对广泛 现阶段主要学习∶新增选择器和盒子模型以及其他特性 CSS3新增选择器 CSS3给我们新增了选择器,可以更加便捷,更加自由的选择目标元素。 属性选择器 结构伪类选择器 伪元素选择器 阅读全文
摘要:
不同浏览器对有些标签的默认值是不同的,为了消除不同浏览器对HTML文本呈现的差异,照顾浏览器的兼容,我们需要对CSS初始化 简单理解︰CSS初始化是指重设浏览器的样式。(也称为CSS reset )每个网页都必须首先进行CSS初始化。 这里我们以京东css初始化代码为例。 Unicode编码字体: 阅读全文
摘要:
1.14.1 精灵图 1.14.1.1 为什么需要精灵图 一个网页中往往会应用很多小的背景图像作为修饰,当网页中的图像过多时,服务器就会频繁地接收和发送请求图片,造成服务器请求压力过大,这将大大降低页面的加载速度。 因此,为了有效地减少服务器接收和发送请求的次数,提高页面的加载速度,出现了CSS精灵 阅读全文