成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

前端（七）之動(dòng)畫與陰影

QLQ / 2485人閱讀

摘要：動(dòng)畫及陰影動(dòng)畫及陰影一拼接網(wǎng)頁一拼接網(wǎng)頁將區(qū)域整體劃分起名對其他區(qū)域布局不產(chǎn)生影響提出公共操作當(dāng)有區(qū)域發(fā)送顯示重疊脫離文檔流導(dǎo)致的需要通過調(diào)整層級一定需要最外層且最外層做自身布局時(shí)不要做過多布局操作二過渡二過渡屬性過渡時(shí)間必須延遲時(shí)間一般

動(dòng)畫及陰影

一.拼接網(wǎng)頁

將區(qū)域整體劃分起名 => 對其他區(qū)域布局不產(chǎn)生影響
提出公共css => reset操作
當(dāng)有區(qū)域發(fā)送顯示重疊(脫離文檔流導(dǎo)致的), 需要通過z-index調(diào)整層級
一定需要最外層,且最外層做自身布局時(shí),不要做過多布局操作

二.過渡

transition屬性

transition: 過渡時(shí)間(必須) 延遲時(shí)間(一般不設(shè)) 過渡屬性(一般采用all默認(rèn)值) 過渡曲線(貝賽爾曲線)(cubic-bezier())

過渡屬性具體設(shè)置給初始狀態(tài)還是第二狀態(tài) 根據(jù)具體需求
/*過渡的持續(xù)時(shí)間*/
transition-duration: 2s;
/*延遲時(shí)間*/
transition-delay: 50ms;
/*過渡屬性*/
/*單一屬性 | 屬性1, ..., 屬性n | all*/
transition-property: all;
/*過渡曲線*/
/*cubic-bezier() | ease | ease-in | ease-out | ease-in-out | linear*/
transition-timing-function: cubic-bezier(0, 2.23, 0.99, -1.34);
/*結(jié)論:*/
/*1.盡量懸浮靜止的盒子, 控制運(yùn)動(dòng)的盒子*/
/*2.不能確定區(qū)間范圍的屬性值, 不會(huì)產(chǎn)生動(dòng)畫效果*/
/*display 不能做動(dòng)畫  | opacity 可以做動(dòng)畫*/

三.陰影

/*x軸偏移量 y軸偏移量 虛化程度 陰影寬度 陰影顏色*/
box-shadow: 0 0 10px 10px black;

/*一個(gè)盒子可以設(shè)置多個(gè)陰影, 每一套陰影間用逗號隔開*/
box-shadow: 0 -10px 10px -5px black, 0 10px 10px -5px black;

四.偽類實(shí)現(xiàn)邊框

/*自身需要定位*/
.box {
    position: relative;
}
/*偽類通過定位來完成圖層的布局*/
.box:before {
    content: "";
    /*完成布局*/
    position: absolute;
    top: 10px;
    left: 0;
    /*構(gòu)建圖層*/
    width: 1px;
    height: 100px;
    background-color: black;
}
.box:after {
    content: "";
    position: absolute;
    width: 100px;
    height: 1px;
    background-color: black;
    top: 0;
    left: 10px;
}

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/1443.html

相關(guān)文章

  • vue應(yīng)用產(chǎn)品之iShow H5編輯器

    摘要：地址文檔網(wǎng)站在線地址今年年初，開始斷斷續(xù)續(xù)打磨自己的編輯器，到現(xiàn)在也有半年有余。目前是版本，后續(xù)會(huì)不斷完善，也歡迎大家貢獻(xiàn)自己的想法，共同進(jìn)步。 github地址：https://github.com/qiuyaofan/iShow 文檔：https://qiuyaofan.github.io/iShow/ 網(wǎng)站在線地址：https://qiuyaofan.github.io/is...

    W_BinaryTree 評論0 收藏0

  • CSS3 新特性

    摘要：語法說明對象選擇器投影方式軸偏移量軸偏移量模糊半徑陰影擴(kuò)展半徑陰影顏色內(nèi)陰影，向右偏移，向下偏移，模糊半徑，陰影縮小屬性的參數(shù)設(shè)置取值陰影類型此參數(shù)可選。 CSS3 是最新的 CSS 標(biāo)準(zhǔn)，并且完全向后兼容，不過目前W3C 仍然在對 CSS3 規(guī)范進(jìn)行開發(fā)，雖然標(biāo)準(zhǔn)的規(guī)范還沒有正式發(fā)布，但是現(xiàn)代瀏覽器已經(jīng)支持相當(dāng)多的 CSS3 屬性了。CSS3 提供了很多可以把玩的新特性，模糊了之前只...

    justjavac 評論0 收藏0

  • 【前端Talkking】CSS系列-css3之box-shadow介紹

    摘要：基本上就是將單側(cè)投影中的技巧運(yùn)用兩次，以如下所示在瀏覽器中的效果如下模擬邊框使用屬性可以模擬的效果，以如下所示在瀏覽器中的效果如下我們可以看到利用屬性模擬了的效果，但是與不同的是，使用創(chuàng)建的邊框效果并不會(huì)影響元素的尺寸。 1.寫在前面 在CSS3中，可以使用box-shadow屬性來創(chuàng)建陰影效果來給二維平面增加深度效果，這個(gè)屬性在前端開發(fā)中使用的非常多，例如segmentfault的首...

    jackzou 評論0 收藏0

  • 從零單排之CSS3

    摘要：概覽大法好今夜秋風(fēng)陣陣，霧霾層層。布局選擇多媒體，字體響應(yīng)就是屌。說起來?xiàng)l目繁多，乍看之下與之前比起來復(fù)雜了好多。圓角指的即使一般正式的寫法為效果請看任意一個(gè)按鈕即可寫到此處不禁跟大家說，最好還是配合預(yù)編譯來寫。 CSS3 概覽 showImg(https://segmentfault.com/img/bVddDt); CSS3大法好 今夜秋風(fēng)陣陣，霧霾層層。不禁讓人想作詩，不過...

    劉福 評論0 收藏0

  • SVG

    摘要：目前只提供了一些基礎(chǔ)功能。中與的區(qū)別開發(fā)者第一次接觸手寫那種，雖然很多情況都有設(shè)計(jì)師使用來完成這項(xiàng)工作，但還是不排除需要利用到的每個(gè)元素。輕量級，具備靈活的來自團(tuán)隊(duì)，全球非常出名的可視化團(tuán)隊(duì)。于是筆者嘗試著把移植到中。 使用SVG + CSS實(shí)現(xiàn)動(dòng)態(tài)霓虹燈文字效果 早上無意間進(jìn)入一個(gè)網(wǎng)站，看到他們的LOGO效果略屌，如圖： 剛開始以為是gif動(dòng)畫之類的，審查元素發(fā)現(xiàn)居然是用SVG + ...

    104828720 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<