門外漢的筆記

width:300px;
height:100px;
background-color:#ffffff;
border-radius:.375rem; //邊框圓角
box-shadow: 0 1px 0 3px rgba(37,32,31,.5);  //框陰影 上 右 下 左 R G B 透明度

aria-hidden="true"

display:inline-block; 顯示在同一列

position: relative; /*相對位置, 可設top:5px; left:10px; 等, 該物件移動後, 不影響其他物件位置.*/

position: absolute; /*絕對位置, 可設top:5px; left:10px; 等, 該物件位置移動後,後面物件會跟著動.*/

通常上面兩個是組合使用 先設相對位置再設絕對位置,

或是使用多個position: absolute組合成一個圖案物件

要注意position: absolute

1.會影響自動響應網頁的寬度與高度的調整

2. 當頁面寬度變小無法容納兩個水平物件時, 右邊物件會與左邊物件重疊, 不會移動至下方.

line-height:10px; //行高間距

animation-name: MoveToRight;    /*動畫名稱，呼叫 keyframe的名稱*/
animation-duration: 4s;    /*動畫持續時間(秒)*/
animation-delay: 2s;    /*動畫延遲開始時間(秒)*/
animation-iteration-count: infinite;    /*動畫次數(infinite 為無限次)*/  

position:relative; 

/*動畫內容*/
@keyframes MoveToRight {

/*使用關鍵影格*/
    0% { left: 0; }
    25% { left: 100px;background-color:#FFFFFF }
    50% { left: 25%; background-color:#F1F1FF }
    75% { left: 25%;background-color:#1FF1FF }
    100% { left: 25%;background-color:#FFFFFF }
/*使用from to*/
from{background-color:#FFFFFF; left:0px;top:0px;}
to{background-color:#000000;left:0px;top0px;}
}

animation: my_animation .5s linear 0s infinite normal forwards;

animation-fill-mode: forwards;/*讓動畫不回到原本的狀態*/

margin:auto;