- hover動畫 ~~~ .hover-ani { display: inline-block; position: relative; color: #33151e; } .hover-ani::after { content: ''; position: absolute; width: 100%; transform: scaleX(0); height: 2px; bottom: 0; left: 0; background-color: #33151e; transform-origin: bottom right; transition: transform 0.25s ease-out; } .hover-ani:hover::after { transform: scaleX(1); transform-origin: bottom left; } <div class="hover-ani">移動到內容出現動畫</div> ~~~ - 豎線 ~~~ .shortcut{ display: flex; } li { list-style-type: none; margin: 0; padding: 0 0.75rem; } li:not(:last-child) { border-right: 1px solid #d2d5e4; } <ul class="shortcut"> <li>首頁</li> <li>關于</li> <li>聯系</li> </ul> ~~~ - 小三角 bottom向上 top向下 第二個left向右 right向左 ~~~ .triangle { width: 0; height: 0; border-top: 10px solid #333; border-left: 10px solid transparent; border-right: 10px solid transparent; } .triangle { width: 0; height: 0; border-top: 10px solid transparent; border-bottom: 10px solid transparent; border-left: 10px solid #333; } <div class="triangle"></div> ~~~ - 文本截斷 ~~~ .ell-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; } <div class="ell-text">測試文本截斷顯示三個點測試文本截斷顯示三個點.</div> ~~~ - loading ~~~ @keyframes donut-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .loading { display: inline-block; border: 3px solid rgba(0, 0, 0, 0.2); border-left-color: #333; border-radius: 50%; width: 25px; height: 25px; animation: donut-spin 1s linear infinite; } <div class="loading"></div> ~~~ - 美化表格 ~~~ .table {width:90%;background:#ddd; margin: 10px auto;border-collapse:collapse;} .table th, .table td {height:25px;line-height:25px;text-align:center;border:1px solid #ddd;} .table th {background:#eee;font-weight:normal;} .table tr {background:#fff;} .table tr:hover {background: #d6f8dc;} .table td a {color:#06f;text-decoration:none;} .table td a:hover {color:#06f;text-decoration:underline;} ~~~ - 1px水平線 ~~~ .hr1 { width:100%; margin:0 auto; border: 0; height:0; border-top: 1px solid rgba(0, 0, 0, 0.1); } ~~~ - 自定義選擇色 ~~~ .selection::selection { background: deeppink; color: white; } ~~~ - a屬性 ~~~ a[disable]{ opacity:0.5; cursor:default; pointer-events:none} ~~~ - 橫向垂直居中 ~~~ .v-center{ display:flex;align-items: center;justify-content:center; } ~~~ - 必填 ~~~ .req:after{ content: ' *'; color: #EF4F4F; font-weight:bold; } ~~~