首页 前端知识 10、css3渐变、转换(扭曲、平移、旋转)、过渡、分页、动画

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

2024-08-07 00:08:50 前端知识 前端哥 991 682 我要收藏

渐变

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

渐变的属性名:background-image

渐变的分类:

线性渐变:

  • background-image:liner-gradient(颜色,颜色) 向下/向上/向左/向右/对角

  • 方向的使用方法:1、方位名字2、角度单位是deg

  • 角度

    image-20240109200231234

<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>
image-20240109130946380 # 过渡`transition ` ## 元素从一种形态**逐渐**变成另一种形态的过程 ## 过渡的两大条件 与`hover`一起用 - 过渡的`css`属性 - 过渡的时间周期 ## 过渡的css属性名 `transition` ```html
  • <
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • >
```

image-20240109145617267

动画

设置动画属性

设置动画属性:

  • 动画的名称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>

image-20240109154929483

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14916.html
标签
评论
发布的文章

前端-axios应用在html文件

2024-08-15 23:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!