css难点

CSS transform 属性（形变）

1、CSS transform属性应用于元素的2D或3D转换。这个属性允许你将元素旋转，缩放，移动，倾斜等

· 平移：2D：translate(x, y) 或 3D：translate3d(x, y, z)

▲ 拓展：translateX translateY translateZ

· 缩放：2D：scale(x, y) 或 3D：scale3d(x, y, z)

▲ 拓展：scaleX scaleY scaleZ

· 旋转：2D：rotate(deg) 或 3D：rotate3d(x,y,z,a)

▲ x 类型，可以是 0 到 1 之间的数值，表示旋转轴 X 坐标方向的矢量。

▲ y 类型，可以是 0 到 1 之间的数值，表示旋转轴 Y 坐标方向的矢量。

▲ z 类型，可以是 0 到 1 之间的数值，表示旋转轴 Z 坐标方向的矢量。

▲ a 类型，表示旋转角度。正的角度值表示顺时针旋转，负值表示逆时针旋转。

▲ 拓展：rotateX rotateY rotateZ

· 倾斜：skew(deg, deg) ▲ 拓展：skewX skewY

🔺如果是 transform: skew(20deg) → W3C告诉你：如果未指定第二个参数，则值为零。

/* 沿x轴(向左)，Y轴(向上)平移div的位置为自身高度和宽度的50% */
/* 同时，缩小div的大小为原来的50%，并且顺时针旋转45deg */
.box{
    transform: translate(-50%,-50%) scale(0.5) rotate(45deg);
}

2、matrix() 方法把所有 2D 变换方法组合为一个。matrix() 方法可接受六个参数，其中包括数学函数，这些参数使您可以旋转、缩放、移动（平移）和倾斜元素。

参数如下: atrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

.box{
   transform: matrix(2, -0.3, 0, 1, 10, 50);
}

3、perspective（透视距离）

当 perspective 越小时，透视距离我们的眼睛越近，透视产生的形变越明显。

4、transform-origin

ransform-Origin属性允许您更改转换元素的位置。

.div{
    transform-origin: x-axis y-axis z-axis;

    /* x-axis 定义视图被置于 X 轴的何处。可能的值：left、 center 、right、 length 、 %
    y-axis 定义视图被置于 Y 轴的何处。可能的值：top、center、bottom、length、%
    z-axis 定义视图被置于 Z 轴的何处。可能的值：length */
}

CSS Transition 属性（过渡）

1、很多网站都把这个属性翻译成过渡，也有人把它翻译成 补间。为什么这样呢？因为它的原理是：设置关键帧的初始状态，然后在另一个关键帧改变这个状态，比如大小、颜色、透明度、位置等，浏览器将自动根据二者之间帧的值创建的过渡效果。这明显动起来的东西，W3C并不认为它是动画。大概因为它无法管理过渡的中间过程。必须规定两项内容：

1、指定要添加效果的CSS属性

2、指定效果的持续时间。

一、方式1：transition：属性 时间；

div {
  width: 100px;
  transition: width 1s;
  -webkit-transition: width 1s; /* Safari */
}
 
div:hover {
  width: 200px;
}

二、方式2：增加了 animation 动画

div {
  width: 100px;
  animation: changeWidth 5s infinite;
}
 
@keyframes changeWidth {
  0% {
    width: 100px;
  }
  100% {
    width: 200px;
  }
}

2、Transition属性定义及使用说明

transition 属性允许你在元素状态改变时控制过渡效果。它可以让你在元素从一种样式变换到另一种样式时产生平滑的过渡效果，比如从一种颜色渐变到另一种颜色，或者从隐藏到显示。它具备下面四种属性值：

1丶transition-property: 指定要过渡的 CSS 属性的名称。例如，color、background-color 等。

2、transition-duration: 指定过渡效果持续的时间，以秒或毫秒为单位。

3、transition-timing-function: 指定过渡效果的速度曲线。

可以是 linear（线性）、ease（渐入渐出）、ease-in（渐入）、ease-out（渐出）、ease-in-out（先渐入后渐出）等。

