码迷,mamicode.com
首页 > 其他好文 > 详细

第六十二天 形变 动画 与 表格

时间:2018-12-18 20:55:59      阅读:160      评论:0      收藏:0      [点我收藏+]

标签:标签   cap   body   class   参考   保留   运动   格式   tab   

一、形变

  1.形变参考点:三轴交界点

  transform-origin:x轴坐标 y坐标;

  2.旋转 rotate deg

  transform:rotate(720deg);

  偏移translate px

  transform:translateX(200px) translateY(200px);

  缩放 scale 无单位

  #注:可以多形变,空格隔开书写在一条transform属性中,顺序一般会形象形变结果

  形变不改变盒子布局,只拿形变做动画

二.动画animation

  #1.设置动画体

  七点省略采用的就是初始状态

  0%{}

  33.3%{

    margin-left:800px;

    #在每一个动画界点都需要明确所有做动画属性在该节点的属性

    margin-top:50px;

  }

  # 终点需要设置

  100% {

    margin-left: 200px;

    margin-top: 50px;

  }

}

  #2.设置动画属性

  animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线

  .box{

    animation: move 2s 1 linear;

  }

三.表格

  

<table>
    <caption>表格标题</caption>
    <thead>
        <tr>
            <th>标题</th>
            <th>标题</th>
            <th>标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
        
    </tbody>
    <tfoot>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tfoot>
</table>
table的全局属性:
border="1"  设置边框宽度
cellspacing="10" 单元格间的间距
cellpadding="10" 单元格的内边距
rules="rows | cols | groups | all" 边框的保留格式

td的全局属性
rowspan=‘2‘ 合并两行单元格
colspan=‘3‘ 合并三列单元格

table的高度: 由内容和设置高度中的大值决定

table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中

 

第六十二天 形变 动画 与 表格

标签:标签   cap   body   class   参考   保留   运动   格式   tab   

原文地址:https://www.cnblogs.com/gongcheng-/p/10139877.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!