利用純CSS實現彩色tag標籤雲

這篇文章主要爲大家詳細介紹了CSS3+DIV實現漂亮的動畫彩色標籤,鼠標移動會有動畫 ,很神奇的動畫效果,感興趣的小夥伴們可以參考一下
QQ截圖20220706105941.png

  1. .dict .pcolor a:nth-child(9n){background-color: #4A4A4A;}
  2. .dict .pcolor a:nth-child(9n+1){background-color: #428BCA;}
  3. .dict .pcolor a:nth-child(9n+2){background-color: #5CB85C;}
  4. .dict .pcolor a:nth-child(9n+3){background-color: #D9534F;}
  5. .dict .pcolor a:nth-child(9n+4){background-color: #567E95;}
  6. .dict .pcolor a:nth-child(9n+5){background-color: #B433FF;}
  7. .dict .pcolor a:nth-child(9n+6){background-color: #00ABA9;}
  8. .dict .pcolor a:nth-child(9n+7){background-color: #B37333;}
  9. .dict .pcolor a:nth-child(9n+8){background-color: #FF6600;}
  10. .dict .pcolor a{opacity: 0.80;filter:alpha(opacity=80);color: #fff;background-color: #428BCA;display: inline-block;margin: 0 5px 5px 0;padding: 0 6px;line-height: 30px}
  11. .dict  a:hover{opacity: 1;filter:alpha(opacity=100);}
  12. .dict h3{font-size: 18px;color: #666;border-bottom: 1px solid #eaeaea;background-color: #fbfbfb;margin: 0;padding: 11px 15px 10px;margin-bottom:15px}
複製代碼






上一篇:CSS 漸變色 (超好看)
下一篇:美化----VS Code 文件小圖標插件 “VScode icon”