以下是 CSS3圆圈悬浮旋转菜单特效代码 的示例演示效果:
部分效果截图:
HTML代码(index.html):
<!DOCTYPE html>
<html>
<head>
<title>Demo CSS3 Hover Effects with Websymbols Tutorial</title>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7; IE=EmulateIE9">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no"/>
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
<link rel="stylesheet" type="text/css" href="demo.css" media="all" />
</head>
<body>
<div class="container">
<!-- freshdesignweb top bar -->
<div class="freshdesignweb-top">
<span class="right">
</span>
<div class="clr"></div>
</div><!--/ freshdesignweb top bar -->
<header>
<h1><p align="center">适用浏览器:FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p></h1>
</header>
<ul class="ca-menu">
<li>
<a href="#">
<span class="ca-icon">A</span>
<div class="ca-content">
<h2 class="ca-main">Exceptional Service</h2>
<h3 class="ca-sub">Personalized to your needs</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">I</span>
<div class="ca-content">
<h2 class="ca-main">Creative Storytelling</h2>
<h3 class="ca-sub">Advanced use of technology</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">C</span>
<div class="ca-content">
<h2 class="ca-main">Infographical Education</h2>
<h3 class="ca-sub">Understanding visually</h3>
</div>
</a>
</li>
<li>
<a href="#">
<span class="ca-icon">S</span>
<div class="ca-content">
<h2 class="ca-main">Sophisticated Team</h2>
<h3 class="ca-sub">Professionals in action</h3>
</div>
</a>
</li>
</ul>
</div>
</body>
</html>
CSS代码(demo.css):
/* CSS reset */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td{margin:0;padding:0;}
html,body{margin:0;padding:0;height:100%;}
table{border-collapse:collapse;border-spacing:0;}
img{border:0;}
address,caption,cite,code,dfn,th,var{font-style:normal;font-weight:normal;}
ol,ul{list-style:none;}
caption,th{text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
header{display:block;}
/* General Demo Style */
body{font-family:Cambria,Palatino,"Palatino Linotype","Palatino LT STD",Georgia,serif;background:url(images/bgnoise_lg.png);font-weight:400;font-size:15px;color:#3a2127;overflow-y:scroll;}
a{color:#333;text-decoration:none;}
.container{width:100%;height:100%;position:relative;}
.clr{clear:both;}
.container > header{padding:20px 30px 20px 30px;margin:0px 20px 10px 20px;position:relative;display:block;text-shadow:1px 1px 1px rgba(0,0,0,0.2);text-align:center;}
.container > header h1{position:relative;color:#498ea5;font-weight:700;font-style:normal;font-size:30px;padding:0px 0px 5px 0px;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
.container > header h1 span{font-family:'Alegreya SC',Georgia,serif;font-size:20px;line-height:20px;display:block;font-weight:400;font-style:italic;color:#719dab;text-shadow:1px 1px 1px rgba(0,0,0,0.1);}
.container > header h2{font-size:16px;font-style:italic;color:#2d6277;text-shadow:0px 1px 1px rgba(255,255,255,0.8);}
/* Header Style */
.freshdesignweb-top{line-height:24px;font-size:11px;background:rgba(0,0,0,0.05);text-transform:uppercase;z-index:9999;position:relative;box-shadow:1px 0px 2px rgba(0,0,0,0.2);}
.freshdesignweb-top a{padding:0px 10px;letter-spacing:1px;color:#333;text-shadow:0px 1px 1px #fff;display:block;float:left;}
.freshdesignweb-top a:hover{background:#fff;}
.freshdesignweb-top span.right{float:right;}
.freshdesignweb-top span.right a{float:left;display:block;}
.freshdesignweb-demos{text-align:center;display:block;line-height:30px;padding:20px 0px;}
.freshdesignweb-demos a{display:inline-block;margin:0px 4px;padding:0px 4px;color:#fff;line-height:20px;font-style:italic;font-size:13px;border-radius:3px;background:rgba(41,77,95,0.1);-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;-o-transition:all 0.2s linear;-ms-transition:all 0.2s linear;transition:all 0.2s linear;}
.freshdesignweb-demos a:hover{background:rgba(41,77,95,0.3);}
.freshdesignweb-demos a.current,.freshdesignweb-demos a.current:hover{background:rgba(41,77,95,0.3);}
CSS代码(style.css):
/*http://www.freshdesignweb.com/css3-hover-effects-with-websymbols-tutorial.html*/
@font-face{font-family:'WebSymbolsRegular';src:url('images/websymbols/websymbols-regular-webfont.eot');src:url('images/websymbols/websymbols-regular-webfont.eot?#iefix') format('embedded-opentype'),url('images/websymbols/websymbols-regular-webfont.woff') format('woff'),url('images/websymbols/websymbols-regular-webfont.ttf') format('truetype'),url('images/websymbols/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');font-weight:normal;font-style:normal;}
.ca-menu{padding:0;margin:20px auto;width:1020px;font-family:'Dosis',sans-serif;}
.ca-menu li{width:230px;height:230px;border:10px solid #f6f6f6;overflow:hidden;position:relative;float:left;background:#fff;margin-right:4px;-webkit-box-shadow:1px 1px 2px rgba(0,0,0,0.2);-moz-box-shadow:1px 1px 2px rgba(0,0,0,0.2);box-shadow:1px 1px 2px rgba(0,0,0,0.2);-webkit-border-radius:125px;-moz-border-radius:125px;border-radius:125px;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;-o-transition:all 400ms linear;-ms-transition:all 400ms linear;transition:all 400ms linear;}
.ca-menu li:last-child{margin-right:0px;}
.ca-menu li a{text-align:left;width:100%;height:100%;display:block;color:#333;position:relative;-moz-box-shadow:0px 0px 3px #000000;-webkit-box-shadow:0px 0px 3px #000000;box-shadow:0px 0px 3px #000000;}
.ca-icon{font-family:'WebSymbolsRegular',cursive;font-size:40px;color:#f6f6f6;;line-height:60px;position:absolute;width:100%;height:60px;left:0px;top:30px;text-align:center;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;-o-transition:all 400ms linear;-ms-transition:all 400ms linear;transition:all 400ms linear;}
.ca-main{font-size:24px;position:absolute;top:110px;height:80px;width:170px;left:50%;margin-left:-85px;opacity:0.8;text-align:center;}
.ca-sub{text-align:center;color:#000;font-size:26px;position:absolute;height:80px;width:170px;left:50%;margin-left:-85px;top:110px;opacity:0;-webkit-transition:all 400ms linear;-moz-transition:all 400ms linear;-o-transition:all 400ms linear;-ms-transition:all 400ms linear;transition:all 400ms linear;}
.ca-menu li:hover{background:#f7f7f7;border-color:#fff;-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-o-transform:rotate(360deg);-ms-transform:rotate(360deg);transform:rotate(360deg);box-shadow:0 45px 60px -50px #000000;}
.ca-menu li:hover .ca-icon{color:#555;font-size:60px;}
.ca-menu li:hover .ca-main{display:none;}
.ca-menu li:hover .ca-sub{opacity:0.8;}