导航菜单

纯CSS3列表面板导航设计效果

也想出现在这里?联系我们
创客主机

纯CSS3列表面板导航设计效果-创客云
这是一款使用 CSS3 制作的垂直列表面板设计效果。该列表面板可用于制作文章列表,排行列表等。在用户使用鼠标滑过列表项时,列表项会有炫酷的丝带浮动动画特效。

HTML 结构

该列表面板的 HTML 结构如下:使用一个

元素来包裹一组有序列表元素。

  1. <div class="leaderboard">
  2.     <h1>
  3.       <svg class="ico-cup">
  4.         <use xlink:href="#cup"></use>
  5.       </svg>
  6.       Most active Players
  7.     </h1>
  8.     <ol>
  9.       <li>
  10.         <mark>Jerry Wood</mark>
  11.         <small>315</small>
  12.       </li>
  13.       <li>
  14.         <mark>Brandon Barnes</mark>
  15.         <small>301</small>
  16.       </li>
  17.       <li>
  18.         <mark>Raymond Knight</mark>
  19.         <small>292</small>
  20.       </li>
  21.       <li>
  22.         <mark>Trevor McCormick</mark>
  23.         <small>245</small>
  24.       </li>
  25.       <li>
  26.         <mark>Andrew Fox</mark>
  27.         <small>203</small>
  28.       </li>
  29.     </ol>
  30.   </div>
  31. </div>

CSS 样式

列表项的丝带效果使用列表项 li 元素的:before 和:after 伪元素来制作,默认情况下它们的透明度 opacity 为 0,。

  1. .leaderboard ol li mark {
  2.   position: absolute;
  3.   z-index: 2;
  4.   top: 0;
  5.   left: 0;
  6.   width: 100%;
  7.   height: 100%;
  8.   padding: 18px 10px 18px 50px;
  9.   margin: 0;
  10.   background: none;
  11.   color: #fff;
  12. }
  13. .leaderboard ol li mark::before, .leaderboard ol li mark::after {
  14.   content: '';
  15.   position: absolute;
  16.   z-index: 1;
  17.   bottom: -11px;
  18.   left: -9px;
  19.   border-top: 10px solid #c24448;
  20.   border-left: 10px solid transparent;
  21.   -webkit-transition: all .1s ease-in-out;
  22.   transition: all .1s ease-in-out;
  23.   opacity: 0;
  24. }
  25. .leaderboard ol li mark::after {
  26.   left: auto;
  27.   right: -9px;
  28.   border-left: none;
  29.   border-right: 10px solid transparent;
  30. }
  31. .leaderboard ol li small {
  32.   position: relative;
  33.   z-index: 2;
  34.   display: block;
  35.   text-align: right;
  36. }
  37. .leaderboard ol li::after {
  38.   content: '';
  39.   position: absolute;
  40.   z-index: 1;
  41.   top: 0;
  42.   left: 0;
  43.   width: 100%;
  44.   height: 100%;
  45.   background: #fa6855;
  46.   box-shadow: 0 3px 0 rgba(0, 0, 0, 0.08);
  47.   -webkit-transition: all .3s ease-in-out;
  48.   transition: all .3s ease-in-out;
  49.   opacity: 0;
  50. }

当鼠标滑过列表项时,丝带的透明度 opacity 被设置为 1,。

  1. .leaderboard ol li:hover::after {
  2.   opacity: 1;
  3.   -webkit-transform: scaleX(1.06) scaleY(1.03);
  4.           transform: scaleX(1.06) scaleY(1.03);
  5. }
  6. .leaderboard ol li:hover mark::before, .leaderboard ol li:hover mark::after {
  7.   opacity: 1;
  8.   -webkit-transition: all .35s ease-in-out;
  9.   transition: all .35s ease-in-out;
  10. }

完整的 CSS 代码请参考下载文件。

(0)

本文由 创客云 作者:PetitQ 发表,转载请注明来源!

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

钻石珠宝奢侈品DedeCMS织梦模板

Hi, 如果您有主题插件代购(30-600元)汉化等建站相关业务,可以 跟我联系 哦!
欢迎投稿
嘿,欢迎咨询!