CSS3

属性选择器:

  • E[attr]:查找指定的拥有attr属性的E标签
  • E[attr=value]:查找拥有指定的Attr属性并且属性值为value的E标签
  • E[attr*=value]:查找拥有指定的attr属性并且属性值中包含(可以在任意位置)value的E标签
  • E[attr^=value]:查找拥有指定的attr属性并且属性值以value开头的E标签
  • E[attr$=value]:查找拥有指定的attr属性并且属性值以value结束的E标签

兄弟元素选择器:

.first + li {}:有 .first 样式的 相邻 并为 li 标签的元素

.first ~ li {}:有 .first 样式的所有兄弟 li 元素

阴影:

文本阴影:text-shadow:offsetX  offsetY  blur  color(可以用逗号连接添加多层阴影)

边框阴影:box-shadow:h  v  blur  spread  color  inset

  • h:水平方向的偏移值
  • v:垂直方向的偏移值
  • blur:模糊--可选,默认0
  • spread:阴影的尺寸,扩展和收缩阴影的大小--可选 默认0
  • color:颜色--可选,默认黑色
  • inset:内阴影--可选,默认是外阴影

伪类选择器:

li : first-child:查找 li 的父元素中的 第一个子元素(危险)

li : last-child:查找 li 的父元素中的 最后一个子元素(危险)

li : first-of-type:查找 li 的父元素中的 第一个 li 元素

li : last-of-type:查找 li 的父元素中的 最后一个 li 元素

li : nth-child( 从1开始的索引 );

li : nth-of-type( 关键字 )----------关键字:odd 奇数  even 偶数

li : nth-of-type( 表达式 )----------表达式:-n+5-----------n:默认取值范围为0~子元素的长度.但是当n<=0时,选取无效

     nth-last-of-type( 表达式 )----从最后开始

li : empty:空的,连空格都没有

li : target:结合锚点使用,处于当前锚点的元素会被选中

伪元素:

E::before,E::after

实际上并不在文档中生成 / DOM 树里面看不到

但是能看到实际的效果

注意:

  • 必须包含 content 属性
  • 是行内元素,如果想设置宽高则需转换为块:display: block / float: ** / position: **
  • JS无法对伪元素操作
  • 单冒号的伪元素用来兼容IE8

E::first-letter

获取第一个字母,可以实现首字下沉

E::first-line

获取第一行内容,如果设置了 first-letter 则无法改变首字的样式

E::selection

设置当前选中的内容的样式(只能改变显示样式,不能改变大小)

盒模型:

box-sizing : border-box;  添加了这个属性以后,设置的 width 就包含了 padding 和 border

线性渐变:

线形渐变产生的是图像,所以必须使用 background 属性

background : linear-gradient (方向,颜色  位置)

方向:to left,to right,to top,to bottom(默认值)

颜色 位置:可多次重复,位置可用长度值 / 百分比

背景样式:

背景颜色

background-color : 

背景图片:

background-image : 

背景平铺:

background-repeat : round(图片缩放后平铺)、space(图片不被缩放,在图片间产生距离)

滚动容器背景行为:

background-attachment :

  • fixed (背景图片位置固定不变)
  • scroll (背景图片跟随滚动)
  • local (背景图片会跟随内容一起滚动)
  • scroll (背景图片不会跟随内容一起滚动)

background-position : 设置背景图像的起始位置

background-size : 

  • cover (缩放图片,使图片完全包含在容器中)
  • contain (等比缩放图片,完全填充容器,部分图片在容器外)
  • 百分比 (参照父容器的百分比)
  • 设置宽 / 高 (建议只设置一个值,会等比缩放)

background-origin : —— 设置背景坐标原点

  • border-box —— 从 border 位置开始填充背景
  • padding-box —— 从 padding 位置开始填充背景
  • content-box —— 从 content 位置开始填充背景

background-clip : —— 设置内容的裁切

  • border-box —— 显示 border 及以内的内容
  • padding-box —— 显示 padding 及以内的内容
  • content-box —— 显示 content 及以内的内容

边框图片:

border-image-source : url ("..."); —— 设置边框图片路径

border-image-slice : 10 fill —— 设置受保护区域大小

border-image-width : 10px; —— 明确圆角 , 受保护区域大小

border-image-repeat : strech; —— 设置背景平铺效果,默认 strech 拉伸,repeat 重复

动画效果:

变形:transform

1. transform一定要加初始值

2. 可以多个变换一起用——执行顺序是反的

transform: scale(1, 2) rotate(45deg); // 先执行rotate,再执行scale
  • 旋转rotate
  • 倾斜skew
  • 缩放scale
  • 移动translate

3. 3D变换

transform: perspective() rotateX(90deg)

perspective

  • 必须添加perspective景深,才能看出3D效果
  • 只给最外层加一次

transform-style: preserve-3d

  • 让父元素变成3d模型,第一级子元素可以脱离父元素
  • 每个需要子元素脱离的地方,都要给父级加

过渡属性:transition

属性描述CSS
transition简写属性,用于在一个属性中设置四个过渡属性。3
transition-property(必须)规定应用过渡的 CSS 属性的名称。必须是有数值的属性,才有动画效果3
transition-duration(必须)定义过渡效果花费的时间。默认是 0。3
transition-timing-function(必须)规定过渡效果的时间曲线。默认是 "ease"。3
transition-delay规定过渡效果何时开始。默认是 0。3

动画:animation

1. 定义

@keyframes name {
    0%{}
    50%{}
    100%{}
}

2. 调用

animation-name: name;            // 通过名字调用动画
animation-duration: 10s;         // 动画的时间
animation-timing-function: ease; // 运动的形式
// 以上三个必需
animation-fill-mode: ;           // 规定结束时的状态
animation-delay: ;               // 延时几秒后执行动画
animation-iteration-count: ;     // 执行几次
animation-direction: ;           // 规定下一周期是否逆向播放
animation-play-state: ;          // 规定动画暂停或运行

动画优化要点总结

  • 执行动画尽量使用CSS3 keyframes和 trainsition

  • 如果需要JS执行动画,使用requestAnimationFrame,或者Velocity,避免使用jQuery动画,setTimeout,setInterval。

  • js动画的优点是,我们能随时控制开始,暂停,停止,而CSS不行。缺点是没办法像css这样优化,因为js动画是在主线程上跑的。

  • 动画尽量使用transform,opacity,尽量避免left/padding/background-position等

  • 尽可能的为产生动画的元素使用fixed或absolute的position

  • 阴影渐显动画尽量用伪类的opacity来实现。

  • 使用3D硬件加速提升动画性能时,最好给元素增加一个z-index属性,人为干扰复合层的排序,可以有效减少chrome创建不必要的复合层,提升渲染性能,移动端优化效果尤为明显。

  • 使用Chrome Timeline工具检查

  • 时刻把浏览器处理流程记在心里

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值