这次给大家带来Css Secret应该怎么使用，使用Css Secret的注意事项有哪些，下面就是实战案例，一起来看一下。
Css Secret 案例全套
github地址
案例地址
去年买了一本CSS揭秘的css专题书，该书揭示了 47 个鲜为人知的 CSS 技巧，主要内容包括背景与边框、形状、 视觉效果、注意事项、用户体验、结构与布局、过渡与动画等。去年买入时，就决定将里面所有Demo案例全部撸一遍，作为自己2018年学习清单中的首项。这个过程中也可以学习到一些比较实用的css技巧，对于工作中css布局上面也有挺大的帮助。
下面是几种比较有趣的css场景的实现方式：
饼图(基于transform实现方式)
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的解决方案*/ 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; }
登录后复制
插入换行
- Name:
- wushaobin
- Email:
- 739288994@qq.com
- 12345@qq.com
- 54321@qq.com
- Location:
- shenzhen
登录后复制
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应该怎么使用的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2780936.html
