css secret 案例全套github地址案例地址去年买了一本css揭秘的css专题书，该书揭示了 47 个鲜为人知的 css 技巧，主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。去年买入时，就决定将里面所有demo案例全部撸一遍，作为自己2018年学习清单中的首项。这个过程中也可以学习到一些比较实用的css技巧，对于工作中css布局上面也有挺大的帮助。
下面是几种比较有趣的css场景的实现方式：
饼图(基于transform实现方式)
<p class="picture1">20</p
/*基于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; }
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
gulp命令生成精灵图
safari浏览器select下拉列表文字太长不换行的解决方法
以上就是css secret应该怎么使用的详细内容。