CSS3实现圆形悬浮导航特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 CSS3实现圆形悬浮导航特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3实现圆形悬浮导航</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component1.css" />
    <script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Circular Navigation <span>Building a Circular Navigation with CSS Transforms</span></h1>
            <nav class="codrops-demos">
                <a class="current-demo" href="index.html">Demo 1</a>
                <a href="index2.html">Demo 2</a>
            </nav>
        </header>
        <section>
            <p>Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.</p>
            <p>Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.</p>
            <p>Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli. Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.</p>
            <p>Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.</p>
            <p>Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli.</p>
        </section>
        <div class="component">
            <!-- Start Nav Structure -->
            <button class="cn-button" id="cn-button">+</button>
            <div class="cn-wrapper" id="cn-wrapper">
                <ul>
                    <li><a href="#"><span class="icon-picture"></span></a></li>
                    <li><a href="#"><span class="icon-headphones"></span></a></li>
                    <li><a href="#"><span class="icon-home"></span></a></li>
                    <li><a href="#"><span class="icon-facetime-video"></span></a></li>
                    <li><a href="#"><span class="icon-envelope-alt"></span></a></li>
                </ul>
            </div>
            <div id="cn-overlay" class="cn-overlay"></div>
            <!-- End Nav Structure -->
        </div>
    </div><!-- /container -->
    <script src="js/polyfills.js"></script>
    <script src="js/demo1.js"></script>
</body>
</html>

HTML代码(index2.html):

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS3实现圆形悬浮导航</title>
    <link rel="stylesheet" type="text/css" href="css/normalize.css" />
    <link rel="stylesheet" type="text/css" href="css/demo.css" />
    <link rel="stylesheet" type="text/css" href="css/component2.css" />
    <script src="js/modernizr-2.6.2.min.js"></script>
</head>
<body>
    <div class="container">
        <header>
            <h1>Circular Navigation <span>Building a Circular Navigation with CSS Transforms</span></h1>
            <nav class="codrops-demos">
                <a href="index.html">Demo 1</a>
                <a class="current-demo" href="index2.html">Demo 2</a>
            </nav>
        </header>
        <div class="component">
            <h2>Celery swiss chard melon</h2>
            <!-- Start Nav Structure -->
            <button class="cn-button" id="cn-button">Menu</button>
            <div class="cn-wrapper" id="cn-wrapper">
                <ul>
                    <li><a href="#"><span>About</span></a></li>
                    <li><a href="#"><span>Tutorials</span></a></li>
                    <li><a href="#"><span>Articles</span></a></li>
                    <li><a href="#"><span>Snippets</span></a></li>
                    <li><a href="#"><span>Plugins</span></a></li>
                    <li><a href="#"><span>Contact</span></a></li>
                    <li><a href="#"><span>Follow</span></a></li>
                </ul>
            </div>
            <!-- End of Nav Structure -->
        </div>
        <section>
            <p>Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.</p>
            <p>Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.</p>
            <p>Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli. Soko leek tomatillo quandong winter purslane caulie jícama daikon dandelion bush tomato. Daikon cress amaranth leek cabbage black-eyed pea kakadu plum scallion watercress garbanzo gram caulie welsh onion water spinach tomatillo groundnut desert raisin. Wakame salsify bunya nuts spring onion lotus root prairie turnip fennel onion dandelion black-eyed pea bok choy zucchini taro. Jícama collard greens amaranth bell pepper catsear brussels sprout sweet pepper daikon spring onion aubergine broccoli rabe quandong mustard celery corn groundnut peanut. Mung bean fennel eggplant water spinach bunya nuts sierra leone bologi epazote okra caulie groundnut black-eyed pea parsnip fava bean squash.</p>
            <p>Parsnip tomatillo swiss chard garbanzo gourd potato silver beet. Celery swiss chard melon zucchini arugula pea quandong beet greens radish artichoke black-eyed pea endive winter purslane horseradish garlic amaranth collard greens chickpea. Rock melon pumpkin collard greens celery broccoli rabe endive nori brussels sprout gourd courgette sea lettuce artichoke desert raisin coriander chard.</p>
            <p>Collard greens ricebean horseradish wattle seed chard epazote potato peanut gram earthnut pea spinach yarrow desert raisin salad mung bean summer purslane fennel. Water spinach celery cucumber grape cauliflower nori daikon sweet pepper endive lentil turnip greens catsear leek beet greens. Melon seakale parsnip soybean bamboo shoot fennel scallion. Coriander groundnut squash corn aubergine bitterleaf azuki bean dandelion courgette broccoli rabe. Chickweed salsify chickweed groundnut nori okra lentil water spinach rock melon broccoli.</p>
        </section>
    </div><!-- /container -->
    <script src="js/polyfills.js"></script>
    <script src="js/demo2.js"></script>
</body>
</html>

JS代码(demo1.js):

