zoukankan      html  css  js  c++  java
  • 形变-动画-表格

    <!DOCTYPE html>

    <html>

    <head>

    <meta charset="UTF-8">

    <title>形变-动画-表格</title>

    </head>

    <body>

      <!--1.形变-->

      <style>

      .box { transition: 1s; }

      .box:hover {

      /旋转 deg/

      transform: rotateZ(720deg);

      /偏移 px/ transform: translateX(100px) translateY(100px);

      /缩放无单位/ transform: scale(2, 0.5);

             /*三种形变本质都是对transform属性进行设置,如果具有多种形变属性,

            设置给一条属性, 直接用空格隔开, 且顺序一般也会影响最终效果*/

            transform: rotateZ(720deg) translateX(100px) translateY(100px) scale(2, 0.5);

            /*形变会产生图层位置变化,但不影响盒子位置*/

            /*形变一般不用于布局, 用于盒子动画特效*/

        }

      </style>

      

      <!--2.动画-->

      <style>

          /*1.设置动画体*/

          @keyframes moving {

              0% {

                  /*起点*/

                  margin-left: 0;

                  margin-top: 0;

              }

              33.3% {

                  margin-left: 800px;

                  margin-top: 0;

              }

              /*强调: 在任何动画节点中,均要对每一个动画的属性进行值的明确*/

              66.6% {

                  margin-left: 400px;

                  margin-top: 400px;

              }

              100% {

                  /*终点*/

                  margin-left: 0;

                  margin-top: 0;

              }

          }

          /*2.设置动画属性*/

          .box {

              /*animation-name: moving;*/

              /*动画名 一次动画时间 循环次数 运动曲线*/

              animation: moving 1s infinite ease;

          }

      </style>

      <!--3.表格-->

      <table border="1" cellspacing="0" cellpadding="10" rules="all">

          <caption>表格标题</caption>

          <thead>

              <tr>

                  <th>标题</th>

                  <th>标题</th>

                  <th>标题</th>

              </tr>

          </thead>

          <tbody>

              <tr>

                  <td colspan="2">单元格</td>

                  <!--<td>单元格</td>-->

                  <td rowspan="2">单元格</td>

              </tr>

              <tr>

                  <td>单元格</td>

                  <td>单元格</td>

                  <!--<td>单元格</td>-->

              </tr>

          </tbody>

          <tfoot>

              <tr>

                  <td>单元格</td>

                  <td>单元格</td>

                  <td>单元格</td>

              </tr>

          </tfoot>

      </table>

    <!--display: table-cell; -->

    <!--文本在该显示方式的盒子中垂直居中(display, vertical-align) => 多行文本垂直居中-->

    <!--注: 如果要对table-cell盒子进行布局, 可以对其添加block布局盒子的父级-->

    <style>

        .box {

            display: table-cell;

            vertical-align: middle;

        }

    </style>

    </body>

    </html>

  • 相关阅读:
    ExtJS面向对象
    简单理解Ext.DomQuery操作CSS3选择器
    简单理解Ext.extend
    Pycharm去掉项目所有 # 注释
    windows 杀死进程
    mongo官方企业版安装及数据库授权使用
    python中赋值,深拷贝,浅拷贝区别
    测试驱动开发简单理解
    Flask与WSGI
    Python直接改变实例化对象的列表属性的值 导致在flask中接口多次请求报错
  • 原文地址:https://www.cnblogs.com/zhouhai007/p/10132456.html
Copyright © 2011-2022 走看看