如何使用CSS3中屬性和jquery方法控制元素移動

2019-12-12 01:41:35

在這麼一個場景下，使用CSS3樣式屬性控制元素，如背景漸變、圓角、陰影等；再使用jQuery中的css()方法控制元素相對位置偏移，加個定時任務，這樣就可以讓元素動起來。下面利用範例說明如何實現，操作如下：

第一步，雙擊開啟HBuilderX工具，新建一個HTML5模板的頁面，插入一個div標籤元素，並設定對應的ID屬性，操作如下：

第二步，利用ID選擇器設定div元素的樣式，寬度、高度、字型樣式和背景漸變，如下圖所示：

第三步，儲存程式碼並直接開啟瀏覽器預覽效果，可以看到文字內容水平垂直居中顯示，如下圖所示：

第四步，再在樣式選擇器中新增border-radius和box-shadow，橢圓角和陰影，如下圖所示：

第五步，再次儲存程式碼並預覽介面效果，可以發現出現圓形，並帶有陰影，如下圖所示：

第六步，引入jquery核心檔案，使用jquery中控制樣式方法css()，新增定時器，設定元素相對位置，如下圖所示：