天柑地芝

上一篇 講解了jquery progress-bars-svg-image套件，這一篇就是要正式來講用 css動畫 和 jquery套件 結合的自定義進度條動畫(不支援IE)。 首先根據jquery progress-bars-svg-image的邏輯下去寫，用一個div包兩個svg，並且做圖層、相對定位跟絕對定位。 (svg可以自己設計或是去網路上找免費的svg來用，自己設計的我會把svg的程式碼再做些微修改，比如拿掉裡面的class跟style之類的。記得viewbox那些不要拿掉) group >> 包覆進度條的div class，設為相對定位 top >> 上方跑動畫的svg，設為絕對定位以及將圖層設到上面 bottom >> 下方固定的svg fill >>填滿svg的屬性 clip-path:inset(0% 100% 0% 0%) >> 把上方svg固定在最左邊 可以調整100%為其他%數來先看效果 <style> .group{ position:relative; } .group .top{ z-index:2; position:absolute; clip-path:inset(0% 100% 0% 0%); fill:#f3adc4; } .group .bottom{ fill:#5e5c5c; } </style> <div class="group"> <svg class="top"> ... </svg> <svg class="bottom"> ... </svg> </div> 接下來做一個 css自定義動畫效果@keyframes ，我將它取名為percent，先把top的inset100%改成87%，然後animation呼叫剛剛定義好的percent，後面的2s是這個動畫跑的時間， 如果要一直重複這個動畫的話，就在後面加上infinite， 但我們是要做一個觸發事件再重做動畫，所以先不放。這

    網路上有很多進度條的寫法，原本Html就有進度條的 語法 ，再加上一些CSS的 美化 ，就可以做出符合大多數人想像的進度條。再不然還可以用 Jquery UI 、 Jquery plugin ，還有別忘了 Bootstrap 的進度條，應有盡有。     那為什麼選擇那麼多，還要特別自己研究呢?     原因是因為設計師設計出來的UI既不是圓的進度條也不是長條的進度條，而是不規則形狀的進度條。(原本是只擺一張圖在上面的)     剛開始設計師的想法很簡單，改進度條的%數?那我就再出一張圖就好啦!可是總不可能每次都剛好有空幫客戶出圖吧?而且客戶還是需要在後台修改數據來更新進度條的，那這樣也不可能在他們要更新進度條的時候就來聯絡我們修改圖吧?因此就開始了程式設計師(我)三天的研究之路......     其實我一開始的想法也很簡單，哎呀，我們這個網站是用Bootstrap做的嘛!那我去改Bootstartp的進度條css就好啦!把設計師做出來的UI做個遮罩! <style> .process{ clip-path:...; } </style>     結果因為形狀太複雜，所以我先遭受到了第一個難關，找位置找到快瘋掉。後來我查到資料， clip-path屬性是從svg來的 。哎呀，這就好說了，我們的設計師是用AI出圖的，於是我請設計師幫我把進度條轉存成svg給我，然後再看它的程式碼。     看svg的程式碼只要用記事本就可以，或是用正在打程式的各個軟體都行。     設計圖的svg導出是path屬性畫的，於是我就開開心心的把數據複製到css裡面。然後、然後就壞掉了...... See the Pen bootstrap4 progressbar svg fail by Meeyua ( @meeyua ) on CodePen .     而且也沒辦法做rwd的部分，既然如此就只能找別的方法了...!【如果有人會請告訴我做法!】我又繼續踏上了尋找寫自定義進度條的新方法之路。     我找到的第二種方式是利用 這個套件 ，真說我差點成功了，差點。     說差點成功的原因是，它的動畫只能跑一次，之後我想用jquery.animate()跑第二次的時候就卡住了，程式有顯示完

Bootstrap 4 Carousel (旋轉木馬)一直都是很常用到也很好用的套件，前幾天因為收到了需要左右滑動網頁區塊的需求，因此思考了一下，用了旋轉木馬為基礎的滑動區塊。 於是我上網搜尋了一下，發現了 這個提問 下面的回答，決定拿來改成我要的樣子。 首先我想關掉自動切換圖片的功能，於是在程式碼中加了 data-interval="false"， <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false"> ... </div> 再來我想把旋轉木馬的既定印象進一步挪掉，於是把左右切換子區塊的按鈕拿掉， <div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel" data-interval="false"> ... <!-- <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev"> <span class="carousel-control-prev-icon" aria-hidden="true"></span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" href="