国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

前端(八)之形變

yvonne / 1001人閱讀

摘要:前端之形變前端之形變一形變一形變形變參考點(diǎn)三軸交界點(diǎn)軸坐標(biāo)軸坐標(biāo)旋轉(zhuǎn)偏移縮放無單位軸比例軸比例注可以多形變空格隔開書寫在一條屬性中順序一般會(huì)影響形變結(jié)果形變不改變盒子布局只拿形變做動(dòng)畫二動(dòng)畫二動(dòng)畫設(shè)置動(dòng)畫體起點(diǎn)省略采用的就是初始狀態(tài)在每

前端之形變

一.形變

/*1.形變參考點(diǎn): 三軸交界點(diǎn)*/
transform-origin: x軸坐標(biāo) y軸坐標(biāo);

/*2.旋轉(zhuǎn) rotate deg*/
transform: rotate(720deg);

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

/*縮放 scale 無單位*/
transform: scale(x軸比例, y軸比例)

/*注: 可以多形變, 空格隔開書寫在一條transform屬性中, 順序一般會(huì)影響形變結(jié)果*/
/*形變不改變盒子布局, 只拿形變做動(dòng)畫*/

二.動(dòng)畫animation

/*1.設(shè)置動(dòng)畫體*/
@keyframes move {
    /*起點(diǎn)省略采用的就是初始狀態(tài)*/
    0% {}
    33.3% {
        margin-left: 800px;
        /*在每一個(gè)動(dòng)畫節(jié)點(diǎn)都需要明確所有做動(dòng)畫屬性在該節(jié)點(diǎn)的屬性值*/
        margin-top: 50px;
    }
    66.6% {
        margin-left: 500px;
        margin-top: 300px;
    }
    /*終點(diǎn)需要設(shè)置*/
    100% {
        margin-left: 200px;
        margin-top: 50px;
    }
}

/*2.設(shè)置動(dòng)畫屬性*/
/*animation: 動(dòng)畫名 時(shí)間 運(yùn)動(dòng)次數(shù)(無限次:infinite) 運(yùn)動(dòng)曲線*/
.box {
    animation: move 2s 1 linear;
}

三.表格

表格標(biāo)題
標(biāo)題 標(biāo)題 標(biāo)題
單元格 單元格 單元格
單元格 單元格 單元格
table的全局屬性: border="1" 設(shè)置邊框?qū)挾?cellspacing="10" 單元格間的間距 cellpadding="10" 單元格的內(nèi)邊距 rules="rows | cols | groups | all" 邊框的保留格式 td的全局屬性 rowspan="2" 合并兩行單元格 colspan="3" 合并三列單元格 table的高度: 由內(nèi)容和設(shè)置高度中的大值決定 table-cell: 可以嵌套任意類型標(biāo)簽, 可以快速實(shí)現(xiàn)多行文本垂直居中

四.多行文本垂直居中

第一行文本

第二行文本
.sup {
    /*實(shí)現(xiàn)多行文本垂直居中 => 
    針對(duì)父級(jí)設(shè)置, 父級(jí)中的多個(gè)塊級(jí)文本類子級(jí)標(biāo)簽垂直居中*/
    display: table-cell;
    vertical-align: middle;
}
/*注: 如果想調(diào)整sup的位置,可以給sup嵌套一個(gè)"位置層"*/
/*.box>.sup>p+div*/

文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/1437.html

相關(guān)文章

  • 為什么元素的 mask 不跟隨元素一起位移或形變

    摘要:可以這樣說,和應(yīng)用了的元素是兩個(gè)彼此獨(dú)立的元素,這也是元素的不跟隨元素一起位移或形變的根本原因。結(jié)論為什么元素的不跟隨元素一起位移或形變答案是元素與是兄弟關(guān)系。 之前在做「雙十一攻略頁(yè)」的時(shí)候就發(fā)現(xiàn)這個(gè)細(xì)節(jié),但是當(dāng)時(shí)沒有太在意,今天又遇到了。 createjs 的代碼: var stage = new createjs.Stage(canvas); var container = n...

    JouyPub 評(píng)論0 收藏0
  • transform,transition,animation

    摘要:,三者的區(qū)別是單獨(dú)的形變,偏移,而和都加上了時(shí)間屬性,所以能夠產(chǎn)生動(dòng)畫效果。的動(dòng)畫效果一般由行為等觸發(fā),而則是自動(dòng)觸發(fā)。的動(dòng)畫效果只有兩幀關(guān)鍵幀,而可以有更多幀。默認(rèn)為,即兩個(gè)動(dòng)作間產(chǎn)生變化的所有屬性都發(fā)生作用。 transform,transition,animation三者的區(qū)別? 1.transform是單獨(dú)的形變,偏移,而transition和animation都加上了時(shí)間屬...

    xuexiangjys 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<