css3 · 萬能Web開發文檔筆記

# css3 - hover動畫 ``` <pre class="calibre14">``` .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> ``` ``` - 豎線 ``` <pre class="calibre14">``` .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向左 ``` <pre class="calibre14">``` .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> ``` ``` - 文本截斷 ``` <pre class="calibre14">``` .ell-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; width: 200px; } <div class="ell-text">測試文本截斷顯示三個點測試文本截斷顯示三個點.</div> ``` ``` - loading ``` <pre class="calibre14">``` @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> ``` ``` - 美化表格 ``` <pre class="calibre14">``` .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水平線 ``` <pre class="calibre14">``` .hr1 { width:100%; margin:0 auto; border: 0; height:0; border-top: 1px solid rgba(0, 0, 0, 0.1); } ``` ``` - 自定義選擇色 ``` <pre class="calibre14">``` .selection::selection { background: deeppink; color: white; } ``` ``` - a屬性 ``` <pre class="calibre14">``` a[disable]{ opacity:0.5; cursor:default; pointer-events:none} ``` ``` - 橫向垂直居中 ``` <pre class="calibre14">``` .v-center{ display:flex;align-items: center;justify-content:center; } ``` ``` - 必填 ``` <pre class="calibre16">``` .req:after{ content: ' *'; color: #EF4F4F; font-weight:bold; } ``` ```