4、transition-delay: 指定过渡效果开始之前的延迟时间，以秒或毫秒为单位。

<template>
    <div>
       <div class="cssbox linear"></div>
       <div class="cssbox ease"></div>
    </div>
</template>

.cssbox{  
  width: 20px;
  height: 20px;
  transition:width 2s;
}

.cssbox:hover{
    width:1000px;
    background: linear-gradient(90deg, #0f0, #0ff 50%, #0cf 100%, transparent 0);
}
/* 缓动效果 */
.linear{
    transition-timing-function:linear;
}
.ease{
    transition-timing-function:ease;
}

CSS Animation 属性（关键帧动画）

1、我私下觉得，这个可能才是W3C组织在定义CSS规则时候认可的动画，采用关键帧方式创建和管理动画，甚至可以完全控制每一段动画的表现。它既可以实现 补间动画 的动画效果，也可以使其以 逐帧动画 的方式进行绘制。

Animation的两个必须要素：

定义动画：@keyframe

.div{
    animation:动画名称 持续时间 动画方式 延迟时间 动画次数 动画方向;

    /* animation-name 指定要绑定到选择器的关键帧的名称
    animation-duration 动画指定需要多少秒或毫秒完成
    animation-timing-function 设置动画将如何完成一个周期 
        linear 动画从头到尾的速度是相同的
        ease 默认。动画以低速开始，然后加快，在结束前变慢。
        ease-in 动画以低速开始
        ease-out 动画以低速结束
        ease-in-out 动画以低速开始和结束
        steps(int,start|end) 指定了时间函数中的间隔数量（步长）。有两个参数，第一个参数指定函数的间隔数，该参数是一个正整数（大于 0）。 第二个参数是可选的，表示动画是从时间段的开头连续还是末尾连续。含义分别如下： start：表示直接开始。 end：默认值，表示戛然而止
        cubic-bezier(n,n,n,n) 在 cubic-bezier 函数中自己的值。可能的值是从 0 到 1 的数值
    animation-delay 设置动画在启动前的延迟间隔
    animation-iteration-count 定义动画的播放次数
        infinite无限次
    animation-direction 指定是否应该轮流反向播放动画 
        normal正向
        reverse反向
        alternate播放次数是奇数时，动画正方向播放;播放次数是偶数时，动画反方向播放
    animation-play-state
        running 播放
        paused 暂停
    */
}

<template>
    <div class="cards">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</template>

.cards{
    width: 200px;
    height: 200px;
    margin: auto;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
.box {
    width: 30px;
    height: 30px;
    position: absolute;
    border-radius: 50%;
    background: #ff99cc;
    box-shadow: inset -6px -3px 10px 0 rgba(255, 0, 128, 0.4);
    transform-origin: 60px center;
}

.box:nth-child(1) {
    animation: rotate 5s infinite linear;
}

.box:nth-child(2) {
    animation: rotate 5s infinite -1s linear;
}

.box:nth-child(3) {
    animation: rotate 5s infinite -2s linear;
}

.box:nth-child(4) {
    animation: rotate 5s infinite -3s linear;
}

.box:nth-child(5) {
    animation: rotate 5s infinite -4s linear;
}

@keyframes rotate {
    to {
        transform: rotate(1turn);
    }
}

2、@keyframes 多个动画效果的写法

@keyframes rotate {
    to{
        transform: rotate(1turn);       
    }
}
@keyframes fadeIn{
    to{
        opacity: 0.1;       
    }
}
@keyframes changebgcolor{
    to{
        background: #ffff00;        
    }
}
div {
    animation: rotate 2s, fadeIn 2s, changebgcolor 2s;
}

适用于CSS动画的属性

1、变形属性（Transform） transform: 支持平移（translate）、旋转（rotate）、缩放（scale）、倾斜（skew）等2D/3D变换，这些变换非常适合制作位移、旋转、变形等动画效果。

2、不透明度属性（Opacity） opacity: 控制元素的透明度，常用于实现淡入、淡出等过渡效果。

3、颜色与背景属性 color, background-color: 改变文字颜色或背景颜色，用于色彩渐变动画。 background-position: 适用于背景图平滑移动或切换动画。

4、边框与阴影属性 border-radius: 制作元素圆角变化动画。 box-shadow, text-shadow: 用于阴影效果的动态变化。

5、其他可动画属性 width, height: 改变元素尺寸。 top, right, bottom, left: 动态调整定位元素的位置。 font-size: 字体大小的变化动画。 filter: 应用滤镜效果（如模糊、灰度、饱和度等）的动画。

CSS 阴影

box-shadow 属性

box-shadow: h-offset v-offset blur spread color inset;

h-offset：阴影的水平偏移距离。

v-offset：阴影的垂直偏移距离。

blur：阴影的模糊半径。

spread：阴影的扩散大小。

color：阴影的颜色。

inset：可选，如果使用，表示内部阴影。

text-shadow 属性

text-shadow: h-offset v-offset blur color;

h-offset：阴影的水平偏移距离。

v-offset：阴影的垂直偏移距离。

blur：阴影的模糊半径。

color：阴影的颜色。

background 背景图片

1、background-color 背景颜色

2、background-image 属性用来设置背景图片

3、background-repeat 用来设置背景图片的重复模式

属性值

repeat：x、y均平铺(默认)

repeat-x：x平铺

repat-y：y平铺

no-repeat：不平铺

不平铺 no-repeat

y轴平铺 repeat-y

x轴平铺 repeat-x

x 和 y 轴平铺 repeat

<template>
    <div class="positiony">
        <div class="repeat_box1 positionx">不平铺 no-repeat</div>
        <div class="repeat_box2 positionx">y轴平铺 repeat-y</div>
        <div class="repeat_box3 positionx">x轴平铺 repeat-x</div>
        <div class="repeat_box4 positionx">x 和 y 轴平铺 repeat</div>
    </div>
</template>

<style>
  .positiony{
    display:flex;
    flex-wrap:wrap;
  }
  .positionx {
    width: 200px;
    height: 200px;
    border: 2px solid rgba(60, 60, 67, 0.29);
    background-image: url("../logo.svg");
    margin-left: 20px;
    text-align:center;
    margin:15px 20px 15px 0;
  }
  .repeat_box1 {
    background-repeat: no-repeat;
  }
  .repeat_box2 {
    background-repeat: repeat-y;
  }
  .repeat_box3 {
    background-repeat: repeat-x;
  }
  .repeat_box4 {
    background-repeat: repeat;
  }
</style>

4、backgroun-position 背景图片位置

/* x与盒子左边距离  Y与盒子上边距离 */
background-position: x y;
/* 百分比写法x% y% */
/* 左偏移量 = (容器width + 左右padding - 背景图片width) * 百分比 */
/* 右偏移量 = (容器height + 上下padding - 背景图片height) * 百分比 */
background-position: x% y%;
/* 单个值写法时 图片在垂直方向自动居中 */
background-position: 10%;

left top

left center

left bottom

right top

right center

right bottom

top center

center center

center

x y

x% y%

10%

<template>
<div class="positiony">
  <div class="position_box1 commonposition">left top</div>
  <div class="position_box2 commonposition">left center</div>
  <div class="position_box3 commonposition">left bottom</div>
  <div class="position_box4 commonposition">right top</div>
  <div class="position_box5 commonposition">right center</div>
  <div class="position_box6 commonposition">right bottom</div>
  <div class="position_box7 commonposition">top center</div>
  <div class="position_box8 commonposition">center center</div>
  <div class="position_box9 commonposition">center</div>
  <div class="position_box10 commonposition">x y</div>
  <div class="position_box11 commonposition">x% y%</div>
  <div class="position_box12 commonposition">10%</div>
</div>
</template>

<style>
  .commonposition {
    width: 110px;
    height: 100px;
    padding: 10px;
    border: 2px solid  rgba(60, 60, 67, 0.29);
    margin:15px 20px 15px 0;
    text-align: center;
    background-image: url('../logo.svg');
    background-repeat: no-repeat;
  }
  .position_box1 {
    background-position: left top;
  }
  .position_box2 {
    background-position: left center;
  }
  .position_box3 {
    background-position: left bottom;
  }
  .position_box4 {
    background-position: right top;
  }
  .position_box5 {
    background-position: right center;
  }
  .position_box6 {
    background-position: right bottom;
  }
  .position_box7 {
    background-position: top center;
  }
  .position_box8 {
    background-position: center center;
  }
  .position_box9 {
    background-position: center;
  }
  .position_box10 {
    background-position:10px 20px;
  }
  .position_box11 {
    background-position:10% 10%;
  }
  .position_box12 {
    background-position:10%;
  }
</style>

5、background-attachment 背景固定

属性值	说明
scroll	随内容一块滚动
fixed	固定，不随内容一块滚动
local	背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，同时背景图图片随着页面的滚动而滚动

6、background-size 背景尺寸

属性值	说明	实例
x y	x y 数值，分别表示背景图片宽高大小	background-size: 100px 200px;
x% y%	百分比是相对于盒子的宽高而言	background-size: 50% 20%;
x auto	auto 是相对于第一个值宽来自动缩放,第一个值可以是数值，也可以是百分形式	background-size: 100px auto;
contain	背景图片智能改变尺寸以容纳到盒子里，只是把图片放进去，长宽不会撑满适配	background-size: contain;
cover	背景图片同比例智能改变尺寸以撑满盒子	background-size: cover

<template>
  <div class="positiony">
    <div class="size_box1 commonsize"></div>
    <div class="size_box2 commonsize"></div>
    <div class="size_box3 commonsize"></div>
    <div class="size_box4 commonsize"></div>
    <div class="size_box5 commonsize"></div>
  </div>
</template>

<style>
  .commonsize {
    width: 200px;
    height: 200px;
    border: 2px solid rgba(60, 60, 67, 0.29);
    background-image: url('../logo.svg');
    background-repeat: no-repeat;
    margin:10px 10px 10px 0;
  }
  .size_box1 {
    background-size: 100px 200px;
  }
  .size_box2 {
    background-size: 50% 20%;
  }
  .size_box3 {
    background-size: 50% auto;
  }
  .size_box4 {
    background-size: contain;
  }
  .size_box5 {
    background-size: cover;
  }
</style>

7、background-clip

设置元素的背景(背景图片或颜色)是否延伸到“边框”、“内边距盒子”、“内容盒子”下面

属性值	说明
border-box	默认值。背景绘制在边框方框内。
padding-box	背景绘制在内边距方框内。
content-box	背景绘制在内容方框内。
text	背景被裁剪成文字的前景色。

8、background-origin

背景图片的定位区域

属性值	说明
padding-box	背景图片的摆放以 padding 区域为参考 默认值
border-box	背景图片的摆放以 border 区域为参考
content-box	背景图片的摆放以 content 区域为参考

<template>
  <div class="positiony">
    <div class="origin_box1 commonorigin"></div>
    <div class="origin_box2 commonorigin"></div>
    <div class="origin_box3 commonorigin"></div>
  </div>
</template>
<style type="text/css">
  .commonorigin {
    width: 100px;
    height: 100px;
    border: 50px solid rgba(0, 0, 0, 0.5);
    padding: 50px;
    background-image: url('../logo.svg');
    background-color: aquamarine;
    float: left;
    margin-right: 10px;
    background-repeat: no-repeat;
  }
  .origin_box1 {
    /* 背景图片的摆放以 padding 区域为参考  默认值 ; */
    background-origin: padding-box;
  }
  .origin_box2 {
    /* 背景图片的摆放以 border 区域为参考 */
    background-origin: border-box;
  }
  .origin_box3 {
    /* 背景图片的摆放以 content 区域为参考 */
    background-origin: content-box;
  }
</style>