您現在的位置是:電腦技術吧?>? 組裝維修 ??>??展開和收起怎么做,展開收起??>??正文詳情

展開和收起怎么做,展開收起

稅慧艷2019-11-20 18:41:48 人圍觀
簡介listview展開收起規則用于創建動畫@在關鍵幀中指定CSS樣式時,可以在@keyframes中創建動畫效果,該效果會從當前樣式逐漸更改為新樣式。在@keyframes中創建動畫時,展開和收起的日歷

規則用于創建動畫。

  @keyframes 中規定某項 CSS 樣式,就能創建由當前樣式逐漸改為新樣式的動畫效果  @keyframes 中創建動畫時,請把它捆綁到某個選擇器,否則不會產生動畫效果。

  通過規定至少以下兩項 CSS3 動畫屬性,即可將動畫綁定到選擇器:  規定動畫的名稱  規定動畫的時長  animation  animation 屬性是一個簡寫屬性,用于設置動畫屬性:  animation-name:規定 @keyframes 動畫的名稱。

  animation-duration:規定動畫完成一個周期所花費的秒或毫秒。

默認是 0。

  animation-timing-function:規定動畫的速度曲線。

默認是 ease。

  animation-delay:規定動畫何時開始。

默認是 0  animation-iteration-count:規定動畫被播放的次數。

默認是 1。

  animation-direction:規定動畫是否在下一周期逆向地播放。

默認是 normal。

  animation-fill-mode:規定對象動畫時間之外的狀態  側邊欄實現  代碼如下:  /* 動畫定義 */  @-webkit-keyframes move_right {  from {  opacity: 0;  }  to {  opacity: 1;  -webkit-transform: translateX(120px);  transform: translateX(120px);  }  }  @keyframes move_right {  from {  opacity: 0;  }  to {  opacity: 1;  -webkit-transform: translateX(120px);  transform: translateX(120px);  }  }  @-webkit-keyframes move_left {  from {  opacity: 1;  }  to {  opacity: 0;  -webkit-transform: translateX(-120px);  transform: translateX(-120px);  }  }  @keyframes move_left {  from {  opacity: 1;  }  to {  opacity: 0;  -webkit-transform: translateX(-120px);  transform: translateX(-120px);  }  }  @-webkit-keyframes move_up {  from {  opacity: 0;  }  to {  opacity: 1;  -webkit-transform: translateY(-250px);  transform: translateY(-250px);  }  }  @keyframes move_up {  from {  opacity: 0;  }  to {  opacity: 1;  -webkit-transform: translateY(-250px);  transform: translateY(-250px);  }  }  代碼如下:  /* 動畫綁定 */  .move_right {  -webkit-animation-name : move_right;  animation-name : move_right;  -webkit-animation-duration : 1s;  animation-duration : 1s;  -webkit-animation-iteration-count : 1;  animation-iteration-count : 1;  -webkit-animation-fill-mode : forwards;  animation-fill-mode : forwards;  }  .move_left {  -webkit-animation-name : move_left;  animation-name : move_left;  -webkit-animation-duration : 1s;  animation-duration : 1s;  -webkit-animation-iteration-count : 1;  animation-iteration-count : 1;  -webkit-animation-fill-mode : forwards;  animation-fill-mode : forwards;  }  .move_up {  -webkit-animation-name : move_up;  animation-name : move_up;  -webkit-animation-duration : 1s;  animation-duration : 1s;  -webkit-animation-iteration-count : 1;  animation-iteration-count : 1;  -webkit-animation-fill-mode : forwards;  animation-fill-mode : forwards;  }  .fadeIn {  -webkit-transform : translateX(120px);  transform : translateX(120px);  opacity: 1;  }  .fadeInUp {  -webkit-transform : translateY(-250px);  transform : translateY(-250px);  opacity: 1;  -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;  transition :transform .2s ease-out, opacity .2s ease-out;  }  .fadeOutLeft {  -webkit-transform : translateX(-120px);  transform : translateX(-120px);  opacity: 0.0;  -webkit-transition :-webkit-transform .2s ease-out,opacity .2s ease-out;  transition :transform .2s ease-out, opacity .2s ease-out;  }  html  代碼如下:  sidebar  淡進  淡出  向上淡進  向左淡出  加入JS  代碼如下:  以上就是使用CSS3制作側邊欄動畫效果的全部內容和代碼了,小伙伴們根據自己的項目需求來改善美化下就可以了哦。

