【实习第十三天】动画

最新推荐文章于 2024-10-01 22:08:10 发布

夜色已晚

最新推荐文章于 2024-10-01 22:08:10 发布

阅读量141

点赞数

文章标签： css3 动画 css

本文链接：https://blog.csdn.net/weixin_48000103/article/details/128165621

版权

1.隐藏写法

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 需求1：小球能从左侧移动右侧 -->
    <!-- 需求2:小球从左侧移到右侧，来回3次 -->
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 600px;
        height: 400px;
        border: 10px solid #f60;
        overflow: hidden;
      }
      .box2 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #bfa;
      }
      .box3 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
      }
      /* 第一步：设置关键帧 */
      @keyframes ball {
        /* 第二种写法 */
        0% {
          margin-left: 0;
          margin-top: 0;
        }
        100% {
          margin-top: 0;
          margin-left: 500px;
        }
        /* 50% {
          margin-top: 300px;
          margin-left: 500px;
        } */
        /* 75% {
          margin-top: 300px;
          margin-left: 0px;
        }
        100% {
          margin-left: 0;
          margin-top: 0;
        } */
      }
      /* 第二步：调用关键帧 */
      .box2 {
        /* 动画的名字 （必写） */
        /* animation-name: ball; */
        /* 执行动画动画 （必写）*/
        /* animation-duration: 3s; */
        /* 执行动画的函数过程 */
        /* animation-timing-function: ease; */
        /* 动画延迟执行 */
        /* animation-delay: 2s; */
        /* 动画执行次数 */
        /* animation-iteration-count: 1; */
        /* animation-direction: alternate-reverse ; */
        /* animation-fill-mode: both; */

        /* 动画简写 */
        animation: ball 2s infinite alternate linear;
      }
      .box1:hover > .box2 {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <!-- <div class="box3"></div> -->
    </div>
  </body>
</html>

2.过渡

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 需求1:鼠标移入，box1宽度由100px变为200px -->
    <!-- 需求2:鼠标移入，box1宽度由100px缓慢变为200px -->
    <style>
      .box1{
        width: 100px;
        height: 100px;
        background-color: red;
        /* 指定哪些属性需要过度 */
        /* transition-property: all; */
        /* 过度的时间 */
        /* transition-duration: 1000ms; */
        /* 过度的曲线变化 */
        /* transition-timing-function:linear; */
        transition: all 2s linear 2s;

      }
      .box1:hover{
        width: 500px;
        height: 200px;
        background-color: green;

      }
    </style>
  </head>
  <body>
    <div class="box1"></div>
  </body>
</html>
<!-- 
    过渡（transition）[træn'siʒən]
        -通过过渡可以指定一个属性发生变化时的切换方式
        -在某种条件下可以触发，例如hover情况下
        -IE10开始兼容，移动端兼容良好
        -通过过渡可以创建一些非常好的效果，提升用户体验
    属性（4个）
    (1)transition-property ['prɔpəti] 指定执行过渡的属性，多个属性，使用逗号隔开，
    (2)transition-duration [djuə'reiʃən] 指定过渡效果的持续时间
    (3)transition-timing-function: ;过渡的时序函数
    (4)transition-delay: ;过渡效果的延迟，等待一段时间后执行过渡     
    (5)transition：；可以同时设置过渡相关的所有属性，
         只有一个要求，如果要写延迟，则两个时间中,第一个写延迟，第二个写持续时间    
 -->

3.过渡曲线变化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            list-style: none;
            padding: 0;
            margin: 0;
        }
        ul{
            width: 400px;
            border: 10px solid green;
        }
        li{
            width: 50px;
            height: 50px;
            background-color: red;
            margin-bottom: 5px;
            transition-property: all;
            transition-duration: 2s;
            transition-delay: 3s;
        }
        li:nth-child(1){
            transition-timing-function: ease;
        }
        li:nth-child(2){
            transition-timing-function: linear;
        }
        li:nth-child(3){
            transition-timing-function: ease-in ;
        }
        li:nth-child(4){
            transition-timing-function:ease-out ;
        }
        li:nth-child(5){
            transition-timing-function:steps(4) ;
        }
        li:nth-child(6){
            transition-timing-function:ease-in-out ;
        }


        ul:hover>li{
            margin-left: 350px;
        }
    </style>
</head>
<body>
    <ul>
        <li>ease</li>
        <li>linear</li>
        <li>ease-in</li>
        <li>ease-out</li>
        <li>steps(4)</li>
        <li> ease-in-out </li>
    </ul>
    
</body>
</html>

4.实现下拉效果

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
      }
      #down {
        width: 300px;
        margin: 50px auto;
      }
      .list {
        width: 200px;
        height: 0px;
        background-color: pink;
        transition: all 2s linear ;
      }
      a:hover >.list {
          height: 200px;
      }
    </style>
  </head>
  <body>
    <div id="down">
      <a href="#">下载app
        <div class="list"></div>
      </a>
    </div>
  </body>
</html>

5.动画

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 需求1：小球能从左侧移动右侧 -->
    <!-- 需求2:小球从左侧移到右侧，来回3次 -->
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 600px;
        height: 400px;
        border: 10px solid #f60;
      }
      .box2 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #bfa;
      }
      .box3 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
      }
      /* 第一步：设置关键帧 */
      @keyframes ball {
        /* 第一种写法 */
        form{
          margin-left: 0px;

        }
        to{
          margin-left: 500px;
        }
        
      }
      /* 第二步：调用关键帧 */
      .box2{
        /* 动画的名字 */
        animation-name:ball ;
        /* 执行动画动画 */
        animation-duration: 2s;
      }


    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <!-- <div class="box3"></div> -->
    </div>
  </body>
</html>

6.动画2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 需求1：小球能从左侧移动右侧 -->
    <!-- 需求2:小球从左侧移到右侧，来回3次 -->
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      .box1 {
        width: 600px;
        height: 400px;
        border: 10px solid #f60;
        overflow: hidden;
      }
      .box2 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #bfa;
      }
      .box3 {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: red;
      }
      /* 第一步：设置关键帧 */
      @keyframes ball {
        /* 第二种写法 */
        0% {
          margin-left: 0;
          margin-top: 0;
        }
        100% {
          margin-top: 0;
          margin-left: 500px;
        }
        /* 50% {
          margin-top: 300px;
          margin-left: 500px;
        } */
        /* 75% {
          margin-top: 300px;
          margin-left: 0px;
        }
        100% {
          margin-left: 0;
          margin-top: 0;
        } */
      }
      /* 第二步：调用关键帧 */
      .box2 {
        /* 动画的名字 （必写） */
        /* animation-name: ball; */
        /* 执行动画动画 （必写）*/
        /* animation-duration: 3s; */
        /* 执行动画的函数过程 */
        /* animation-timing-function: ease; */
        /* 动画延迟执行 */
        /* animation-delay: 2s; */
        /* 动画执行次数 */
        /* animation-iteration-count: 1; */
        /* animation-direction: alternate-reverse ; */
        /* animation-fill-mode: both; */

        /* 动画简写 */
        animation: ball 2s infinite alternate linear;
      }
      .box1:hover > .box2 {
        animation-play-state: paused;
      }
    </style>
  </head>
  <body>
    <div class="box1">
      <div class="box2"></div>
      <!-- <div class="box3"></div> -->
    </div>
  </body>
</html>