CSS炫酷圆形导航菜单特效

在这里插入图片描述

css

  1. body {
  2. background-color: #262626
  3. }
  4. .demo {
  5. padding: 2em 0;
  6. transform: translate3d(0, 0, 0);
  7. }
  8. .navbar {
  9. width: 150px;
  10. height: 150px;
  11. line-height: 150px;
  12. border-radius: 50%;
  13. background: #fff;
  14. margin: 70px auto;
  15. position: relative;
  16. cursor: pointer;
  17. text-align: center;
  18. font-size: 1.75em;
  19. font-weight: bold;
  20. color: #383838;
  21. transition: 0.24s 0.2s;
  22. }
  23. .navbar:hover {
  24. background: rgba(255, 255, 255, 0.75);
  25. }
  26. .navbar .menu {
  27. list-style: none;
  28. padding: 0;
  29. margin: 0;
  30. position: absolute;
  31. top: -75px;
  32. left: -75px;
  33. border: 150px solid transparent;
  34. cursor: default;
  35. border-radius: 50%;
  36. transform: scale(0);
  37. transition: transform 1.4s 0.07s;
  38. z-index: -1;
  39. }
  40. .navbar:hover .menu {
  41. transition: transform 0.4s 0.08s, z-index 0s 0.5s;
  42. transform: scale(1);
  43. z-index: 1;
  44. }
  45. .navbar .menu li {
  46. position: absolute;
  47. top: -100px;
  48. left: -100px;
  49. transform-origin: 100px 100px;
  50. transition: all 0.5s 0.1s;
  51. }
  52. .navbar:hover .menu li {
  53. transition: all 0.6s;
  54. }
  55. .navbar .menu li a {
  56. transition:all .4s ease 0s;
  57. width: 45px;
  58. height: 45px;
  59. line-height: 45px;
  60. border-radius: 50%;
  61. background: #fff;
  62. position: absolute;
  63. font-size: 60%;
  64. color: #99b977;
  65. transition: 0.6s;
  66. text-decoration: none;
  67. }
  68. .navbar .menu li a:hover {
  69. background-color: #2860F8;
  70. color: #fff;
  71. }
  72. .navbar:hover .menu li:nth-child(1) {
  73. transition-delay: 0.02s;
  74. transform: rotate(85deg);
  75. }
  76. .navbar:hover .menu li:nth-child(1) a {
  77. transition-delay: 0.04s;
  78. transform: rotate(635deg);
  79. }
  80. .navbar:hover .menu li:nth-child(2) {
  81. transition-delay: 0.04s;
  82. transform: rotate(125deg);
  83. }
  84. .navbar:hover .menu li:nth-child(2) a {
  85. transition-delay: 0.08s;
  86. transform: rotate(595deg);
  87. }
  88. .navbar:hover .menu li:nth-child(3) {
  89. transition-delay: 0.06s;
  90. transform: rotate(165deg);
  91. }
  92. .navbar:hover .menu li:nth-child(3) a {
  93. transition-delay: 0.12s;
  94. transform: rotate(555deg);
  95. }
  96. .navbar:hover .menu li:nth-child(4) {
  97. transition-delay: 0.08s;
  98. transform: rotate(205deg);
  99. }
  100. .navbar:hover .menu li:nth-child(4) a {
  101. transition-delay: 0.16s;
  102. transform: rotate(515deg);
  103. }
  104. .navbar:hover .menu li:nth-child(5) {
  105. transition-delay: 0.1s;
  106. transform: rotate(245deg);
  107. }
  108. .navbar:hover .menu li:nth-child(5) a {
  109. transition-delay: 0.2s;
  110. transform: rotate(475deg);
  111. }
  112. .navbar:hover .menu li:nth-child(6) {
  113. transition-delay: 0.12s;
  114. transform: rotate(285deg);
  115. }
  116. .navbar:hover .menu li:nth-child(6) a {
  117. transition-delay: 0.24s;
  118. transform: rotate(435deg);
  119. }
  120. .navbar:hover .menu li:nth-child(7) {
  121. transition-delay: 0.14s;
  122. transform: rotate(325deg);
  123. }
  124. .navbar:hover .menu li:nth-child(7) a {
  125. transition-delay: 0.28s;
  126. transform: rotate(395deg);
  127. }
  128. .navbar:hover .menu li:nth-child(8) {
  129. transition-delay: 0.16s;
  130. transform: rotate(365deg);
  131. }
  132. .navbar:hover .menu li:nth-child(8) a {
  133. transition-delay: 0.32s;
  134. transform: rotate(355deg);
  135. }
  136. .navbar:hover .menu li:nth-child(9) {
  137. transition-delay: 0.18s;
  138. transform: rotate(405deg);
  139. }
  140. .navbar:hover .menu li:nth-child(9) a {
  141. transition-delay: 0.36s;
  142. transform: rotate(315deg);
  143. }

html

  1. <div class="demo">
  2. <div class="container">
  3. <div class="row">
  4. <div class="col-md-12">
  5. <div class="navbar">主菜单
  6. <ul class="menu">
  7. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-facebook"></a></li>
  8. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-google-plus"></a></li>
  9. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-twitter"></a></li>
  10. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-linkedin"></a></li>
  11. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-pinterest"></a></li>
  12. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-rss"></a></li>
  13. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-instagram"></a></li>
  14. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-skype"></a></li>
  15. <li><a href="https://www.17sucai.com/preview/1424582/2019-10-15/cy/index.html#" class="fa fa-github"></a></li>
  16. </ul>
  17. </div>
  18. </div>
  19. </div>
  20. </div>
  21. </div>

发表评论

表情:
评论列表 (有 0 条评论,52人围观)

还没有评论,来说两句吧...

相关阅读