版權聲明:本文由 稅慧艷 整理編輯。

原標題:收起展開效果,展開收起菜單

轉載注明出處:http://www.dn9ww09s.icu/assemble/13847.html

文章評論

    共有條評論來說兩句吧...

    用戶名:

    驗證碼:

作者推薦

  • 唯品會唯品幣有什么用,唯品會怎么領唯品幣

    唯品會唯品幣有什么用,唯品會怎么領唯品幣 相關圖片唯品會唯品幣會過期嗎唯品會是唯品會推出的官方折扣方式。成功消費后,用戶可以在下次購買時用唯品會兌換現金。那么唯品會怎么得到唯品會呢?接下來,超人軟件也要介紹唯品會...

  • 摩拜單車,摩拜單車怎么用

    摩拜單車,摩拜單車怎么用 相關圖片摩拜單車怎么還車近日,摩比自行車推出了自動變速功能。我怎么能聽到我覺得這個功能很高科技,那么摩比自行車的自動變速器是什么呢?現在,超人軟件編輯還想介紹一下Moby bike ...

  • 鼠標失靈,鼠標

    鼠標失靈,鼠標 相關圖片鼠標沒反應本教程介紹如何使用flashas3.0制作鼠標發光的文本旋轉效果。這個教程很基礎。在本教程中,我們將學習使用發光濾光片使對象產生發光效果。這個教程很實用,我們希鼠標突...

  • 拼多多活動中怎么取消,拼多多萬人團不滿就取消嗎

    拼多多活動中怎么取消,拼多多萬人團不滿就取消嗎 相關圖片必要拼團訂單可以取消嗎品多多是一款非常常用的團購軟件。在這個軟件中,你可以通過團購以優惠的價格購買商品。如果您不滿意,可以申請退貨。品多多怎么能取消品團呢?現在,...

  • HTML元素,html5元素

    HTML元素,html5元素 相關圖片html行內元素有哪些定義表示定義列表中的定義。定義通常縮進在定義列表中,表示定義列表中的定義。這個定義通常在html列表元素...

  • 摩拜單車,摩拜單車怎么用

    摩拜單車,摩拜單車怎么用 相關圖片摩拜單車月卡環保幣是摩比單車推出的虛擬幣,用戶可以通過它在摩比成就博物館兌換獎品。如何獲得摩比自行車綠色資金?現在,超人軟件編輯也想介紹一下如何玩Moby Android成摩拜共...

  • 抖音怎么抖屏,抖音抖屏

    抖音怎么抖屏,抖音抖屏 相關圖片抖音短視頻怎么抖屏幕自助餐短片具有酷炫的特效和易用的編輯功能,收獲了大量用戶。?。Interested partners don't want to抖音和別人和屏怎么辦...

  • 1px是多少像素,1px像素

    1px是多少像素,1px像素 相關圖片一個像素是多少毫米最近,我們都使用表來創建網頁中像素為1的wordlink﹣affiliate表,這似乎是一件非常簡單的事情。直接插入表格并將表格邊框設置為1?嘗試過的朋友必須知1px是多少...

  • 快奪寶,奪寶

    快奪寶,奪寶 相關圖片最正規的一元奪寶51戰利品是一款手機軟件,在這款軟件中,用戶只需花1元錢即可進行戰利品。那么51個搶劫犯呢??。連環奪寶...

  • 炫光效果怎么做,炫光效果

    炫光效果怎么做,炫光效果 相關圖片炫光反應。。設置畫筆大小,軟化邊緣,并使用畫筆工具在畫布中繪制,如圖3所示。。。Create a new rectangular box, and fill it抑制炫光...

