整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          CSS 動畫- 提升網站動態效果

          CSS 動畫: 提升網站動態效果

          、動畫的應用


          動畫在網站設計中起著重要作用,可以為用戶提供一個更令人興奮和引人入勝的體驗。通過動畫,設計師可以將靜態頁面轉化為有生命力的動態頁面。

          二、動畫技術

          有幾種動畫技術可用于 CSS:

          • Keyframe Animation - 使用關鍵幀來定義動畫的各個關鍵時間點。
          • Transition - 為了平滑地改變一個元素的屬性,例如位置、大小或顏色。
          • Transform - 改變元素的幾何形狀。

          三、動畫屬性

          動畫可以影響許多不同的 CSS 屬性,例如:

          • 位置 (position)
          • 大小 (width/height)
          • 旋轉 (rotation)
          • 旋轉軸 (transform-origin)
          • 顏色 (color)

          四、流行的 CSS 動畫庫

          • Animate.css
          • GreenSock Animation Platform (GSAP)
          • Popmotion

          五、動畫案例

          知名的 CSS 動畫網站:

          • Airbnb
          • GitHub
          • Dribbble

          六、結論

          CSS 動畫可以為網站添加生命力并提升用戶體驗。通過利用動畫技術,設計師可以創造出動感和引人入勝的網站。

          過DOM方式動態創建HTML標簽元素,并將創建的元素追加到父元素中

          DOM方式動態創建頁面元素基本只需三步:

          1)通過document.createElement('HTML支持的標簽名稱,比如div,input等')方法創建元素

          2)設置剛剛創建標簽要顯示的文本

          3)通過appendChild(剛剛創建的元素)方法追加到父元素中子元素的最后

          <!DOCTYPE html>
          <html xmlns="http://www.w3.org/1999/xhtml">
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
              <title>動態創建頁面元素</title>
              <script type="text/javascript">
                  //頁面加載完畢后執行
                  window.onload=function () {
                      //為按鈕注冊一個單擊事件
                      document.getElementById('btn').onclick=function () {
                          //動態創建一個li
                          var li=document.createElement('li');
                          //設置顯示的文本
                          li.innerHTML='深圳';
                          //獲取父元素
                          var ul=document.getElementById('ulList');
                          //將創建的元素追加到ul中
                          ul.appendChild(li);
                          //等同于  document.getElementById('ulList').appendChild(li);
                      }
                  }
              </script>
          </head>
          <body>
              <input type="button" id="btn" value="動態創建一個li,追加到ul中" />
              <ul id="ulList">
                  <li>北京</li>
                  <li>上海</li>
                  <li>廣州</li>
              </ul>
          </body>
          </html>

          動態創建并追加的li標簽

          avaScript動態設置CSS樣式實例分析

          通過使用文檔對象模型DOM,可以將HTML文件當做文檔對象,并按照文檔對象處理方法進行處理。主要處理形式包括設置HTML標記文本內容、設置元素屬性值及對Style樣式進行操作等。本文主要介紹使用文檔對象模型DOM所提供的Element、HTMLElement等實現對元素Style樣式進行快速設置。


          DOM標準

          DOM(Document Object Model)文檔對象模型是W3C提出的技術規范,該規范與瀏覽器、平臺、語言無關。HTML DOM是指適用于HTML的文檔對象模型。因此在JavaScript中我們所認識的DOM應當可以理解為HTML DOM。DOM標準相關對象關系描述如下圖所示:

          DOM標準概念與關系

          在DOM標準對象描述中可以看出所有的對象都繼承于Node對象,Node對象是DOM文檔對象模型的核心。在JavaScript文檔對象模型中,Document對象、Element對象等都繼承于Node對象,而HTMLDocument對象與HTMLElement對象等又分別繼承于Document對象與Element對象。

          Element對象提供了HTML頁面中所有的元素方法與屬性。我們可以借助HTMLElement對象實現對HTML頁面元素進行操作與屬性值讀寫等


          HTMLElement設置CSS樣式

          HTMLElement對象繼承自Element對象,因此具有其父類的基本屬性與方法。在Element對象主要提供style屬性與setAttribute()方法實現對元素樣式屬性及屬性值進行設置。兩種方法描述如下:

          1、style屬性

          style屬性是HTMLElement繼承自父類Element的基本屬性之一,主要用于對HTML樣式屬性進行設置或者樣式屬性值的讀取。在進行樣式屬性值設置過程中可以分為兩種方式進行設置。第一種為設置單個特定style樣式,如設置background-color屬性值,我們可直接使用如下方法進行設置:

          HTMLElement.style.property=value;

          第二種設置方法是同時對某個元素全部style樣式進行重新設置,這種情況下我們使用style.cssText屬性進行整體屬性設置,設置語法描述如下:

          HTMLElement.style.cssText="property1:value1;...propertyN:valueN";

          2、setAttribute()方法設置CSS

          setAttribute()方法也是Element對象的基本方法之一,主要用于設置指定元素的指定屬性值。如該屬性值存在則更新屬性值。在HTMLElement對象中我們可以直接使用setAttribute方法進行style屬性的值的設置。其基本語法描述如下:

          HTMLElement.setAttribute(name,value);

          動態CSS樣式設置實例

          本例主要設置實現在鼠標經過某一個DIV時,動態改變該DIV層的style樣式屬性,主要改變屬性包括背景顏色、字體大小及光標形狀等。設計原始DIV樣式效果如下圖:

          原始CSS樣式

          該案例原始CSS樣式實現代碼描述如下圖所示:

          原始頁面實現代碼

          按照實例要求我們為div層添加鼠標over事件,并編寫事件處理函數用于響應鼠標處理,具體處理需要實現style樣式變化要求。對該div添加onmouseover事件,響應函數名稱為changeStyle()。代碼描述如下:

          事件處理函數

          在該事件處理函數中我們傳遞了用于標識當前元素的this參數,函數在接收到該參數后能夠直接定位與當前div,并進行下一步處理。changeStyle方法描述如下:

          事件處理方法1

          事件處理方法1使用style.cssText方法進行了CSS樣式的動態設置,使用setAttribure方法進行樣式設置代碼如下:

          事件處理方法2

          通過編寫以上代碼可以實現鼠標經過DIV時,style樣式中的背景顏色、文字大小及光標樣式的動態變化,變化之后效果描述如下圖:

          動態改變樣式效果

          以上給出了Element、HTMLElement及DOM基本概念說明,并對HTMLElement對象style屬性與setAttribute方法在CSS樣式改變中的應用進行了語法說明與實例分析。如需完整代碼關注并私信。


          本頭條號長期關注編程資訊分享;編程課程、素材、代碼分享及編程培訓。如果您對以上方面有興趣或代碼錯誤、建議與意見,可在評論區回復。更多程序設計相關教程及實例分享,期待大家關注與閱讀!相關文章鏈接如下:

          前端設計-JavaScript實現復選框的分組單選

          本文由kid編程原創,歡迎關注,帶你一起長知識!


          主站蜘蛛池模板: 国产一区二区视频免费| 99久久无码一区人妻a黑| 国产激情一区二区三区成人91| 毛片一区二区三区无码| 精品福利一区二区三区免费视频| tom影院亚洲国产一区二区| 熟妇人妻AV无码一区二区三区| 精品人妻少妇一区二区三区| 国产日韩一区二区三免费高清| 丝袜无码一区二区三区| 日韩精品无码免费一区二区三区| 中文字幕在线一区二区在线 | 日韩人妻精品一区二区三区视频| 美女一区二区三区| 国99精品无码一区二区三区| 国产自产在线视频一区| 中文字幕精品一区二区日本| 国产成人一区二区三中文| 色一乱一伦一区一直爽| 寂寞一区在线观看| 亚洲国产AV无码一区二区三区| 日韩aⅴ人妻无码一区二区| 国产成人精品一区二区三区| 日本在线一区二区| 精品无人乱码一区二区三区| 亚洲一区无码精品色| 精品无码中出一区二区| 免费人人潮人人爽一区二区| 99久久国产精品免费一区二区| 在线精品一区二区三区| 国产美女露脸口爆吞精一区二区| 国产伦精品一区二区三区女| 国产成人av一区二区三区不卡| 少妇无码一区二区二三区| 无码aⅴ精品一区二区三区| 日韩精品人妻一区二区中文八零 | 精品3d动漫视频一区在线观看| 日韩免费一区二区三区在线播放 | 国产日韩精品视频一区二区三区 | 国产人妖视频一区二区 | 亚洲一区日韩高清中文字幕亚洲|