zoukankan      html  css  js  c++  java
  • CSS3动画里的过渡效果

    过渡效果中有:

    1平滑效果

    2线性过渡

    3由慢到快

    4由快到慢

    5慢-快-慢  等等 具体参考 w3chool

    例如:

    <body>

        <div class="out">

          <div class="inner1">线性过渡</div>

          <div class="inner3">由慢到快</div>

          <div class="inner4">由快到慢</div>

          <div class="inner2">平滑过渡</div>

          <div class="inner5">由慢到快再到慢</div>

        </div>

    </body>

    CSS:

    .out {
      800px;
      padding: 1px;
      background-color: #999999;
      }
       
      .out div {
      100px;
      height: 100px;
      margin: 25px;
      background-color: #21bbca;
      font-size: 12px;
      text-align: center;
      line-height: 100px;
      }
       
      .inner1 {
      -webkit-transition: all 4s linear;
      }
      .inner2 {
      -webkit-transition: all 4s ease;
      }
      .inner3 {
      -webkit-transition: all 4s ease-in;
      }
      .inner4 {
      -webkit-transition: all 4s ease-out;
      }
      .inner5 {
      -webkit-transition: all 4s ease-in-out;
      }
       
      .out:hover div {
      margin-left: 75%;
      -webkit-transform: rotate(360deg);
      border-radius: 50%;
     
  • 相关阅读:
    内部类
    抽象类与接口
    多态
    继承
    封装
    创建对象的内存分析
    构造器
    面向对象 类与对象
    uniapp跳转
    uniapp-组件引用错误,仅支持 import 方式引入组件
  • 原文地址:https://www.cnblogs.com/tk900123/p/4643927.html
Copyright © 2011-2022 走看看