H5C3--04章

01-线性渐变

background:linear-gradient(to top left,red 0%,red 30%,blue 50%,blue 100%);

linear-gradient参数

• 第一个参数：渐变的方向或者角度
• 第二个参数
• 第三个参数
• 第四个参数
• …
• 渐变的颜色值和渐变的百分比

02-径向渐变

background: radial-gradient(shape size at position,color,color);

• position 确定圆心的位置。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center
• shape：渐变的形状，ellipse表示椭圆形，circle表示圆形。默认为ellipse，如果元素形状为正方形的元素，则ellipse和circle显示一样
• size：渐变的大小，即渐变到哪里停止，它有四个值。 closest-side：最近边；farthest-side：最远边； closest-corner：最近角； farthest-corner：最远角。默认是最远的角farthest-corner
• color ：指定颜色

03-背景样式（上）

• background-repeat
  • round：能够将平铺的背景图完整的显示在容器内部，所以也就会将背景图进行缩放
  • space：能够将平铺的背景图完整的显示在容器内部，但是会产生相同的间距
• background-attachment

  • fixed

    相对于整个文档来说，背景图是固定的

    相对于容器来说，背景图也是固定的

  • scroll

    相对于整个文档来说，是随着滚动条变化的

    相对于容器来说，是固定的

  • local

    相对于整个文档来说，是随着滚动条变化的

    相对于容器，是随着滚动条变化的

04-background-size

• background-size

  • 300px：设置的宽度300，高度auto

  • 300px 500px：第一个参数是设置宽度，第二个设置高度

  • 50% 50%：参照与当前容器的宽和高

  • cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域,背景图像的某些部分也许无法显示在背景定位区域中。（使背景图片缩放至容器刚好填满）–主要针对于容器，让容器刚好填满

  • contain：把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。（使其背景图片刚好的放在容器内部））–主要针对于背景图片，让背景图片刚好放在容器内部

05-背景的填充和裁剪

背景图的默认原点，如果有padding，原点就基于padding的，如果没有padding，默认原点基于内容的

• background-origin
  • border-box：设置背景图的原点以边框的左上角为原点
  • padding-box：设置背景图的原点以内间距的左上角为原点
  • content-box：设置背景图的原点以内容的左上角为原点
• background-clip
  • border-box：以边框进行裁剪，边框以外的被裁减掉
  • padding-box：以内间距进行裁剪，内间距以外的被裁减掉
  • content-box：以内容进行裁剪，内容以外的被裁减掉

06-过渡

• transition-property:添加过渡效果的样式属性名称
• transition-duration：过渡效果的耗时
• transition-timing-function：设置时间函数–控制运动的速度 linear 匀速，ease-in-out,由慢到快
• transition-delay：设置动画的延迟效果
• transition：left 2s linear 0s；
  • 第一个参数设置样式属性名称
  • 第二个参数过渡效果的耗时
  • 第三个参数控制运动的速度
  • 第四个参数设置动画的延迟
• 如果想设置多个过度，可以利用逗号隔开即可
• transition: all 2s ease-in-out 0s; 代表设置所有的属性都会有过渡效果

07-二维变换

• transform中translate的设置 translate能够让当前的元素进行移动，移动的距离是当前本身位置的左上角进行移动
  • transform: translate(100px); 如果只写了一个参数，代表设置的x位移
  • transform: translate(400px,500px); 如果写了两个参数，第一个代表x轴的位移，第二个代表y轴的位移
  • transform:translateX(300px); 只针对x轴的位移
  • transform:translateY(300px);只针对y轴的位移
• transform中scale的设置 如果值为1，就是默认状态，大于1放大，小于缩小
  • transform:scale(2);如果只有一个参数，代表设置x,y进行缩放
  • transform: scale(2,1); 如果设置两个参数，第一个代表x缩放，第二个参数代表y轴的缩放
  • transform:scaleX(2); 代表设置x轴的缩放
  • transform:scaleY(2);代表设置Y轴的缩放
• transform中 rotate的设置
  • transform:rotate(90deg); 默认是沿着Z轴旋转
  • transform:rotateX(90deg); 沿着X轴进行旋转（单双杠）
  • transform:rotateY(90deg); 沿着Y轴进行旋转（双手握着 钢管 围着钢管转 ）
• transform中skew的设置(作为了解)
  • transform:skew(60deg);代表x轴倾斜60deg
  • transform:skewX(60deg);代表x轴倾斜60deg
  • transform:skewY(60deg);代表Y轴倾斜60deg
• transform中origin的设置
  • transform-origin: right top;
  • transform-origin: 50px 50px;

08-同时添加多个transform属性

 transform:translateX(700px) rotate(-90deg);

*注意点：如果是写多个属性的话，把旋转的放在最后，因为旋转属性会将坐标系进行旋转

盾牌案例步骤

1. 先将图片结构书写好，只要给父盒子设置一个宽度即可
2. 利用transform将图片的位置和角度进行打乱
3. 鼠标经过的时候讲transform属性清空transform：none
4. 给图片加过度效果

09-实现任意元素居中

实现任意元素的居中

定位设置left：50%；top：50%； transform:translate(-50%,-50%);定位的百分比：相对于父容器，translate的百分比相对于本身