html和css(10)
基础班第12天
背景系列
多重背景
在css3中,背景是可以写多个的,只需要用连写即可,中间用逗号隔开
background: url(图片地址1) no-repeat,url(图片地址2) no-repeat;
背景图片基准点
默认背景图片以padding的起始点开始平铺,在css3里面可以设置其基准点
background-origin: 值
值:
padding-box 默认值 从padding的初始位置开始
border-box 从边框的初始位置点开始
content-box 从内容区域开始
背景缩放
控制背景图片的缩放
background-size: 值;
值可以是像素、百分比、contain、cover
一个值表示整体缩放
两个值表示对应方向上分别缩放
contain 表示宽高有一个达到最大值则停止缩放
cover 整体覆盖缩放
阴影系列
盒子阴影
box-shadow: 水平偏移 垂直偏移 模糊程度 阴影大小 颜色 内外阴影
阴影可以写多个
文字阴影
text-shadow: 水平偏移 垂直偏移 模糊程度 颜色;
案例: 凹凸效果
内减模式
自动减去padding和border值 不需要手动去减
box-sizing: border-box;
取值:
border-box 自动内减
content-box 手动内减
过渡系列
过渡本质上不是动画,是css的某一个属性的值变换到另外一个值的过程
transition: 过渡的属性 过渡的时间 过渡的曲线 过渡的延迟时间
- 案例:电商移动小案例
- 案例:精灵图背景移动小案例
- 案例:泡泡按钮
2D转换
移动
从一个位置移动至另外一个位置
transform: translate(X轴, Y轴);
移动的特点: 相当于相对定位,比定位的性能更高 可以接受负值
**小技巧:让一个盒子水平垂直居中 **
旋转
transform: rotate(360deg);
tips:旋转的中心点可以控制 transform-origin: 值;
缩放
transform: scale();
取值是倍数
案例:鼠标移上缩放案例
斜切
transform: skew(角度);
案例 扫光效果
** 注意:多个2D效果需要采用连写的方式 **
多个2D效果共存
一个元素具备多个2D效果如何实现:采用连写的方式
transform: scale(2) rotate(360deg);
一个元素多个场景下具备2D效果
当多个场景下面有多个2d效果共存需要复制前面已经存在的2d效果 多个场景是指 div 和div:hover 两个场景 比如div有transform:translate(-50%,-50%) div:hover要想旋转需要复制transform:translate(-50%,-50%) 才能在此基础旋转