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

@zyf哈哈哈哈

已于 2024-02-19 16:44:40 修改

阅读量1.4k

点赞数 41

文章标签： css3 前端 css

于 2024-01-09 19:59:17 首次发布

本文链接：https://blog.csdn.net/m0_58779986/article/details/135488637

版权

渐变

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

渐变的属性名：`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>