核心CSS代码：

.letter{ display: inline-block; font-weight: 900; font-size: 8em; margin: 0.2em; position: relative; color: #00B4F1; transform-style: preserve-3d; perspective: 400; z-index: 1; } .letter:before, .letter:after{ position:absolute; content: attr(data-letter); transform-origin: top left; top:0; left:0; } .letter, .letter:before, .letter:after{ transition: all 0.3s ease-in-out; } .letter:before{ color: #fff; text-shadow: -1px 0px 1px rgba(255,255,255,.8), 1px 0px 1px rgba(0,0,0,.8); z-index: 3; transform: rotateX(0deg) rotateY(-15deg) rotateZ(0deg); } .letter:after{ color: rgba(0,0,0,.11); z-index:2; transform: scale(1.08,1) rotateX(0deg) rotateY(0deg) rotateZ(0deg) skew(0deg,1deg); } .letter:hover:before{ color: #fafafa; transform: rotateX(0deg) rotateY(-40deg) rotateZ(0deg); } .letter:hover:after{ transform: scale(1.08,1) rotateX(0deg) rotateY(40deg) rotateZ(0deg) skew(0deg,22deg); } View Code

在线演示 源码下载

CSS3波浪形菜单 结合背景超级绚丽

一款非常具有创意的CSS3菜单，波浪形状的。

核心CSS代码：

.b-nav { overflow: hidden; position: relative; margin: 3em auto 0; width: 28em; height: 10em; } .b-menu { width: 0; height: 0; list-style: none; } .b-menu li { overflow: hidden; position: absolute; width: 12em; height: 12em; } .b-menu li:nth-child(-n+3) { top: 0.66em; left: -5.68em; transform-origin: 100% 100%; } .b-menu li:nth-child(n+4) { right: -5.69em; bottom: 0.66em; transform-origin: 0 0; } .b-menu li:first-child { transform: skewY(67.5deg); } .b-menu li:nth-child(2) { transform: rotate(22.5deg) skewY(67.5deg); } .b-menu li:nth-child(3) { transform: rotate(45deg) skewY(67.5deg); } .b-menu li:nth-child(4) { transform: skewY(67.5deg); } .b-menu li:nth-child(5) { transform: rotate(22.5deg) skewY(67.5deg); } .b-menu li:last-child { transform: rotate(45deg) skewY(67.5deg); } .b-menu a, .b-menu li:after { position: absolute; border-radius: 50%; box-shadow: 0 0 .2em black, inset 0 0 .2em black; transform: skewY(-67.5deg) rotate(-11.25deg); } .b-menu a { width: 200%; height: 200%; opacity: .7; background: radial-gradient(transparent 57.3%, #c9c9c9 57.7%); color: #7a8092; font: 900 1em/2.5 sans-serif; text-align: center; text-decoration: none; transition: .5s; } .b-menu li:nth-child(n+4) a { top: -100%; left: -100%; line-height: 45.5; } .b-menu a:hover { opacity: 1; } .b-menu li:after { top: 19%; left: 19%; width: 162%; height: 162%; content: ''; } .b-menu li:nth-child(n+4):after { top: auto; right: 19%; bottom: 19%; left: auto; } .b-menu:before, .b-menu:after { position: absolute; width: 1em; height: 2.1em; opacity: .7; background: #c9c9c9; content: ''; } .b-menu:before { top: 1.75em; left: 1.21em; border-radius: 100% 0 0 100%/ 50% 0 0 50%; transform: rotate(-22.5deg); } .b-menu:after { bottom: 1.75em; right: 1.21em; border-radius: 0 100% 100% 0/ 0 50% 50% 0; transform: rotate(-22.5deg); } View Code

在线演示 源码下载

HTML5/CSS3时尚的圆盘时钟动画 带当前日期

又是一款HTML5圆盘时钟动画。