Skip to content

Instantly share code, notes, and snippets.

@L3au
Last active December 17, 2015 09:49
Show Gist options
  • Save L3au/5590142 to your computer and use it in GitHub Desktop.
Save L3au/5590142 to your computer and use it in GitHub Desktop.
sitemap style
.wrap {
width: 990px;
margin: 0 auto;
}
.w990 {
margin: 10px auto;
padding: 10px;
border: 1px solid #ccc;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.w990 h2 {
font-size: 16px;
}
.w990 .tag-list {
margin-top: 10px;
font-size: 0;
letter-spacing: -4px;
}
.tag-list li {
display: inline-block;
*display: inline;
*zoom: 1;
margin: 9px 9px 0 0;
font-size: 12px;
letter-spacing: normal;
max-width: 184px;
vertical-align: top;
}
.tag-list li a {
display: block;
position: relative;
padding: 3px 7px;
color: #333;
border: 1px solid #ddd;
-webkit-border-radius: 7px 0;
-moz-border-radius: 7px 0;
border-radius: 7px 0;
background-color: #ffe;
}
.tag-list li a:hover {
text-decoration: none;
background-color: teal;
color: #eee;
-webkit-border-radius: 0 7px;
-moz-border-radius: 0 7px;
border-radius: 0 7px;
-webkit-transition: -webkit-border-radius .2s ease-in-out;
-moz-transition: -moz-border-radius .2s ease-in-out;
-ms-transition: border-radius .2s ease-in-out;
-o-transition: border-radius .2s ease-in-out;
transition: border-radius .2s ease-in-out;
-webkit-animation: glow 2s .2s linear infinite;
animation: glow 2s .2s linear infinite;
z-index: 1;
}
@-webkit-keyframes glow {
0% {
-webkit-transform: scale(1);
}
50% {
-webkit-transform: scale(1.2);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes glow {
0% {
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
50% {
-moz-transform: scale(1.2);
-o-transform: scale(1.2);
transform: scale(1.2);
}
100% {
-moz-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
}
}
.tag-list li a:active {
left: 1px;
top: 1px;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment