A pure css3 animation loading navigation, css3 animation loading navigation

A pure css3 animation loading navigation, css3 animation loading navigation

I have previously introduced several navigation menus for you. Today I will introduce you to an animation loading navigation implemented by pure css3. When this navigation appears, it appears as an animation. As follows:

Download Online Preview source code

Implementation code.

Html code:

 <ul class="main-menu">        <li class="main-menu-item active"><a href="#">Home</a></li><li class="main-menu-item">            <a href="#">About Us</a></li><li class="main-menu-item"><a href="#">Another Link</a></li><li                class="main-menu-item"><a href="#">And another</a></li><li class="main-menu-item"><a                    href="#">Stuff</a></li><li class="main-menu-item"><a href="#">Help</a></li><li class="main-menu-item">                        <a href="#">Contact</a></li></ul>

Css code:

   *, *:after, *:before {  -moz-box-sizing: border-box;       box-sizing: border-box;  margin: 0;  padding: 0;}html, body {  background: #f0f0f0;  font-family: Helvetica, sans-serif;  height: 100%;}.main-menu {  margin: auto;  width: 960px;  text-align: center;  position: relative;  list-style-type: none;  margin-top: 2em;}.main-menu::after,.main-menu-item.active::after {  content: '';  display: inline-block;  position: absolute;}.main-menu::after {  width: 70%;  height: 2px;  background: #9B1C27;  -webkit-animation: menuLine 1s ease forwards;          animation: menuLine 1s ease forwards;  -webkit-transform: scaleX(0);      -ms-transform: scaleX(0);          transform: scaleX(0);  bottom: 0;  left: 0;  right: 0;  margin: auto;  opacity: 0;}@-webkit-keyframes menuLine {  to {    -webkit-transform: scaleX(1);            transform: scaleX(1);    opacity: 1;  }}@keyframes menuLine {  to {    -webkit-transform: scaleX(1);            transform: scaleX(1);    opacity: 1;  }}@-webkit-keyframes menuItem {  to {    -webkit-transform: translateY(0);            transform: translateY(0);    opacity: 1;  }}@keyframes menuItem {  to {    -webkit-transform: translateY(0);            transform: translateY(0);    opacity: 1;  }}.main-menu-item a {  display: block;  padding: 1em;  text-decoration: none;  color: #555;  opacity: 0;  -webkit-transform: translateY(40%);      -ms-transform: translateY(40%);          transform: translateY(40%);  -webkit-animation: menuItem .8s ease forwards;          animation: menuItem .8s ease forwards;  -webkit-transition: all .2s ease;          transition: all .2s ease;}.main-menu-item:nth-child(4) a {  -webkit-animation-delay: .4s;          animation-delay: .4s;}.main-menu-item:nth-child(3) a, .main-menu-item:nth-child(5) a {  -webkit-animation-delay: .5s;          animation-delay: .5s;}.main-menu-item:nth-child(2) a, .main-menu-item:nth-child(6) a {  -webkit-animation-delay: .6s;          animation-delay: .6s;}.main-menu-item:nth-child(1) a, .main-menu-item:nth-child(7) a {  -webkit-animation-delay: .7s;          animation-delay: .7s;}.main-menu-item {  display: inline-block;  position: relative;}.main-menu-item:hover a, .main-menu-item.active {  color: #9B1C27;}.main-menu-item:hover a::after, .main-menu-item.active::after {  width: 0;  height: 0;  border-bottom: .5em solid #9B1C27;  border-left: .5em solid transparent;  border-right: .5em solid transparent;  bottom: 0;  left: 0;  right: 0;  margin: auto;  opacity: 0;  -webkit-transform: translateY(0.05em);      -ms-transform: translateY(0.05em);          transform: translateY(0.05em);  -webkit-animation: menuItem .8s 1.2s ease forwards;          animation: menuItem .8s 1.2s ease forwards;}

Note: This article love programming Original article, reprint please indicate the original address: http://www.w2bc.com/Article/7913

How does css3 + html load the display animation instead of clicking a button to achieve the effect?

When loading the page, a js script is automatically loaded and the button is clicked.
 
CSS3 + Html5 makes a navigation bar effect,

CSS 3 + HTML5 is not required. You can use AJAX + DIV + CSS.
You can use AJAX to obtain the number of unread data and set innerHTML of the div to this number. In addition, this is a relative positioning layer embedded in a DIV (or other block elements. So it is unnecessary to use CSS3 and HTML5. After all, major browsers in China do not support it. Currently, browsers supporting CSS3 and HTML5 only have the latest browsers (such as IE9, opera, safari, and FF)