機器視覺雜話(ZA WARUDO)

$   Html, javascript, css如何作數字跳動的動畫呢？ 數字動畫就是畫面上的數字會改變。如從1變到2，再從2變到3。網頁的動畫在如控制面板(dashboard)上很有用。 本篇在css的部分使用<style>，如下： < style > @property --percent { syntax: "<number>"; initial-value : 0; inherits: false; } @property --temp { syntax: "<number>"; initial-value : 0; inherits: false; } @property --v1 { syntax: "<integer>"; initial-value : 0; inherits: false; } @property --v2 { syntax: "<integer>"; initial-value : 0; inherits: false; } #id_A { font : 800 40px monospace ; padding : 2rem ; transition : --percent 1s ; --temp : calc ( var ( --percent ) * 100 ); --v1 : max( var ( --temp ) - 0.5 , 0 ); --v2 : max(( var ( --temp ) - var ( --v1 )) * 100 - 0.5, 0); counter-reset : v1 var ( ...

在CSS中, class選擇器為英文的句號 (“.”) 而 ID 選擇器為一個   hash character   (“#”). 對於CSS 可能會有如下的程式碼: #id_A { background-color : coral ; padding : 25px } .class_A { color : red ; font-weight : bold ; } HTML 如果要參考 CSS 則利用  id  and  class這2個關鍵字 . 如下所示: < div id = " id_A " > < h1 >Healthy food </ h1 > < p class = " class_A " >OK, It's a healthy food. </ p > < p class = " class_A " > VVVVVV VLDJFLJ </ p > </ div > ID與class的差異在ID僅能出現在整份文件中的一個地方，而class則為樣板，可以有很多組件（item）為相同的class，類似物件導向程式設計的class產生的instance則僅有1個ID。 HTML的選擇器可以簡單的使用HTML選擇器，所以如p.car{/* whatever */}可以僅選擇在paragraph元件中的car類別。 thanks for watching.

to test button in blogger, I using html code with javascript to complish this function, I reference the page stackoverflow  and  https://www.htmlcodegenerator-tools.com/2019/11/adding-button-in-blogger-post.html