10、css3渐变、转换（扭曲、平移、旋转）、过渡、分页、动画

渐变

渐变：两个或者多个颜色之间平稳过渡

渐变的属性名：`background-image`

渐变的分类：

线性渐变:

background-image:liner-gradient(颜色，颜色) 向下/向上/向左/向右/对角
方向的使用方法：1、方位名字2、角度单位是deg
角度

 <style>
		background-image: linear-gradient(
			to left,
       	 	hsl(0, 100%, 50%),
        	blue);
        background-image: linear-gradient(
          to right bottom,
          hsl(0, 100%, 50%),
          blue
        );
</style>复制

径向渐变:从圆心向四周发射

background-image:radial-gradient(颜色，颜色)
从圆心向四周发射circle表示圆以ellipse表示椭圆形。默认值是el1ipse

 <style>
background-image: radial-gradient(
          circle,
          red 5%,
          yellow 10%,
          green 60%
        );
</style>复制

渐变框

 <style>
        div{
            margin: 100px auto;
            width: 100px;
            height: 100px;
            /* border: 2px solid red; */
            background: linear-gradient(to bottom,red,blue,blue,red) no-repeat;
            background-position: right;
            /* 宽度  高度 */
            background-size: 2px 100px;
        }
</style>
<body>
<div></div>
</body>复制

CSS3的转换`transform`

缩放拉伸 `transform:scale(x,y)`

transform:scale(x,y);宽高倍数，没有单位
transform:scaleX(数字); 宽度的倍数
transform:scaleY(数字); 高度的倍数

扭曲

transform:skew(X,y)x水平方向，y垂直方向，正负是正反方向(以盒子的右下角为基准，向右和向下是正方向)
transform:skewX(角度+deg)x水平方向
transform:skewY(角度+deg)y垂直方向

平移

transform:translate(x,y)x水平方向，y垂直方向，正负是正反方向（水平向右和垂直向下是正方向，水平向左和垂直向上是反方向）
transform:translateX(数字+px)x水平方向
transform:translateY(数字+px)y垂直方向
transform:translateZ(数字+px)Z方向正负是正反方向（正值是距离面部近，负值距离面部远）

旋转

添加3D透视度 perspective: 2000px;
设置为3D转换transform-style: preserve-3d;

设置旋转轴心（默认是盒子右下角）
transform-origin:right top;
rotate单位是deg正数是顺时针，负数是逆时针
transform:rotate(数字+deg)单位是deg止数是顺时针，负数是逆时针
transform:rotateX()沿着X轴旋转角度不加引号
transform:rotateY()沿着Y轴旋转

     <style>
        * {
            margin: 0;
            padding: 0;
        }
        .box {
            position: relative;
            border: 3px solid black;
            left: 400px;
            /* 添加3D透视度 */
            perspective: 2000px;
            /* 设置为3D转换 */
            transform-style: preserve-3d;
        }
        .box>div {
            position: absolute;
            left: 10px;
            top: 400px;
            width: 400px;
            height: 150px;
            /* 文字居中 */
            text-align: center;
            line-height: 150px;
            font-size: 30px;
        }
         /* 我是前面盒子 */
        .greenBox {
            background-color: green;
            transform: translateZ(200px);
        }
        /* 我是后面盒子 */
        .redBox {
            background-color: red;
            transform: translateZ(-200px);
        }
        /* 我是左面盒子 */
        .blueBox {
            background-color: blue;
            /* 旋转+平移(面对盒子) */
            transform: rotateY(90deg) translateZ(-200px);
        }
        /* 我是右面盒子 */
        .yellownBox {
            background-color: yellow;
            transform: rotateY(90deg) translateZ(200px);
        }
    </style>
<body>
    <div class="box">
        <div class="greenBox">我是前面盒子</div>
        <div class="redBox">我是后面盒子</div>
        <div class="blueBox">我是左面盒子</div>
        <div class="yellownBox">我是右面盒子</div>
    </div>
</body>复制

# 过渡`transition ` ## 元素从一种形态**逐渐**变成另一种形态的过程 ## 过渡的两大条件与`hover`一起用 - 过渡的`css`属性 - 过渡的时间周期 ## 过渡的css属性名 `transition` ```html

