CSSでダミータグクラウドを作成する

performance testing

stress testing

conformance testing

acceptane testing

smoke testing

regression testing

white box testing

system testing

black box testing

load testing

compatibility testing

unit testing

 
これが私たちが作成するラベルクラウド効果です.
 
HTMLコード

<ul class="cloud">
    <li>performance testingli>
    <li>stress testingli>
    <li>conformance testingli>
    <li>acceptane testingli>
    <li>smoke testingli>
    ...
ul>

 
CSSコード

/*   ul     */

.cloud {
    display: inline;
    list-style-type: none;
    width: 400px;
}
.cloud li {
    list-style: none;
    display: inline;
}

/*   ul     */

.cloud li:nth-of-type(3n + 1) {
    font-size: 1.25em;
}
.cloud li:nth-of-type(4n+3) {
    font-size: 1.5em;
}
.cloud li:nth-of-type(5n - 3) {
    font-size: 1em;
}

 
このラベルクラウド効果はランダムではなく、:nth-of-typeというCSS属性で制御されているので、ページをリフレッシュして見た効果は今回と同じです.
 
でも何の関係があるのか、ラベルクラウド効果があります.自分の必要に応じてコードを変更することができます.
 
参照リンク:Tag cloud of random sizes in pure CSS
 
(完)
転載先:https://www.cnblogs.com/zhangbao/p/5841915.html