The ghost button navigation implemented by pure css3, And the css3 ghost button

The ghost button navigation implemented by pure css3, And the css3 ghost button

I have introduced several navigation menus for you. Today I will introduce you to a ghost navigation menu implemented by css3. The navigation interface is very nice. On the right is an animated message icon implemented by css3. As follows:

 

Download Online Preview source code

 

Implementation Code:

Html code:

  
Css3 code:
  * {  margin: 0;      padding: 0;}body {  background: #e9e9e9;  overflow: hidden;}header {  display: -webkit-box;  display: -webkit-flex;  display: -ms-flexbox;  display: flex;  -webkit-box-align: center;  -webkit-align-items: center;  -ms-flex-align: center;  align-items: center;  background-color: #1CAFF6;  background-color: rgba(32, 166, 231, 0.8);  background-image: -webkit-gradient(linear, left top, left bottom, from(#20A8E9), to(rgba(30, 158, 220, 0.5)));  background-image: -webkit-linear-gradient(top, #20A8E9, rgba(30, 158, 220, 0.5));  background-image: linear-gradient(to bottom, #20A8E9, rgba(30, 158, 220, 0.5));  padding: 0 50px;}main {  background: white;  height: 100vh;  border-radius: 10px;  margin: 30px 55px;  background: 0 0 25px rgba(0, 0, 0, 0.04);}nav {  -webkit-box-flex: 1;  -webkit-flex: 1;  -ms-flex: 1;  flex: 1;  font: 500 15px/20px "museo-sans-rounded", sans-serif;  -webkit-user-select: none;  -moz-user-select: none;  -ms-user-select: none;  user-select: none;  overflow: hidden;  padding: 17px 0;}a {  display: inline-block;  padding: 10px 18px 8px;  margin: 0 2px;  border-radius: 100px;  color: white;  cursor: pointer;  -webkit-animation: nav-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.1) backwards;  animation: nav-in 0.35s cubic-bezier(0.2, 0.7, 0.2, 1.1) backwards;  -webkit-transition: background 0.35s;  transition: background 0.35s;}a:hover {  background: #1493D1;  -webkit-transition: 0;  transition: 0;}a:active {  background: #107aad;}a:nth-child(1) {  -webkit-animation-delay: 0.46667s;  animation-delay: 0.46667s;}a:nth-child(2) {  -webkit-animation-delay: 0.58333s;  animation-delay: 0.58333s;}a:nth-child(3) {  -webkit-animation-delay: 0.7s;  animation-delay: 0.7s;}a:nth-child(4) {  -webkit-animation-delay: 0.81667s;  animation-delay: 0.81667s;}a:nth-child(5) {  -webkit-animation-delay: 0.93333s;  animation-delay: 0.93333s;}@-webkit-keyframes nav-in {  from {    -webkit-transform: translate3d(0px, 100px, 0);    transform: translate3d(0px, 100px, 0);  }}@keyframes nav-in {  from {    -webkit-transform: translate3d(0px, 100px, 0);    transform: translate3d(0px, 100px, 0);  }}.notif {  display: inline-block;  border-radius: 50%;  background: #1392D0;  padding: 7px 9px;  width: 40px;  height: 40px;  border: 0;  cursor: pointer;  -webkit-transition: 0.35s;  transition: 0.35s;}.notif:hover {  background: #0e6d9c;  -webkit-transition-duration: 0.0875s;  transition-duration: 0.0875s;  -webkit-transform: scale(1.1);  -ms-transform: scale(1.1);  transform: scale(1.1);}.notif:active, .notif:focus {  -webkit-transition-duration: 0;  transition-duration: 0;  -webkit-transform: scale(1.15);  -ms-transform: scale(1.15);  transform: scale(1.15);  background: #0b577c;  outline: 0;}.notif .icon {  display: inline-block;  width: 22px;  height: 26px;  background-image: url("icon.png");  -webkit-animation: notif 2s cubic-bezier(0.17, 0.67, 0.4, 1.17) infinite;  animation: notif 2s cubic-bezier(0.17, 0.67, 0.4, 1.17) infinite;  -webkit-background-size: 1000px 1000px;  background-size: 1000px 1000px;  background-position: -340px -40px;}@-webkit-keyframes notif {  10%, 30% {    -webkit-transform: rotate(-25deg);    transform: rotate(-25deg);  }  20%, 40% {    -webkit-transform: rotate(25deg);    transform: rotate(25deg);  }  50%, 100% {    -webkit-transform: none;    transform: none;  }}@keyframes notif {  10%, 30% {    -webkit-transform: rotate(-25deg);    transform: rotate(-25deg);  }  20%, 40% {    -webkit-transform: rotate(25deg);    transform: rotate(25deg);  }  50%, 100% {    -webkit-transform: none;    transform: none;  }}
 

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)

I used css3 menu software to create a navigation bar and generated some code. I want to add it to my webpage without navigation. I don't know how to do this.
Create an html file for this navigation bar, such as menu.html.
Then use iframe to load the file:
<Iframe src = "menu.html">
</Iframe>