使用場景 　　在界面載入的時候，需要根據獲取到的數據，實現數字自動變化到數據的數值或動畫變化為數據相關的效果（比如數字從0變化到100，電池電量從固定位置變化到一定的位置時的動畫）的時候。 主要使用到的方法和屬性 　　JS:setInterval(定時器)、clearInterval（在數 ...

Odometer是一個使用JavaScript和CSS技術，制作出數字上下滑動的動畫效果插件，有點類似與我們的天然氣的讀數的動畫效果，這個插件是輕量級的，壓縮版本只有3kg，使用CSS3動畫技術，所以運行起來非常的流暢，需要這種效果的朋友不妨試試這個插件。 所有的主題都可以自定義文字的大小 ...

寫在前面的話： 　　有這樣一個需求，在大屏中要實現幾個球用橢圓形狀的布局進行展示，展示的同時還要沿着橢圓軌道進行運動。經過 百度結合自身的思考之后給出了以下demo。 正文： 首先我們先寫結構 類名為area的div為存放球類的容器，類名為ball的div為球 接着定義樣式 ...

開門見山，有這樣一種非常常見的情況，對於一些可滾動的元素而言。通常在滾動的時候會給垂直於滾動的一側添加一個陰影，用於表明當前有元素被滾動給該滾出了可視區域，類似這樣： 可以看到，在滾動的過程中，會出現一條陰影： 對於兩側的列在滾動的過程中，靜止不動，吸附在邊界的問題，通常 CSS 使用 ...

...

使用css制作簡單的點擊切換效果，參考了以下教程：css實現的輪播和點擊切換(無js版) 首先先制作一個容器，用來容納所顯示的內容： HTML代碼： CSS代碼： 接下來，根據需要設置ul的長度，這里先制作三個切換窗口，因此將ul的寬度設置為容器寬度的300%，li即為每次 ...

最近項目中要做一個領積分的效果，根據老板的描述，這個效果類似於支付寶螞蟻森林里的領取能量。整體效果是就是在樹周圍飄着幾個積分元素，上下滑動，類似星星閃爍，點擊領取后，沿着樹中心的位置滑動並消失，樹上的能量遞增，最后膨脹，變大一點。 1. 整體思路 首先想到基本輪廓是一個地球，周圍半圓范圍內 ...

<div class="bomb-rocket"></div> <div class="bomb-rocket"></div> < ...