渐变/过渡/2D变换/3D变换/动画

最新推荐文章于 2022-08-03 17:50:59 发布

喵帕斯_喵太

最新推荐文章于 2022-08-03 17:50:59 发布

阅读量221

点赞数

分类专栏：前端基础文章标签： css3

本文链接：https://blog.csdn.net/miaopasi_poi/article/details/115324291

版权

前端基础专栏收录该内容

10 篇文章 0 订阅

订阅专栏

线性渐变

效果图如下①：
在这里插入图片描述

代码如下：

    <style>
        .box{
            width: 330px;
            height: 300px;
            border: 1px solid #000;
            /* 颜色可以填两种以上，但是注意百分比 */
            background-image: linear-gradient(to top,pink 50%,red); 
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

效果图②：
在这里插入图片描述
代码如下：

    <style>
        .box {
            width: 330px;
            height: 300px;
            border: 1px solid #000;
            background-image: linear-gradient(0deg, pink, red);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

过渡

在这里插入图片描述
transition-duration指定变化过程持续的时间，单位是 s ，意思是秒。该属性为必填属性

transition: all 1s linear 2s; /此处为常规复合写法

进度条下拉菜单列表过渡演示

进度条示例：
在这里插入图片描述
代码如下：

    <style>
        .box{
            width: 300px;
            height: 30px;
            border-radius: 15px;
            border: 1px solid red;
            /*由于box的子级元素box01没有给 border-radius 命令。所以这里需要超出并隐藏。*/
            overflow: hidden;
        }
        .box01{
        /*过渡类型一般都是以百分比来显示。*/
            width: 10%;
            height: 30px;
            background-color: red;
            transition: 2s;
        }
        .box:hover .box01{
            width: 100%;
        }

    </style>
</head>
<body>
    <div class="box">
        <div class="box01"></div>
    </div>
</body>
</html>

下拉列表过渡演示

示例：
在这里插入图片描述
代码示例：

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            position: relative;
            margin: 300px auto 0;
            width: 300px;
            height: 50px;
        }

        .box01 {
            text-align: center;
            background-color: sandybrown;
            line-height: 50px;
        }

        .box02 {
            /* 高度为零 */
            height: 0px;
            /* 列表高度为0后 需要超出隐藏 */
            overflow: hidden;
            background-color: skyblue;
            line-height: 50px;
            text-align: center;
            transition: 2s;
            /* 定位后变成行内块元素所以需要手动再给宽度 */
            position: absolute;
            z-index: 99;
            width: 100%;
        }
  
         /* 鼠标碰到box时候让里面的 box02执行高度加150px操作,显示里面的文字 */
        .box:hover .box02 {
            height: 150px;
        }

        /* 测试项 */
        .text {
            margin: 0 auto;
            height: 500px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="box01">你喜欢吃什么</div>
        <div class="box02">
            <ul>
                <Li>榴莲</Li>
                <Li>鲱鱼罐头</Li>
                <Li>菠萝蜜</Li>
            </ul>
        </div>
    </div>
    <div class="text"></div>

</body>

</html>

注意：此种类型的过渡效果，都要添加定位属性，并且进行权重分配 z-index: 99; 避免下拉列表被其他元素覆盖。

2D变换旋转

示例①：
在这里插入图片描述
示例代码：

    <style>
        .box {
            margin: 300px auto 0;
            width: 300px;
            height: 300px;
            transition: 2s;
            background-color: aqua;
        }

        .box:hover {
            /* 旋转角度 */
            transform: rotate(60deg);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

2D 变换缩放

示例②：
在这里插入图片描述
代码示例：

    <style>
        .box {
            margin: 300px auto;
            width: 300px;
            height: 300px;
            transition: 2s;
            background-color: aqua;
        }

        .box:hover {
            /* 整体缩放(倍数) */
            /* transform: scale(1,1); 代表一个X轴缩放，一个Y轴缩放 */
            transform: scale(1.1);
            box-shadow: -1px -1px 20px 3px black;
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

2D变换移动

示例③：
在这里插入图片描述
代码示例：

    <style>
        .box {
            margin: 300px auto 0;
            width: 300px;
            height: 300px;
            background-color: aqua;
            transition: 1s;
        }

        .box:hover {
            /* transform: translate(水平，垂直); */
            transform: translate(0, -50px);
        }
    </style>
</head>

<body>
    <div class="box"></div>
</body>

</html>

2D变换居中

示例④：
在这里插入图片描述
代码示例：

    <style>
        .box {
            margin: 300px auto;
            width: 300px;
            height: 300px;
            background-color: aqua;
            position: relative;
        }

        .play {
            width: 50px;
            height: 50px;
            background-color: red;
            position: absolute;
            top: 50%;
            left: 50%;
            /* 换换移动是相较于自身移动，所以可以直接-50%进行居中 */
            transform: translate(-50%, -50%);
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="play"></div>
    </div>
</body>

</html>

2D旋转 rotate

  div {
      transform-origin:0 0;
      transform-origin:left top;
      transform-origin:50% 0;
    }

三种不同书写方式，都是让物体按照某个点来进行旋转。

2D变换可以同时使用移动，旋转，和缩放

transform: translate(20px, 40px) rotate(30deg) scale(2, 2);

但是注意：改变形式会根据书写顺序而产生变化。每段代码中间用空格隔开

3D变换坐标系translate

在这里插入图片描述
面向屏幕的方向为+Z轴(就是屏幕指向自己的方向），屏幕背面相当于-Z

在这里插入图片描述
默认情况下我们是看不到标签在 Z轴上的变化的,只有给目标标签添加透视后才能生效,一般添加 1000px

注意：透视都是给被观察的目标标签的父元素添加
代码示例：

    <style>
      body {
       /*（单独书写透视不需要（ 包住所设的值））*/
        perspective: 1000px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto 0;
        /* perspective 透视，在平面内呈现立体的视觉效果，主要特征：近大远小 */
        /* 先添加透视后，在浏览器调试 z轴 的移动 */
        transform: translate3d(0px, 0px, 100px);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

补充： transform: perspective(1000px) translate3d(0px,0px,0px);（（复合写法要包起来））

transform-style: preserve-3d;(开启3D视觉效果）

透视在什么时候才需要添加，给谁添加，添加多少

想要看到元素在z轴上的效果的时候添加
给目标元素的父元素添加
一般添加 1000px

旋转Z轴

    <style>
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto 0;
        transform: rotateZ(0deg);
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

旋转X轴

      body {
        perspective: 1000px;
      }
      .box {
        width: 200px;
        line-height: 200px;
        background-color: pink;
        margin: 100px auto 0;
        font-size: 100px;
        text-align: center;
        transform: rotateX(50deg);
      }
    </style>
  </head>
  <body>
    <div class="box">X轴</div>
  </body>
</html>

旋转Y轴

    <style>
      body {
        perspective: 1000px;
      }
      .box {
        width: 200px;
        height: 200px;
        background-color: pink;
        margin: 100px auto 0;
        transform: rotateY(50deg);
      }
    </style>
  </head>
  <body>
    <div class="box">Y轴</div>
  </body>
</html>

3D立方体六面案例

图片示例：
代码示例：

    <style>
      .cube {
        width: 200px;
        height: 200px;
        /* border: 1px solid #000; */
        margin: 100px auto 0;
        position: relative;
        /* perspective: 1000px; */
        /* 1. 必须开启 3d 呈现 */
        transform-style: preserve-3d;
        transform: rotateX(345deg) rotateY(345deg);
      }
      .cube div {
        width: 200px;
        height: 200px;
        position: absolute;
        opacity: 0.7;
        font-size: 50px;
      }
      /* 前面：往前移动 Z 轴 */
      .cube .front {
        background-color: red;
        transform: translateZ(100px);
      }
      /* 后面：往负方向移动 Z 轴，旋转180度处理文字方向 */
      .cube .back {
        background-color: hotpink;
        transform: translateZ(-100px) rotateY(180deg);
      }
      .cube .left {
        background-color: tan;
        transform: translateX(-100px) rotateY(270deg);
      }
      .cube .right {
        background-color: teal;
        transform: translateX(100px) rotateY(90deg);
      }
      .cube .top {
        background-color: tomato;
        transform: translateY(-100px) rotateX(90deg);
      }
      .cube .bottom {
        background-color: aqua;
        transform: translateY(100px) rotateX(270deg);
      }
    </style>
  </head>
  <body>
    <!-- 立方体 -->
    <div class="cube">
      <div class="front">前面</div>
      <div class="back">后面</div>
      <div class="left">左面</div>
      <div class="right">右面</div>
      <div class="top">上面</div>
      <div class="bottom">下面</div>
    </div>
  </body>
</html>

3D缩放scale

在这里插入图片描述

注意：
缩放不需要添加单位
普通div没有厚度，只有立方体才会厚度
3D导航栏案例

效果图示例①：
在这里插入图片描述
代码示例：

    <style>
      * {
        margin: 0;
        padding: 0;
      }

      li {
        list-style: none;
      }

      a {
        text-decoration: none;
        color: #fff;
      }

      .nav {
        width: 300px;
        height: 40px;
        background-color: pink;
        margin: 100px auto;
      }

      .nav li {
        position: relative;
        width: 100px;
        height: 40px;
        float: left;
        text-align: center;
        line-height: 40px;

        /* 开启3d呈现 */
        transform-style: preserve-3d;
        /* transform: rotateX(345deg) rotateY(345deg); */
        transition: 0.4s;
      }

      /* 鼠标悬停效果：确定坐标轴后，调整角度 */
      .nav li:hover {
        transform: rotateX(-90deg);
      }

      .nav li a {
        /* 这里定位的是a标签，所以需要重新给到a标签宽高 */
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 40px;
      }
      /* 参考之前立方体的：前面 */
      .nav li a:nth-child(1) {
        background-color: indianred;
        transform: translateZ(20px);
      }
      /* 参考之前立方体的：上面 */
      .nav li a:nth-child(2) {
        background-color: tan;
        transform: translateY(-20px) rotateX(90deg);
      }
    </style>
  </head>

  <body>
    <div class="nav">
      <ul>
        <li>
          <a href="#">首页</a>
          <a href="#">Index</a>
        </li>
        <li>
          <a href="#">首页2</a>
          <a href="#">Index2</a>
        </li>
        <li>
          <a href="#">首页3</a>
          <a href="#">Index3</a>
        </li>
      </ul>
    </div>
  </body>
</html>

阴阳师二维码案例

效果图示例：

在这里插入图片描述
代码示例：

        @keyframes a1 {
            0% {
                transform: translateY(10px);
            }

            100% {
                transform: translateY(200px);
            }

        }

        .box {
            position: relative;
            width: 200px;
            height: 200px;
        }

        .box img {
            width: 200px;
            height: 200px;
        }

        .box2 {
            position: absolute;
            width: 200px;
            height: 2px;
            background-color: black;
            animation: a1 1s linear infinite alternate;
        }
    </style>
</head>

<body>
    <div class="box">
        <img src="./images/yys.png" alt="">
        <div class="box2"></div>
    </div>
</body>

</html>

走马灯效果图

效果图示例：

在这里插入图片描述
代码示例：

        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            margin: 100px auto;
            /* 盒子只需要给第一组的宽度 */
            width: 882px;
            height: 86px;
            overflow: hidden;
        }

        .box li {
            float: left;
        }

        @keyframes a3 {
            0% {
                transform: translateX(0px);
            }

            100% {
                /* 这里只需要走第一组轮播图的一半50%*/
                transform: translateX(-50%);
            }
        }

        .box ul {
            animation: a3 3s linear infinite;
            /* 轮播图 图片要放两份 所以是box两倍 */
            width: 200%;
            height: 86px;
        }
        .box:hover ul{
            /* 鼠标移入ul时候暂停 */
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <!-- 轮播图这里要放两组才能实现无缝对接 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
            <!-- 后面是顶替前面的 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>

    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        .box {
            margin: 100px auto;
            /* 盒子只需要给第一组的宽度 */
            width: 882px;
            height: 86px;
            overflow: hidden;
        }

        .box li {
            float: left;
        }

        @keyframes a3 {
            0% {
                transform: translateX(0px);
            }

            100% {
                /* 这里只需要走第一组轮播图的一半50%*/
                transform: translateX(-50%);
            }
        }

        .box ul {
            animation: a3 3s linear infinite;
            /* 轮播图 图片要放两份 所以是box两倍 */
            width: 200%;
            height: 86px;
        }
        .box:hover ul{
            animation-play-state: paused;
        }
    </style>
</head>

<body>
    <div class="box">
        <ul>
            <!-- 轮播图这里要放两组才能实现无缝对接 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
            <!-- 后面是顶替前面的 -->
            <li><img src="./images/1.jpg" alt=""></li>
            <li><img src="./images/2.jpg" alt=""></li>
            <li><img src="./images/3.jpg" alt=""></li>
            <li><img src="./images/4.jpg" alt=""></li>
            <li><img src="./images/5.jpg" alt=""></li>
            <li><img src="./images/6.jpg" alt=""></li>
            <li><img src="./images/7.jpg" alt=""></li>
        </ul>
    </div>
</body>

</html>

动画

在这里插入图片描述
补充：reverse （会让图片倒着走）animation-play-state: paused;(一般配后hover使用，让鼠标移入时候暂停动画）&& forwards会让动画停留在最后一帧。

动画案例

精神小伙

*素材在这里插入图片描述
代码示例：

      @keyframes a5 {
        100% {
          background-position: -1472px 0;
        }
      }
      .boy {
        /* 🎉注意： calc() 计算函数 */
        width: calc(1472px / 8);
        height: 325px;
        background: url(./images/精神小伙.jpg) no-repeat;
        /* steps(8) 八张图片，一共分为 8 步 */
        animation: a5 0.1s steps(8) infinite;
      }
    </style>
  </head>
  <body>
    <div class="boy"></div>
  </body>
</html>

气泡上浮效果图

效果图示例：
在这里插入图片描述
代码示例：

    <style>
        html,
        body {
            height: 100%;
        }

        * {
            margin: 0;
            padding: 0;
        }

        body {
            position: relative;
        }

        .bubble {
            animation: bubble 1.5s linear infinite;
            position: absolute;
            bottom: 40px;
            right: 40px;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            opacity: 0;
        }

        .bubble:first-child {
            background-color: blue;
        }

        .bubble:nth-child(2) {
            background-color: green;
            animation-delay: 0.2s;
        }

        .bubble:nth-child(3) {
            background-color: orange;
            animation-delay: 0.4s;
        }

        .bubble:nth-child(4) {
            background-color: red;
            animation-delay: 0.6s;
        }

        .bubble:nth-child(5) {
            background-color: yellow;
            animation-delay: 0.8s;
        }

        .bubble:nth-child(6) {
            background-color: blue;
            animation-delay: 1s;
        }

        .bubble:nth-child(7) {
            background-color: pink;
            animation-delay: 1.2s;
        }

        .bubble:nth-child(8) {
            background-color: red;
            animation-delay: 1.4s;
        }

        .bubble:nth-child(9) {
            background-color: orange;
            animation-delay: 1.6s;
        }

        .bubble:nth-child(9) {
            background-color: red;
            animation-delay: 1.8s;
        }


        @keyframes bubble {
            0% {
                opacity: 1;
                transform: scale(0.3) translate(0);
            }

            8% {
                transform: scale(0.6) translate(-6px, -33px);
            }

            16% {
                transform: scale(0.9) translate(6px, -66px);
            }

            25% {
                transform: scale(1) translate(-8px, -100px);
            }

            50% {
                transform: scale(1) translate(8px, -200px);
            }

            75% {
                transform: scale(1) translate(-12px, -300px);
                opacity: 1;
            }

            100% {
                opacity: 0;
                transform: scale(1) translate(12px, -400px);
            }
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
        <div class="bubble"></div>
    </div>
</body>

</html>

动画属性-逆向播放

    <style>
      /* 1. 定义帧 - 画面 */
      @keyframes a1 {
        0% {
          width: 100px;
          background-color: hotpink;
        }
        100% {
          width: 1000px;
          background-color: hotpink;
        }
      }
      .box {
        /* 2. 调用动画1 */
        animation: a1 2s ease 0s infinite normal;
      }
      .box2 {
        /* 2. 调用动画2 */
        animation: a1 2s ease 0s infinite alternate;
        /*
          在下一周期逆向播放动画
            animation-direction: alternate; 
        */
      }
    </style>
  </head>
  <body>
    <div class="box">盒子1</div>
    <div class="box2">盒子2</div>
  </body>
</html>

注意：alternate 就是会让动画按照原效果倒退回去播放一次

-动画属性-播放次数

    <style>
      /* 1. 定义帧 - 画面 */
      @keyframes a1 {
        0% {
          width: 100px;
          background-color: hotpink;
        }
        100% {
          width: 1000px;
          background-color: hotpink;
        }
      }
      .box {
        /* 2. 调用动画1 */
        animation: a1 2s ease 0s 1;
      }
      .box2 {
        /* 2. 调用动画2 */
        animation: a1 2s ease 0s infinite;
        /* animation-iteration-count: infinite; */
      }
    </style>
  </head>
  <body>
    <div class="box">盒子1</div>
    <div class="box2">盒子2</div>
  </body>
</html>

注意：复合写法下同时写两个带有 s （时间属性秒)第一个代表多长时间走完一轮动画，第二个代表延时多久启动动画效果。（如果单独拿出来在某一项调用的话需要这样写：animation-delay: 1s;）;如果出现 1s 1；这种写法代表 1s 多久走完一次动画， 1 代表动画执行次数。一般设为2 可以搭配 alternate 使用，是动画产生返回效果刚好执行一次完整的出去，倒退回来。

喵帕斯_喵太

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
渐变/过渡/2D变换/3D变换/动画

线性渐变效果图如下①：代码如下： <style> .box{ width: 330px; height: 300px; border: 1px solid #000; /* 颜色可以填两种以上，但是注意百分比 */ background-image: linear-gradient(to top,pink 50%,red); ..
复制链接

扫一扫