```

动画

设置动画属性

设置动画属性：

动画的名称animation-name: firstAnimate;
动画的时间周期animation-duration: 8s;
动画的时间速度曲线animation-timing-function: linear;
动画的延迟animation-delay: 1s;
动画的次数animation-iteration-count: 2;
动画的暂停animation-play-state: paused;
- 给谁加的动画给谁暂停

创建动画

@keyframs 动画名称{ }

 <style>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .parent {
        position: relative;
        margin: auto;
        width: 1200px;
        height: 650px;
        border: 10px solid blue;
      }
      .child {
        position: absolute;
        width: 100px;
        height: 100px;
        background-color: red;
        text-align: center;
        line-height: 100px;
        color: #fff;
        font-size: 20px;
          
          /*动画的名称*/
        animation-name: firstAnimate;
          /*动画的时间周期*/
        animation-duration: 8s;
          /*动画的时间速度曲线*/
        animation-timing-function: linear;
          /*动画的延迟*/
        animation-delay: 1s;
          /*动画的次数*/
        animation-iteration-count: 2;
         /* 无限次 */
        animation-iteration-count: infinite;
        /* animation-play-state: running; */
      }
      .child:hover {
        animation-play-state: paused;
      }
      /* 
          二、创建动画
          @keyframs 动画名称
       */
      @keyframes firstAnimate {
        /* 开始到结束 两种方法 */
        /* from {
          left: 0;
          top: 0;
        }
        to {
          left: 1100px;
          top: 0;
        } */
          
        0% {
          /* left: 0;
          top: 0; */
          transform: translate(0, 0);
          font-size: 10px;
        }
        25% {
          /* left: 1100px;
          top: 0; */
          transform: translate(1100px, 0) rotate(360deg);
          font-size: 28px;
          color: green;
        }
        50% {
          /* left: 1100px;
          top: 550px; */
          transform: translate(1100px, 550px) rotate(720deg);
          font-size: 10px;
          color: orange;
        }
        75% {
          /* left: 0;
          top: 550px; */
          transform: translate(0, 550px) rotate(1080deg);
          font-size: 28px;
          color: gray;
        }
        100% {
          /* left: 0;
          top: 0; */
          transform: translate(0, 0) rotate(1440deg);
          font-size: 10px;
          color: darkblue;
        }
      }
    </style>
  <body>
    <div class="parent">
      <div class="child">web前端</div>
    </div>
  </body>复制

	<style>
	background-image: linear-gradient(
	to left,
	hsl(0, 100%, 50%),
	blue);
	background-image: linear-gradient(
	to right bottom,
	hsl(0, 100%, 50%),
	blue
	);
	</style>

	<style>
	background-image: radial-gradient(
	circle,
	red 5%,
	yellow 10%,
	green 60%
	);
	</style>

	<style>
	div{
	margin: 100px auto;
	width: 100px;
	height: 100px;
	/* border: 2px solid red; */
	background: linear-gradient(to bottom,red,blue,blue,red) no-repeat;
	background-position: right;
	/* 宽度高度 */
	background-size: 2px 100px;
	}
	</style>
	<body>
	<div></div>
	</body>

	<style>
	* {
	margin: 0;
	padding: 0;
	}
	.box {
	position: relative;
	border: 3px solid black;
	left: 400px;
	/* 添加3D透视度 */
	perspective: 2000px;
	/* 设置为3D转换 */
	transform-style: preserve-3d;
	}
	.box>div {
	position: absolute;
	left: 10px;
	top: 400px;
	width: 400px;
	height: 150px;
	/* 文字居中 */
	text-align: center;
	line-height: 150px;
	font-size: 30px;
	}
	/* 我是前面盒子 */
	.greenBox {
	background-color: green;
	transform: translateZ(200px);
	}
	/* 我是后面盒子 */
	.redBox {
	background-color: red;
	transform: translateZ(-200px);
	}
	/* 我是左面盒子 */
	.blueBox {
	background-color: blue;
	/* 旋转+平移(面对盒子) */
	transform: rotateY(90deg) translateZ(-200px);
	}
	/* 我是右面盒子 */
	.yellownBox {
	background-color: yellow;
	transform: rotateY(90deg) translateZ(200px);
	}
	</style>
	<body>
	<div class="box">
	<div class="greenBox">我是前面盒子</div>
	<div class="redBox">我是后面盒子</div>
	<div class="blueBox">我是左面盒子</div>
	<div class="yellownBox">我是右面盒子</div>
	</div>
	</body>