(function(){
	var button = document.getElementById('cn-button'),wrapper = document.getElementById('cn-wrapper'),overlay = document.getElementById('cn-overlay');
	//open and close menu when the button is clickedvar open = false;
	button.addEventListener('click',handler,false);
	wrapper.addEventListener('click',cnhandle,false);
	function cnhandle(e){
	e.stopPropagation();
}
function handler(e){
	if (!e) var e = window.event;
	e.stopPropagation();
	//so that it doesn't trigger click event on documentif(!open){
	openNav();
}
else{
	closeNav();
}
}
function openNav(){
	open = true;
	button.innerHTML = "-";
	classie.add(overlay,'on-overlay');
	classie.add(wrapper,'opened-nav');
}
function closeNav(){
	open = false;
	button.innerHTML = "+";
	classie.remove(overlay,'on-overlay');
	classie.remove(wrapper,'opened-nav');
}
document.addEventListener('click',closeNav);
}
)();

JS代码(demo2.js):

(function(){
	var button = document.getElementById('cn-button'),wrapper = document.getElementById('cn-wrapper');
	//open and close menu when the button is clickedvar open = false;
	button.addEventListener('click',handler,false);
	function handler(){
	if(!open){
	this.innerHTML = "Close";
	classie.add(wrapper,'opened-nav');
}
else{
	this.innerHTML = "Menu";
	classie.remove(wrapper,'opened-nav');
}
open = !open;
}
function closeWrapper(){
	classie.remove(wrapper,'opened-nav');
}
}
)();

CSS代码(demo.css):

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);@font-face{font-family:'codropsicons';src:url('../fonts/codropsicons/codropsicons.eot');src:url('../fonts/codropsicons/codropsicons.eot?#iefix') format('embedded-opentype'),url('../fonts/codropsicons/codropsicons.woff') format('woff'),url('../fonts/codropsicons/codropsicons.ttf') format('truetype'),url('../fonts/codropsicons/codropsicons.svg#codropsicons') format('svg');font-weight:normal;font-style:normal;}
.container > header,.codrops-top,.container > section{font-family:'Lato',Arial,sans-serif;}
.container > header{margin:0 auto;padding:2em;text-align:center;background:rgba(0,0,0,0.01);}
.container > header h1{font-size:2.625em;line-height:1.3;margin:0;font-weight:300;}
.container > header span{display:block;font-size:60%;opacity:0.7;padding:0 0 0.6em 0.1em;}
/* To Navigation Style */
.codrops-top{background:#f06060;background:rgba(255,255,255,0.1);text-transform:uppercase;width:100%;font-size:0.69em;line-height:2.2;}
.codrops-top a{text-decoration:none;padding:0 1em;letter-spacing:0.1em;color:#fff;display:inline-block;}
.codrops-top a:hover{background:rgba(255,255,255,0.95);color:#777;}
.codrops-top span.right{float:right;}
.codrops-top span.right a{float:left;display:block;}
.codrops-icon:before{font-family:'codropsicons';margin:0 4px;speak:none;font-style:normal;font-weight:normal;font-variant:normal;text-transform:none;line-height:1;-webkit-font-smoothing:antialiased;}
.codrops-icon-drop:before{content:"\e001";}
.codrops-icon-prev:before{content:"\e004";}
/* Demo Buttons Style */
.codrops-demos{padding-top:1em;font-size:0.9em;}
.codrops-demos a{text-decoration:none;outline:none;display:inline-block;margin:0.5em;padding:0.7em 1.1em;border:3px solid #fff;color:#fff;font-weight:700;}
.codrops-demos a:hover,.codrops-demos a.current-demo,.codrops-demos a.current-demo:hover{opacity:0.6;}
.container > section{padding:2em;font-size:1.4em;max-width:50em;margin:0 auto;}
.container > section p{padding:0.8em 0;text-align:justify;opacity:0.5;font-weight:300;line-height:1.4;}
@media screen and (max-width:25em){.codrops-icon span{display:none;}
}

CSS代码(normalize.css):

article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video{display:inline-block;}
audio:not([controls]){display:none;height:0;}
[hidden]{display:none;}
html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
body{margin:0;}
a:focus{outline:thin dotted;}
a:active,a:hover{outline:0;}
h1{font-size:2em;margin:0.67em 0;}
abbr[title]{border-bottom:1px dotted;}
b,strong{font-weight:bold;}
dfn{font-style:italic;}
hr{-moz-box-sizing:content-box;box-sizing:content-box;height:0;}
mark{background:#ff0;color:#000;}
code,kbd,pre,samp{font-family:monospace,serif;font-size:1em;}
pre{white-space:pre-wrap;}
q{quotes:"\201C" "\201D" "\2018" "\2019";}
small{font-size:80%;}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
sup{top:-0.5em;}
sub{bottom:-0.25em;}
img{border:0;}
svg:not(:root){overflow:hidden;}
figure{margin:0;}
fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;}
legend{border:0;padding:0;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;}
button,input{line-height:normal;}
button,select{text-transform:none;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],html input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}
textarea{overflow:auto;vertical-align:top;}
table{border-collapse:collapse;border-spacing:0;}

附件:下载该文件资源,减少时间成本(增值服务)