Css Secret 案例全套

---

github地址

案例地址

去年買了一本CSS揭秘的css專題書，該書揭示了 47 個鮮為人知的 CSS 技巧，主要內容包括背景與邊框、形狀、 視覺效果、字體排印、用戶體驗、結構與布局、過渡與動畫等。去年買入時，就決定將里面所有Demo案例全部擼一遍，作為自己2018年學習清單中的首項。這個過程中也可以學習到一些比較實用的css技巧，對于工作中css布局上面也有挺大的幫助。

下面是幾種比較有趣的css場景的實現方式：

餅圖(基于transform實現方式)

<div class="picture1">20</div /*基于transform的解決方案*/.picture1 {position: relative;width: 100px;line-height: 100px;text-align: center;color: transparent;background: yellowgreen;background-image: linear-gradient(to right, transparent 50%, #655 0);border-radius: 50%;/*animation-delay: -20s;*/}@keyframes spin {to { transform: rotate(.5turn); }}@keyframes bg {50% { background: #655; }}.picture1::before {content: '';position: absolute;top: 0;left: 50%;width: 50%;height: 100%;border-radius: 0 100% 100% 0 / 50%;background-color: inherit;transform-origin: left;animation: spin 50s linear infinite,bg 100s step-end infinite;animation-play-state: paused;animation-delay: inherit;} // 基于transform的解決方案let picture1 = document.querySelector('.picture1');let rate1 = parseFloat(picture1.textContent);picture1.style.animationDelay = `-${rate1}s`;

餅圖(基于svg實現方式)

<svg viewBox="0 0 32 32"><circle id="circle2" r="16" cx="16" cy="16"></circle></svg> /*基于svg的解決方案*/svg {width: 100px;height: 100px;transform: rotate(-90deg);background: yellowgreen;border-radius: 50%;}circle{fill: yellowgreen;stroke: #655;stroke-width: 32;}#circle2 {stroke-dasharray: 38 100;}

插入換行

<dl><dt>Name:</dt><dd>wushaobin</dd><dt>Email:</dt><dd>739288994@qq.com</dd><dd>12345@qq.com</dd><dd>54321@qq.com</dd><dt>Location:</dt><dd>shenzhen</dd></dl> dt,dd {display: inline;}dd{margin: 0;font-weight: bold;}dd dt::before {content: '\A';white-space: pre;}dd dd::before {content: ', ';font-weight: normal;}

總結

以上是生活随笔為你收集整理的Css Secret 案例Demo全套的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。