CSS3 and html js 实现飞行标签导航条实现飞行标签效果-网站设计cid1088

作者code
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>flying effect</title>
  8. <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  10. <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
  11. <script
  12. src="https://code.jquery.com/jquery-3.3.1.js"
  13. ></script>
  14. <style>
  16. body {
  17. background-image: url(photo1.jpg);
  18. background-size: cover;
  19. font-family: 'Roboto Condensed', sans-serif;
  20. overflow: hidden;
  21. }
  22. h1 {
  23. margin: 0;
  24. font-size: 22px;
  25. line-height: 1;
  26. color: #423e37;
  27. }
  28. .page {
  29. width: 100vw;
  30. height: 100vh;
  31. min-height: 700px;
  32. overflow: hidden;
  33. margin-left: -25px;
  34. margin-top: 45px;
  35. }
  36. .tabs-controls {
  37. position: relative;
  38. z-index: 10;
  39. display: flex;
  40. justify-content: center;
  41. align-items: stretch;
  42. width: 100%;
  43. max-width: 800px;
  44. margin: 0 auto;
  45. box-sizing: border-box;
  46. padding: 50px 0 100px;
  47. list-style-type: none;
  48. }
  49. .tabs-controls-link {
  50. position: relative;
  51. display: block;
  52. padding: 16px 32px;
  53. font-size: 18px;
  54. font-weight: 700;
  55. color: white;
  56. text-transform: uppercase;
  57. text-decoration: none;
  58. }
  59. .tabs-controls-link:after {
  60. position: absolute;
  61. left: 0;
  62. right: 0;
  63. bottom: 0;
  64. display: block;
  65. width: 0;
  66. height: 4px;
  67. background-color: white;
  68. border-radius: 2px;
  69. margin: auto;
  70. content: '';
  71. transition: width 0.4s;
  72. }
  73. .tabs-controls-link-active:after {
  74. width: 100%;
  75. }
  76. .cards-container {
  77. position: relative;
  78. z-index: 1;
  79. width: 500px;
  80. height: calc(100vh - 205px);
  81. margin: 0 auto;
  82. }
  83. .card {
  84. position: absolute;
  85. width: 500px;
  86. height: 300px;
  87. background-color: #edebd7;
  88. border: 1px solid #423e37;
  89. box-shadow: 9px 11px 3px 0px rgba(0, 0, 0, 0.2);
  90. box-sizing: border-box;
  91. padding: 40px;
  92. transition: transform 0.3s, opacity 0.2s;
  93. }
  94. .card.hidden {
  95. z-index: 100;
  96. background-color: #fff;
  97. color: #fff;
  98. opacity: 0;
  99. transition: color 0.5s, background-color 0.5s, transform 1s, opacity 0.2s 0.4s;
  100. }
  101. .card.hidden h1 {
  102. color: #fff;
  103. transition: color 0.5s;
  104. }
  105. .card.hidden:nth-of-type(1) {
  106. transform: rotate(-61deg) translateX(101%) translateY(-42%) scale(0.7) skewX(3deg) skewY(5deg);
  107. }
  108. .card.hidden:nth-of-type(2) {
  109. transform: rotate(-20deg) translateX(101%) translateY(-30%) scale(0.6) skewX(6deg) skewY(12deg);
  110. }
  111. .card.hidden:nth-of-type(3) {
  112. transform: rotate(-89deg) translateX(101%) translateY(-41%) scale(1) skewX(4deg) skewY(1deg);
  113. }
  114. .card.hidden:nth-of-type(4) {
  115. transform: rotate(-88deg) translateX(101%) translateY(-26%) scale(0.5) skewX(9deg) skewY(11deg);
  116. }
  117. .card.hidden:nth-of-type(5) {
  118. transform: rotate(-80deg) translateX(101%) translateY(-40%) scale(0.6) skewX(12deg) skewY(5deg);
  119. }
  120. .card.hidden:nth-of-type(6) {
  121. transform: rotate(-85deg) translateX(101%) translateY(-21%) scale(0.3) skewX(12deg) skewY(7deg);
  122. }
  123. .card:nth-of-type(1) {
  124. z-index: 5;
  125. transform: translateX(0px) translateY(0px);
  126. }
  127. .card:nth-of-type(2) {
  128. z-index: 4;
  129. transform: translateX(10px) translateY(10px);
  130. }
  131. .card:nth-of-type(3) {
  132. z-index: 3;
  133. transform: translateX(20px) translateY(20px);
  134. }
  135. .card:nth-of-type(4) {
  136. z-index: 2;
  137. transform: translateX(30px) translateY(30px);
  138. }
  139. .card:nth-of-type(5) {
  140. z-index: 1;
  141. transform: translateX(40px) translateY(40px);
  142. }
  143. .card:nth-of-type(6) {
  144. z-index: 0;
  145. transform: translateX(50px) translateY(50px);
  146. }
  148. .social .fa{
  149. background-image: url(photo1.jpg);
  150. background-size: cover;
  151. width: 35px;
  152. height: 35px;
  153. color: white;
  154. text-align: center;
  155. line-height: 35px;
  156. margin-top: 20px;
  157. }
  158. </style>
  159. </head>
  160. <body>
  161. <section class="page">
  162. <section>
  163. <ul class="tabs-controls">
  164. <li class="tabs-controlsitem">
  165. <a href="#" class="tabs-controls-link tabs-controls-link-active" data-id="1">
  166. HOME
  167. </a>
  168. </li>
  169. <li class="tabs-controls-item">
  170. <a href="#" class="tabs-controls-link" data-id="2">
  171. GALLERY
  172. </a>
  173. </li>
  174. <li class="tabs-controls-item">
  175. <a href="#" class="tabs-controls-link" data-id="3">
  176. TEAM
  177. </a>
  178. </li>
  179. <li class="tabs-controls-item">
  180. <a href="#" class="tabs-controls-link" data-id="4">
  181. TESTMONIAL
  182. </a>
  183. </li>
  184. <li class="tabs-controls-item">
  185. <a href="#" class="tabs-controls-link" data-id="5">
  186. FAQ
  187. </a>
  188. </li>
  189. <li class="tabs-controls-item">
  190. <a href="#" class="tabs-controls-link" data-id="6">
  191. LOCATION
  192. </a>
  193. </li>
  194. </ul>
  195. </section>
  196. <section class="cards-container">
  197. <div class="card card-current" id="1">
  198. <h1>HOME</h1>
  199. <br>
  200. <p>
  201. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
  202. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  203. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  204. consequat.
  205. </p>
  206. <div class="social">
  207. <i class="fa fa-facebook"></i>
  208. <i class="fa fa-twitter"></i>
  209. <i class="fa fa-linkedin"></i>
  210. <i class="fa fa-youtube"></i>
  211. </div>
  212. </div>
  213. <div class="card" id="2">
  214. <h1>GALLERY</h1>
  215. <br>
  216. <p>
  217. Elit, sed do eiusmod
  218. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  219. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  220. consequat.
  221. </p>
  222. <div class="social">
  223. <i class="fa fa-facebook"></i>
  224. <i class="fa fa-twitter"></i>
  225. <i class="fa fa-linkedin"></i>
  226. <i class="fa fa-youtube"></i>
  227. </div>
  228. </div>
  229. <div class="card" id="3">
  230. <h1>TEAM</h1>
  231. <br>
  232. <p>
  233. Consectetur adipisicing elit, sed do eiusmod
  234. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  235. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  236. consequat.
  237. </p>
  238. <div class="social">
  239. <i class="fa fa-facebook"></i>
  240. <i class="fa fa-twitter"></i>
  241. <i class="fa fa-linkedin"></i>
  242. <i class="fa fa-youtube"></i>
  243. </div>
  244. </div>
  245. <div class="card" id="4">
  246. <h1>TESTIMONIAL</h1>
  247. <br>
  248. <p>
  249. Sed do eiusmod
  250. tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
  251. quis nostrcaecat cupidatat nonv proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  252. </p>
  253. <div class="social">
  254. <i class="fa fa-facebook"></i>
  255. <i class="fa fa-twitter"></i>
  256. <i class="fa fa-linkedin"></i>
  257. <i class="fa fa-youtube"></i>
  258. </div>
  259. </div>
  260. <div class="card" id="5">
  261. <h1>FAQ</h1>
  262. <br>
  263. <p>
  264. Ut enim ad minim veniam,
  265. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  266. consequat. Duis aute irure dolor in reprehenderit in vo cupidatat non
  267. proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  268. </p>
  269. <div class="social">
  270. <i class="fa fa-facebook"></i>
  271. <i class="fa fa-twitter"></i>
  272. <i class="fa fa-linkedin"></i>
  273. <i class="fa fa-youtube"></i>
  274. </div>
  275. </div>
  276. <div class="card" id="6">
  277. <h1>LOCATION</h1>
  278. <br>
  279. <p>
  280. Labore et dolore magna aliqua. Ut enim ad minim veniam,
  281. quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
  282. consequat. Duis aute irure dolor in reprehenderit in volupest laborum.
  283. </p>
  284. <div class="social">
  285. <i class="fa fa-facebook"></i>
  286. <i class="fa fa-twitter"></i>
  287. <i class="fa fa-linkedin"></i>
  288. <i class="fa fa-youtube"></i>
  289. </div>
  290. </div>
  291. </section>
  292. </section>
  293. <script>
  294. $(document).ready(function() {
  295. var oldId = null;
  297. $('.tabs-controls-link').click(function(e) {
  298. e.preventDefault();
  300. if ($(this).hasClass('tabs-controls-link-active')) {
  301. return false;
  302. }
  304. var currentId = parseInt($(this).data('id'), 10);
  305. $('.tabs-controls-link-active').removeClass('tabs-controls-link-active');
  306. $(this).addClass('tabs-controls-link-active');
  308. if (currentId < oldId) { // item is hidden
  309. var timing = $('.card.hidden').length * 100;
  310. $('.card').each(function(index) {
  311. if (index > (currentId - 1 ) || index == (currentId - 1)) {
  312. window.setTimeout(function() {
  313. $('.card').eq(index).removeClass('hidden');
  314. }, timing - (index * 100));
  315. }
  316. });
  317. } else {
  318. $('.card').each(function(index) {
  319. if (index < (currentId - 1)) {
  320. window.setTimeout(function() {
  321. $('.card').eq(index).addClass('hidden');
  322. }, index * 100);
  323. }
  324. });
  325. }
  327. oldId = currentId;
  328. });
  329. });
  331. </script>
  332. </body>
  333. </html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flying effect</title>
          
     
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

    <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
    <script
  src="https://code.jquery.com/jquery-3.3.1.js"
   ></script>
    <style>
     
