资讯专栏INFORMATION COLUMN

前端(八)之形变

yvonne / 1000人阅读

摘要:前端之形变前端之形变一形变一形变形变参考点三轴交界点轴坐标轴坐标旋转偏移缩放无单位轴比例轴比例注可以多形变空格隔开书写在一条属性中顺序一般会影响形变结果形变不改变盒子布局只拿形变做动画二动画二动画设置动画体起点省略采用的就是初始状态在每

前端之形变

一.形变

/*1.形变参考点: 三轴交界点*/
transform-origin: x轴坐标 y轴坐标;

/*2.旋转 rotate deg*/
transform: rotate(720deg);

/*偏移 translate px*/
transform: translateX(200px) translateY(200px);

/*缩放 scale 无单位*/
transform: scale(x轴比例, y轴比例)

/*注: 可以多形变, 空格隔开书写在一条transform属性中, 顺序一般会影响形变结果*/
/*形变不改变盒子布局, 只拿形变做动画*/

二.动画animation

/*1.设置动画体*/
@keyframes move {
    /*起点省略采用的就是初始状态*/
    0% {}
    33.3% {
        margin-left: 800px;
        /*在每一个动画节点都需要明确所有做动画属性在该节点的属性值*/
        margin-top: 50px;
    }
    66.6% {
        margin-left: 500px;
        margin-top: 300px;
    }
    /*终点需要设置*/
    100% {
        margin-left: 200px;
        margin-top: 50px;
    }
}

/*2.设置动画属性*/
/*animation: 动画名 时间 运动次数(无限次:infinite) 运动曲线*/
.box {
    animation: move 2s 1 linear;
}

三.表格

表格标题
标题 标题 标题
单元格 单元格 单元格
单元格 单元格 单元格
table的全局属性: border="1" 设置边框宽度 cellspacing="10" 单元格间的间距 cellpadding="10" 单元格的内边距 rules="rows | cols | groups | all" 边框的保留格式 td的全局属性 rowspan="2" 合并两行单元格 colspan="3" 合并三列单元格 table的高度: 由内容和设置高度中的大值决定 table-cell: 可以嵌套任意类型标签, 可以快速实现多行文本垂直居中

四.多行文本垂直居中

第一行文本

第二行文本
.sup {
    /*实现多行文本垂直居中 => 
    针对父级设置, 父级中的多个块级文本类子级标签垂直居中*/
    display: table-cell;
    vertical-align: middle;
}
/*注: 如果想调整sup的位置,可以给sup嵌套一个"位置层"*/
/*.box>.sup>p+div*/

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1437.html

相关文章

  • 为什么元素的 mask 不跟随元素一起位移或形变

    摘要:可以这样说,和应用了的元素是两个彼此独立的元素,这也是元素的不跟随元素一起位移或形变的根本原因。结论为什么元素的不跟随元素一起位移或形变答案是元素与是兄弟关系。 之前在做「双十一攻略页」的时候就发现这个细节,但是当时没有太在意,今天又遇到了。 createjs 的代码: var stage = new createjs.Stage(canvas); var container = n...

    JouyPub 评论0 收藏0
  • transform,transition,animation

    摘要:,三者的区别是单独的形变,偏移,而和都加上了时间属性,所以能够产生动画效果。的动画效果一般由行为等触发,而则是自动触发。的动画效果只有两帧关键帧,而可以有更多帧。默认为,即两个动作间产生变化的所有属性都发生作用。 transform,transition,animation三者的区别? 1.transform是单独的形变,偏移,而transition和animation都加上了时间属...

    xuexiangjys 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<