這次帶給大家Css Secret該怎麼使用，使用Css Secret的注意事項有哪些，以下就是實戰案例，一起來看一下。
去年買了一本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;
}相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
#Safari瀏覽器select下拉清單文字太長不換行的解決方法
以上是Css Secret該怎麼使用的詳細內容。更多資訊請關注PHP中文網其他相關文章！