body {
  background-image: url(photo1.jpg);
    background-size: cover;
  font-family: 'Roboto Condensed', sans-serif;
    overflow: hidden;
}
h1 {
  margin: 0;
  font-size: 22px;
  line-height: 1;
  color: #423e37;
}
.page {
  width: 100vw;
  height: 100vh;
  min-height: 700px;
  overflow: hidden;
    margin-left: -25px;
    margin-top: 45px;
}
.tabs-controls {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 50px 0 100px;
  list-style-type: none;
}
.tabs-controls-link {
  position: relative;
  display: block;
  padding: 16px 32px;
  font-size: 18px;
  font-weight: 700;
  color: white;
  text-transform: uppercase;
  text-decoration: none;
}
.tabs-controls-link:after {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: block;
  width: 0;
  height: 4px;
  background-color: white;
  border-radius: 2px;
  margin: auto;
  content: '';
  transition: width 0.4s;
}
.tabs-controls-link-active:after {
  width: 100%;
}
.cards-container {
  position: relative;
  z-index: 1;
  width: 500px;
  height: calc(100vh - 205px);
  margin: 0 auto;
}
.card {
  position: absolute;
  width: 500px;
  height: 300px;
  background-color: #edebd7;
  border: 1px solid #423e37;
  box-shadow: 9px 11px 3px 0px rgba(0, 0, 0, 0.2);
  box-sizing: border-box;
  padding: 40px;
  transition: transform 0.3s, opacity 0.2s;
}
.card.hidden {
  z-index: 100;
  background-color: #fff;
  color: #fff;
  opacity: 0;
  transition: color 0.5s, background-color 0.5s, transform 1s, opacity 0.2s 0.4s;
}
.card.hidden h1 {
  color: #fff;
  transition: color 0.5s;
}
.card.hidden:nth-of-type(1) {
  transform: rotate(-61deg) translateX(101%) translateY(-42%) scale(0.7) skewX(3deg) skewY(5deg);
}
.card.hidden:nth-of-type(2) {
  transform: rotate(-20deg) translateX(101%) translateY(-30%) scale(0.6) skewX(6deg) skewY(12deg);
}
.card.hidden:nth-of-type(3) {
  transform: rotate(-89deg) translateX(101%) translateY(-41%) scale(1) skewX(4deg) skewY(1deg);
}
.card.hidden:nth-of-type(4) {
  transform: rotate(-88deg) translateX(101%) translateY(-26%) scale(0.5) skewX(9deg) skewY(11deg);
}
.card.hidden:nth-of-type(5) {
  transform: rotate(-80deg) translateX(101%) translateY(-40%) scale(0.6) skewX(12deg) skewY(5deg);
}
.card.hidden:nth-of-type(6) {
  transform: rotate(-85deg) translateX(101%) translateY(-21%) scale(0.3) skewX(12deg) skewY(7deg);
}
.card:nth-of-type(1) {
  z-index: 5;
  transform: translateX(0px) translateY(0px);
}
.card:nth-of-type(2) {
  z-index: 4;
  transform: translateX(10px) translateY(10px);
}
.card:nth-of-type(3) {
  z-index: 3;
  transform: translateX(20px) translateY(20px);
}
.card:nth-of-type(4) {
  z-index: 2;
  transform: translateX(30px) translateY(30px);
}
.card:nth-of-type(5) {
  z-index: 1;
  transform: translateX(40px) translateY(40px);
}
.card:nth-of-type(6) {
  z-index: 0;
  transform: translateX(50px) translateY(50px);
}

        .social .fa{
           background-image: url(photo1.jpg);
            background-size: cover;
            width: 35px;
            height: 35px;
            color: white;
            text-align: center;
            line-height: 35px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <section class="page">
  <section>
    <ul class="tabs-controls">
      <li class="tabs-controlsitem">
        <a href="#" class="tabs-controls-link tabs-controls-link-active" data-id="1">
          HOME
        </a>
      </li>
      <li class="tabs-controls-item">
        <a href="#" class="tabs-controls-link" data-id="2">
          GALLERY
        </a>
      </li>
      <li class="tabs-controls-item">
        <a href="#" class="tabs-controls-link" data-id="3">
          TEAM
        </a>
      </li>
      <li class="tabs-controls-item">
        <a href="#" class="tabs-controls-link" data-id="4">
          TESTMONIAL
        </a>
      </li>
      <li class="tabs-controls-item">
        <a href="#" class="tabs-controls-link" data-id="5">
          FAQ
        </a>
      </li>
      <li class="tabs-controls-item">
        <a href="#" class="tabs-controls-link" data-id="6">
          LOCATION
        </a>
      </li>
    </ul>
  </section>
  <section class="cards-container">
    <div class="card card-current" id="1">
      <h1>HOME</h1>
      <br>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <div class="social">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-youtube"></i>
      </div>
    </div>
    <div class="card" id="2">
      <h1>GALLERY</h1>
      <br>
      <p>
        Elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <div class="social">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-youtube"></i>
      </div>
    </div>
    <div class="card" id="3">
      <h1>TEAM</h1>
      <br>
      <p>
        Consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat.
      </p>
      <div class="social">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-youtube"></i>
      </div>
    </div>
    <div class="card" id="4">
      <h1>TESTIMONIAL</h1>
      <br>
      <p>
        Sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrcaecat cupidatat nonv proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <div class="social">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-youtube"></i>
      </div>
    </div>
    <div class="card" id="5">
      <h1>FAQ</h1>
      <br>
      <p>
        Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in vo cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
      <div class="social">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-youtube"></i>
      </div>
    </div>
    <div class="card" id="6">
      <h1>LOCATION</h1>
      <br>
      <p>
        Labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in volupest laborum.
      </p>
      <div class="social">
          <i class="fa fa-facebook"></i>
          <i class="fa fa-twitter"></i>
          <i class="fa fa-linkedin"></i>
          <i class="fa fa-youtube"></i>
      </div>
    </div>
  </section>
</section>
<script>
   $(document).ready(function() {
  var oldId = null;

  $('.tabs-controls-link').click(function(e) {
    e.preventDefault();

    if ($(this).hasClass('tabs-controls-link-active')) {
      return false;
    }

    var currentId = parseInt($(this).data('id'), 10);
    $('.tabs-controls-link-active').removeClass('tabs-controls-link-active');
    $(this).addClass('tabs-controls-link-active');

    if (currentId < oldId) { // item is hidden
      var timing = $('.card.hidden').length * 100;
      $('.card').each(function(index) {
        if (index > (currentId - 1 ) || index == (currentId - 1)) {
          window.setTimeout(function() {
            $('.card').eq(index).removeClass('hidden');
          }, timing - (index * 100));
        }
      });
    } else {
      $('.card').each(function(index) {
        if (index < (currentId - 1)) {
          window.setTimeout(function() {
            $('.card').eq(index).addClass('hidden');
          }, index * 100);
        }
      });
    }

    oldId = currentId;
  });
}); 
    
</script>
</body>
</html>

在线演示

让链接同时具备两种打开方式
获取源码: Tabrrrrr
下载数:129人次, 文件大小: 13.7 KB, 上传日期: 2020年-11 月-26日

公众号回复:gcode  获取解压密码

qrcode_for_gh_6ea2c28a1709_258 (1)

3,085 人查阅

类似文章