天柑地芝

大家好，宅在家裡工作、抗疫生活的這段期間，還有什麼時刻比收到小垃圾時的心情還棒呢? 這次開箱了和 紙膠帶、貼紙、硫酸紙素材本還有封蠟(火漆章) 等各種手帳用素材，其實在幾周前就已經收到貨，但是絕對不是因為 懶 所以到現在才發文。 就在一邊打著介紹時，電腦桌旁的地毯上一直傳來要我幫忙拍屁屁的貓叫聲...... (喵凹凹凹凹凹~~~) 廢話不多說，下面有大量的照片，請慢用uwu (請原諒不專業拍照技巧) 先從紙膠帶類開始囉~ 【粟原之鏡 - 魔法陣】 尺寸: 50mm x 3m x 35mm 屬於寬尺寸和紙膠帶，粟原之鏡其他款的圖案也很好看，但是 魔法陣怎麼可以不買呢 ლ (´ ڡ ` ლ ) 【萬象天照系列燙金和紙膠帶】 尺寸:  15mm x 3m 質感棒棒的一組燙金和紙膠帶，貼起來效果真的很美。總共出了13種圖案款式，但是大部分都缺貨中......所以只買到了照片中7種款式，希望哪天可以湊齊13款。 湊齊也許可以召喚什麼......? ⬇綠色款式是瑞亞 / 藍色款式是夜闌 【陌墨 文藝復興系列-仲夏夜之夢燙金貼紙包】 內容:  20個圖案 / 每個圖案3張，共60枚 喜歡自然風格的不要錯過這款，另外就是貼紙的尺寸大到小都有，使用時要注意尺寸喔~ 同一個文藝復興系列還有入手宇宙款的，不過是要送禮用的這裡就不展示啦! 【舊與系列素材本 木塵 硫酸紙素材本】 規格:  6cm x 4cm，共100張 硫酸紙素材本是第一次購買的小垃圾類型，是半透明的紙張上面印刷圖案，另外也有提供空白的硫酸紙可以自己畫圖案或寫字上去製作素材唷~ 【爆爆兔封蠟】 他們家的配色是真的都還不錯，這次還買了琥珀色的透明蠟粒來玩，第一次玩還不太能駕馭，熟悉之後會陸續放上用它蓋出來的成品~ 難得看到好看的混色配色，還是綠色系的，還不買爆!!   ﾟ ∀ ﾟ 這次主要用了新買的貓掌印來蓋，是不是很療育啊。 有一些顏色是之前買的蠟粒，才混出了一系列可愛貓掌， 看起來超好吃的(疑?) 看了這麼多照片是不是很累，這次開箱就到此為止，之後如果有更多美美的素材也會繼續分享>wO By 吸血兔

上一篇 講解了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="