图片/图形

18种垂直分页导航按钮动画特效

创客主机

18种垂直分页导航按钮动画特效-创客云
这是一组效果非常炫酷的垂直分页导航按钮动画特效。这组特效通用 18 种效果,可以用于制作幻灯片、页面切换和其它容器组件切换的分页导航按钮。

HTML 结构

生成上面的垂直分页导航效果的 HTML 结构如下:

也想出现在这里?联系我们
WordPress 主题
  1. <nav class="nav nav--timiro">
  2.   <button class="nav__item" aria-label="Item 1"></button>
  3.   <button class="nav__item nav__item--current" aria-label="Item 2"></button>
  4.   <button class="nav__item" aria-label="Item 3"></button>
  5.   <button class="nav__item" aria-label="Item 4"></button>
  6.   <button class="nav__item" aria-label="Item 5"></button>
  7.   <button class="nav__item" aria-label="Item 6"></button>
  8.   <button class="nav__item" aria-label="Item 7"></button>
  9.   <button class="nav__item" aria-label="Item 8"></button>
  10. </nav>

CSS 样式

  1. .nav {
  2.   position: relative;
  3.   width: 8em;
  4.   margin: 0 0 0 3em;
  5. }
  6.  
  7. .nav__item {
  8.   line-height: 1;
  9.   position: relative;
  10.   display: block;
  11.   margin: 0;
  12.   padding: 0;
  13.   letter-spacing: 0;
  14.   color: currentColor;
  15.   border: 0;
  16.   background: none;
  17. }
  18.  
  19. .nav__item:focus {
  20.   outline: none;
  21. }

然后万维 zahi 效果设置特有的 CSS 样式:

  1. /*** Zahi ***/
  2.  
  3. .nav--zahi .nav__item {
  4.   width: 2em;
  5.   height: 2em;
  6. }
  7.  
  8. .nav--zahi .nav__item::before,
  9. .nav--zahi .nav__item::after {
  10.   content: '';
  11.   position: absolute;
  12. }
  13.  
  14. .nav--zahi .nav__item:not(:last-child)::before {
  15.   top: calc(2em - 9px);
  16.   left: 5px;
  17.   width: 2px;
  18.   height: calc(2em - 12px);
  19.   background: #98322a;
  20. }
  21.  
  22. .nav--zahi .nav__item::after {
  23.   top: 50%;
  24.   left: 0;
  25.   width: 12px;
  26.   height: 12px;
  27.   margin: -5px 0 0 0;
  28.   border: 2px solid #98322a;
  29.   border-radius: 50%;
  30.   background: #f44336;
  31.   -webkit-transition: -webkit-transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s;
  32.   transition: transform 0.3s, border-color 0.3s, border-width 0.3s, background 0.3s;
  33. }
  34.  
  35. .nav--zahi .nav__item--current::after {
  36.   border-width: 1px;
  37.   border-color: #fff;
  38.   -webkit-transform: scale3d(1.6,1.6,1);
  39.   transform: scale3d(1.6,1.6,1);
  40. }
  41.  
  42. .nav--zahi .nav__item:not(.nav__item--current):focus::after,
  43. .nav--zahi .nav__item:not(.nav__item--current):hover::after {
  44.   border-color: #fff;
  45.   background: #fff;
  46. }
  47.  
  48. .nav--zahi .nav__item-title {
  49.   font-family: 'Roboto Condensed', sans-serif;
  50.   line-height: 1.5;
  51.   display: block;
  52.   position: relative;
  53.   padding: 0 0 0 2.5em;
  54.   white-space: nowrap;
  55.   opacity: 0.3;
  56.   color: #98322a;
  57.   -webkit-transition: opacity 0.3s, color 0.3s;
  58.   transition: opacity 0.3s, color 0.3s;
  59. }
  60.  
  61. .nav--zahi .nav__item:not(.nav__item--current):focus .nav__item-title,
  62. .nav--zahi .nav__item:not(.nav__item--current):hover .nav__item-title {
  63.   opacity: 0.5;
  64. }
  65.  
  66. .nav--zahi .nav__item--current .nav__item-title {
  67.   opacity: 1;
  68.   color: #fff;
  69. }

其它效果的制作请参考下载文件。
Codrops 地址:http://tympanus.net/codrops/2016/09/02/inspiration-navigation-indicators/

(0)

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

阿里云

热评文章

发表评论

精彩推荐

Supro - 极简电商WordPress汉化主题

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

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

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