熱評文章

  • 魅藍3后蓋怎么打開,魅藍后蓋怎么打開

    魅藍3后蓋怎么打開,魅藍后蓋怎么打開 相關圖片魅藍note5后蓋很難打開美蘭6是魅族推出的雙卡雙待智能手機。最近,很多美蘭6的用戶都想知道如何打開美蘭6的后蓋,以及如何安裝美蘭6的SIM卡。接下來,讓超人軟件為您帶來美蘭6的介...

  • 廣告H5,沒有廣告的h5

    廣告H5,沒有廣告的h5 相關圖片h5創意廣告你是否突然對市場上的H5麻木了,情況一樣,內容缺乏新意?你想做,但做不好。你不知道如何判斷工作的質量?我們在這個只有一年多的行業里遇到了什么困難?我們怎么對...

  • 抖音短視頻緩存目錄,抖音短視頻怎么設置緩存途徑

    抖音短視頻緩存目錄,抖音短視頻怎么設置緩存途徑 相關圖片蘋果抖音清理緩存自助餐是一個非常有趣的視頻拍攝軟件,通過它你可以拍攝許多很酷的視頻。那么如何清理緩存呢?接下來,超人軟件編輯還想介紹如何剪切Android版的短視頻。讓我們...

  • dreamweaver,dreamweaver使用

    dreamweaver,dreamweaver使用 相關圖片dream wear軟件步驟1:Apache配置站點。一。如果我們在E/www目錄中創建一個測試站點,我們首先在www目錄中創建一個測試目錄。2現在我們打開Apache配置文件,首先添weaver...

  • 閃電盒子靠譜嗎,閃電查詢可靠嗎

    閃電盒子靠譜嗎,閃電查詢可靠嗎 相關圖片閃電盒子正規嗎閃電降價是一款非常不錯的生活購物軟件。在這個軟件里,你可以找到各種各樣的產品。那么閃電降價靠譜嗎?現在,超人軟件編輯想介紹閃電降價的真相,希望您不要...

  • 打造世界葡萄酒,打造葡萄酒黨建

    打造世界葡萄酒,打造葡萄酒黨建 相關圖片打造世界酒桶不產酒了看上去精致漂亮的酒瓶其實制作起來很簡單。它可以很容易地與煙花在幾個步驟首先,使用形狀工具畫出相應的形狀。通過這些形狀的組合,我們可以得到一個瓶...

  • ofo小黃車,ofo小黃車押金

    ofo小黃車,ofo小黃車押金 相關圖片ofo小黃車怎么退余額想必打開軟件后,你會發現ofo推出的國慶卡活動。那么ofo國慶卡有什么用呢?如何獲得ofo國慶卡?現在,超人軟件編輯也要介紹ofo小黃車客服...

  • ins元素,ins元素什么意思

    ins元素,ins元素什么意思 相關圖片ins風定義表示插入到文檔中的文本的文本指定此元素在Internet Expo中插入到文檔中的文本ins標簽...

  • 魔獸世界隨身app,魔獸世界隨身助手

    魔獸世界隨身app,魔獸世界隨身助手 相關圖片魔獸世界的app魔獸世界是一個非常實用的游戲輔助工具。最近,有很多小伙伴認為下載后無法使用該應用程序。如果魔獸世界的便攜應用無法安裝,我們該怎么辦?現在,超人軟件編輯...

  • 美團打車內置導航,美團找不到打車功能了

    美團打車內置導航,美團找不到打車功能了 相關圖片美團打車怎么幫別人叫車最近,METUN APP推出的出租車功能意味著未來,你可以乘坐出租車到湄潭。那美團的出租車在哪里?現在,超人軟件編輯也想介紹一下METIAN的iPhone版本的美團打車...

關注微信

变脸官网查询