导航菜单

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

阿里云


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

HTML 结构

该列表面板的 HTML 结构如下:使用一个<div>元素来包裹一组有序列表元素。

也想出现在这里?联系我们
创客主机
  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 代码请参考下载文件。

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

已有 553 人购买
  • 41hu
查看演示升级 VIP立刻购买

演示地址 下载地址
收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!