您好,登錄后才能下訂單哦!
這篇文章主要介紹“css3如何實現(xiàn)div右側滑入”,在日常操作中,相信很多人在css3如何實現(xiàn)div右側滑入問題上存在疑惑,小編查閱了各式資料,整理出簡單好用的操作方法,希望對大家解答”css3如何實現(xiàn)div右側滑入”的疑惑有所幫助!接下來,請跟著小編一起來學習吧!
方法:1、利用“div{animation:名稱 時間}”語句給div元素綁定滑動動畫;2、利用“@keyframes 名稱{0%{transform:translateX(滑入距離)}}”語句設置滑動動畫的動作,實現(xiàn)div右側滑入效果。
本教程操作環(huán)境:windows10系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。
css3怎樣實現(xiàn)div右側滑入
在css中,想要實現(xiàn)div右側滑入效果,可以利用animation屬性和@keyframes規(guī)則。
創(chuàng)建動畫的原理是,將一套 CSS 樣式逐漸變化為另一套樣式。在動畫過程中,您能夠多次改變這套 CSS 樣式。
以百分比來規(guī)定改變發(fā)生的時間,或者通過關鍵詞 "from" 和 "to",等價于 0% 和 100%。0% 是動畫的開始時間,100% 動畫的結束時間。為了獲得最佳的瀏覽器支持,您應該始終定義 0% 和 100% 選擇器。
還有transform屬性用于設置圖片滑動的動作。transform 屬性向元素應用 2D 或 3D 轉換。該屬性允許我們對元素進行旋轉、縮放、移動或傾斜。
示例如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> .div1{ width:100px; height:100px; border:1px solid #000; animation:fadenum 5s; } @keyframes fadenum{ 0%{transform:translateX(250px);} } .div2{ width:200px; height:150px; border:1px solid red; overflow:hidden; } </style> </head> <body> <div class="div2"><div class="div1">這是一個帶邊框的div</div></div> </body> </html>
輸出結果:
到此,關于“css3如何實現(xiàn)div右側滑入”的學習就結束了,希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習,快去試試吧!若想繼續(xù)學習更多相關知識,請繼續(xù)關注億速云網(wǎng)站,小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權內(nèi)容。