CSS3飘带状3D菜单小图标

前端开发环境的跨域 idea前端开发环境搭建 vue前端后端分离开发环境

特效说明:一款css制作的拍哦带3D菜单的特效。(兼容测试:IE6及以上、Firefox、Chrome、Opera、Safari、360等主流浏览器)

使用方法:

1、调用css样式:
<link href=”css/style.css” type=”text/css” rel=”stylesheet”>

2、调用js插件代码:
<script src=”js/prefixfree.min.js”></script>

3、添加html代码:
将<!–效果html开始–>……<!–效果html结束–>之间的htmljs代码;放在<body></body>之间。

html 代码

<!DOCTYPE html>
<html>
<head>
    <meta charset=”UTF-8″>
    <title>CSS3飘带状3D菜单DEMO演示</title>
    <style>
        * {
padding : 0;
margin : 0;
border : 0;
}
*:after , *:before {
display : block;
content : “”;
position: absolute;
}
body {
background-color : #3d332a;
background-image : url(‘9690bg.jpg’);
padding-top : 50px;
}
nav {
width : 476px;
margin: auto;
position : relative;
}
menu:after , menu:before {
top : 0;
width : 60px;
height : 76px;
background: #eae2d5;
}
menu:after {
clear : both;
right : -61px;
border-right : 1pxsolid#857e74;
}
menu:before {
left : -55px;
border-left : 1pxsolid#857e74;
}
.ribbon {
position : absolute;
top : 76px;
border-style : solid ;
border-width : 13px;
}
.ribbon.left {
left : -55px;
border-color : #857e74#857e74transparenttransparent;
}
.ribbon.right {
left : 511px;
border-color : #857e74transparenttransparent#857e74;
}
.left:after , .left:before {
left : -68px;
border-style : solid;
z-index : -2;
}
.left:after {
top : -68px;
border-width : 58px0056px;
border-color : #eae2d5transparenttransparenttransparent;
}
.left:before {
top : -26px;
border-width : 040px38px41px;
border-color : transparenttransparent#eae2d5transparent;
}
.right:after , .right:before {
right : -65px;
border-style : solid;
z-index : -2;
}
.right:before {
top : -25px;
border-width : 040px38px38px;
border-color : transparenttransparent#eae2d5transparent;
}
.right:after {
top : -65px;
border-width : 58px56px00;
border-color : #eae2d5transparenttransparenttransparent;
}
li {
float : left;
position : relative;
margin-left : 33px;
cursor : pointer;
background-color : #eae2d5;
list-style-type : none;
border-left : 2pxsolid#d7cfc2;
border-right : 2pxsolid#d7cfc2;
transition : margin .1s ,padding.1s ,border1s;
}
li:first-child {
margin-left : 20px;
}
li:before , li:after {
display : block;
position : absolute;
top : 0;
width : 20px;
height : 100%;
background : inherit;
transition : all.1s;
}
li:before {
right : 100%;
}
li:after {
left : 100%;
}
li:hover {
margin-top : -9px;
box-shadow : 04px10px0px#000;
transition : margin .2s ,padding.2s;
}
li:hover:before , li:hover:after {
height : 86%;
background : #d7cfc2;
transition : all.2s;
}
li:hover:before {
transform : rotate(-30deg) skew(-30deg) translate(1.5px,9px);
}
li:hover:after {
transform : rotate(30deg) skew(30deg) translate(-1.5px,9px);
}
a {
display : block;
padding : 10px15px;
text-decoration : none;
text-align : center
}
a span {
text-shadow : 1px1px1px#FFF;
color : #857e74;
transition : all.2s;
}
a span:first-child {
font-family : icon;
font-size : 33px;
display : block;
}
a span:last-child {
text-transform : capitalize;
font-family : ‘Georgia’;
font-size : 11px;
letter-spacing : 1px;
font-style : italic;
color : #6488ba;
}
li:hover span {
transition : all.2s;
}
li:hover a span:first-child {
color : #6488ba;
text-shadow : 1px1px1px#FFF , 001px#6488ba;
}
li:hover a span:last-child {
color : #857e74;
}
@font-face {
font-family :icon;
src: url(‘http://bennettfeely.com/fonts/icons.woff’);
}
</style>
    <script src=”js/prefixfree.min.js”>
        (function () { function t(e, t) { return [].slice.call((t || document).querySelectorAll(e)) } if (!window.addEventListener) return; var e = window.StyleFix = { link: function (t) { try { if (t.rel !== “stylesheet” || t.hasAttribute(“data-noprefix”)) return } catch (n) { return } var r = t.href || t.getAttribute(“data-href”), i = r.replace(/[^\/]+$/, “”), s = (/^[a-z]{3,10}:/.exec(i) || [“”])[0], o = (/^[a-z]{3,10}:\/\/[^\/]+/.exec(i) || [“”])[0], u = /^([^?]*)\??/.exec(r)[1], a = t.parentNode, f = new XMLHttpRequest, l; f.onreadystatechange = function () { f.readyState === 4 && l() }, l = function () { var n = f.responseText; if (n && t.parentNode && (!f.status || f.status < 400 || f.status > 600)) { n = e.fix(n, !0, t); if (i) { n = n.replace(/url\(\s*?((?:”|’)?)(.+?)\1\s*?\)/gi, function (e, t, n) { return /^([a-z]{3,10}:|#)/i.test(n) ? e : /^\/\//.test(n) ? ‘url(“‘ + s + n + ‘”)’ : /^\//.test(n) ? ‘url(“‘ + o + n + ‘”)’ : /^\?/.test(n) ? ‘url(“‘ + u + n + ‘”)’ : ‘url(“‘ + i + n + ‘”)’ }); var r = i.replace(/([\\\^\$*+[\]?{}.=!:(|)])/g, “\\$1”); n = n.replace(RegExp(“\\b(behavior:\\s*?url\\(‘?\”?)” + r, “gi”), “$1”) } var l = document.createElement(“style”); l.textContent = n, l.media = t.media, l.disabled = t.disabled, l.setAttribute(“data-href”, t.getAttribute(“href”)), a.insertBefore(l, t), a.removeChild(t), l.media = t.media } }; try { f.open(“GET”, r), f.send(null) } catch (n) { typeof XDomainRequest != “undefined” && (f = new XDomainRequest, f.onerror = f.onprogress = function () { }, f.onload = l, f.open(“GET”, r), f.send(null)) } t.setAttribute(“data-inprogress”, “”) }, styleElement: function (t) { if (t.hasAttribute(“data-noprefix”)) return; var n = t.disabled; t.textContent = e.fix(t.textContent, !0, t), t.disabled = n }, styleAttribute: function (t) { var n = t.getAttribute(“style”); n = e.fix(n, !1, t), t.setAttribute(“style”, n) }, process: function () { t(“style”).forEach(StyleFix.styleElement), t(“[style]”).forEach(StyleFix.styleAttribute) }, register: function (t, n) { (e.fixers = e.fixers || []).splice(n === undefined ? e.fixers.length : n, 0, t) }, fix: function (t, n, r) { for (var i = 0; i < e.fixers.length; i++)t = e.fixers[i](t, n, r) || t; return t }, camelCase: function (e) { return e.replace(/-([a-z])/g, function (e, t) { return t.toUpperCase() }).replace(“-“, “”) }, deCamelCase: function (e) { return e.replace(/[A-Z]/g, function (e) { return “-” + e.toLowerCase() }) } }; (function () { setTimeout(function () { }, 10), document.addEventListener(“DOMContentLoaded”, StyleFix.process, !1) })() })(), function (e) { function t(e, t, r, i, s) { e = n[e]; if (e.length) { var o = RegExp(t + “(” + e.join(“|”) + “)” + r, “gi”); s = s.replace(o, i) } return s } if (!window.StyleFix || !window.getComputedStyle) return; var n = window.PrefixFree = { prefixCSS: function (e, r, i) { var s = n.prefix; n.functions.indexOf(“linear-gradient”) > -1 && (e = e.replace(/(\s|:|,)(repeating-)?linear-gradient\(\s*(-?\d*\.?\d*)deg/ig, function (e, t, n, r) { return t + (n || “”) + “linear-gradient(” + (90 – r) + “deg” })), e = t(“functions”, “(\\s|:|,)”, “\\s*\\(“, “$1” + s + “$2(“, e), e = t(“keywords”, “(\\s|:)”, “(\\s|;|\\}|$)”, “$1” + s + “$2$3”, e), e = t(“properties”, “(^|\\{|\\s|;)”, “\\s*:”, “$1” + s + “$2:”, e); if (n.properties.length) { var o = RegExp(“\\b(” + n.properties.join(“|”) + “)(?!:)”, “gi”); e = t(“valueProperties”, “\\b”, “:(.+?);”, function (e) { return e.replace(o, s + “$1”) }, e) } return r && (e = t(“selectors”, “”, “\\b”, n.prefixSelector, e), e = t(“atrules”, “@”, “\\b”, “@” + s + “$1”, e)), e = e.replace(RegExp(“-” + s, “g”), “-“), e = e.replace(/-\*-(?=[a-z]+)/gi, n.prefix), e }, property: function (e) { return (n.properties.indexOf(e) ? n.prefix : “”) + e }, value: function (e, r) { return e = t(“functions”, “(^|\\s|,)”, “\\s*\\(“, “$1” + n.prefix + “$2(“, e), e = t(“keywords”, “(^|\\s)”, “(\\s|$)”, “$1” + n.prefix + “$2$3”, e), e }, prefixSelector: function (e) { return e.replace(/^:{1,2}/, function (e) { return e + n.prefix }) }, prefixProperty: function (e, t) { var r = n.prefix + e; return t ? StyleFix.camelCase(r) : r } }; (function () { var e = {}, t = [], r = {}, i = getComputedStyle(document.documentElement, null), s = document.createElement(“div”).style, o = function (n) { if (n.charAt(0) === “-“) { t.push(n); var r = n.split(“-“), i = r[1]; e[i] = ++e[i] || 1; while (r.length > 3) { r.pop(); var s = r.join(“-“); u(s) && t.indexOf(s) === -1 && t.push(s) } } }, u = function (e) { return StyleFix.camelCase(e) in s }; if (i.length > 0) for (var a = 0; a < i.length; a++)o(i[a]); else for (var f in i) o(StyleFix.deCamelCase(f)); var l = { uses: 0 }; for (var c in e) { var h = e[c]; l.uses < h && (l = { prefix: c, uses: h }) } n.prefix = “-” + l.prefix + “-“, n.Prefix = StyleFix.camelCase(n.prefix), n.properties = []; for (var a = 0; a < t.length; a++) { var f = t[a]; if (f.indexOf(n.prefix) === 0) { var p = f.slice(n.prefix.length); u(p) || n.properties.push(p) } } n.Prefix == “Ms” && !(“transform” in s) && !(“MsTransform” in s) && “msTransform” in s && n.properties.push(“transform”, “transform-origin”), n.properties.sort() })(), function () { function i(e, t) { return r[t] = “”, r[t] = e, !!r[t] } var e = { “linear-gradient”: { property: “backgroundImage”, params: “red, teal” }, calc: { property: “width”, params: “1px + 5%” }, element: { property: “backgroundImage”, params: “#foo” }, “cross-fade”: { property: “backgroundImage”, params: “url(a.png), url(b.png), 50%” } }; e[“repeating-linear-gradient”] = e[“repeating-radial-gradient”] = e[“radial-gradient”] = e[“linear-gradient”]; var t = { initial: “color”, “zoom-in”: “cursor”, “zoom-out”: “cursor”, box: “display”, flexbox: “display”, “inline-flexbox”: “display”, flex: “display”, “inline-flex”: “display”, grid: “display”, “inline-grid”: “display”, “min-content”: “width” }; n.functions = [], n.keywords = []; var r = document.createElement(“div”).style; for (var s in e) { var o = e[s], u = o.property, a = s + “(” + o.params + “)”; !i(a, u) && i(n.prefix + a, u) && n.functions.push(s) } for (var f in t) { var u = t[f]; !i(f, u) && i(n.prefix + f, u) && n.keywords.push(f) } }(), function () { function s(e) { return i.textContent = e + “{}”, !!i.sheet.cssRules.length } var t = { “:read-only”: null, “:read-write”: null, “:any-link”: null, “::selection”: null }, r = { keyframes: “name”, viewport: null, document: ‘regexp(“.”)’ }; n.selectors = [], n.atrules = []; var i = e.appendChild(document.createElement(“style”)); for (var o in t) { var u = o + (t[o] ? “(” + t[o] + “)” : “”); !s(u) && s(n.prefixSelector(u)) && n.selectors.push(o) } for (var a in r) { var u = a + ” ” + (r[a] || “”); !s(“@” + u) && s(“@” + n.prefix + u) && n.atrules.push(a) } e.removeChild(i) }(), n.valueProperties = [“transition”, “transition-property”], e.className += ” ” + n.prefix, StyleFix.register(n.prefixCSS) }(document.documentElement);
    </script>
</head>
<body>
    <div style=”text-align:center;clear:both;margin-bottom:40px”>
        <script src=”/gg_bd_ad_720x90.js” type=”text/javascript”></script>
        <script src=”/follow.js” type=”text/javascript”></script>
    </div>
    <nav>
        <menu>
            <li>
                <a href=”#”>
                    <span>t</span>
                    <span>twitter</span>
                </a>
            </li>
            <li id=”at”>
                <a href=”#”>
                    <span>c</span>
                    <span>codepen</span>
                </a>
            </li>
            <li>
                <a href=”#”>
                    <span>d</span>
                    <span>dribbble</span>
                </a>
            </li>
            <li>
                <a href=”#”>
                    <span>g</span>
                    <span>google+</span>
                </a>
            </li>
        </menu>
        <div class=”ribbon left”></div>
        <div class=”ribbon right”></div>
    </nav>
    <script src=”js/index.js”></script>
</body>
</html>

intellij idea 前端开发环境搭建 vue前端开发环境搭建 前端开发第一天环境

» 本文来自:前端开发者 » 《CSS3飘带状3D菜单小图标》
» 本文链接地址:https://www.rokub.com/5809.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!