css3_html/css_WEB-ITnose で 3 次元ナビゲーションを作成する-htmlチュートリアル-php.cn

css3_html/css_WEB-ITnose で 3 次元ナビゲーションを作成する

WBOY

リリース： 2016-06-24 11:30:05

オリジナル

1379 人が閲覧しました

MOOC.com で css3 を使用して 3 次元ナビゲーションを作成することで多くのことを学びました。少し前に学んだ 2 番目のナビゲーションで試してみます (笑)。

内容は簡単ですが、その後の疑似クラスの使用に注意する必要があります。

修正された最終レンダリング:

css3 に関する知識ポイントは次のとおりです:

圆角特效：border-radius: 10px;

ログイン後にコピー

盒子阴影：box-shadow: 2px 5px 0px #0000cc;

ログイン後にコピー

文字阴影：text-shadow:1px 2px 4px rgba(0,0,0,.5);

ログイン後にコピー

动画过渡：transition: all 0.2s ease-in;

ログイン後にコピー

动画效果-旋转：transform:rotate(10deg);

ログイン後にコピー

颜色线性渐变背景：background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);

ログイン後にコピー

<!doctype html><html lang="en"><head>    <meta charset="UTF-8">    <title>CSS制作立体导航</title>    <style>        body{            background: #ebebeb;        }        *{margin: 0;padding: 0;}        .nav{            text-align: center;            width: 615px;            height: 50px;            margin:40px auto 0;            background: #3333ff;            border-radius: 10px;            box-shadow: 2px 5px 0px #0000cc;        }        .nav li{            height: 50px;            line-height: 50px;            width: 100px;            float: left;            list-style: none;            position:relative;            display:inline-block;            font-size: 13px;            text-shadow:1px 2px 4px rgba(0,0,0,.5);        }        .nav a{            display: inline-block;            text-decoration: none;            -webkit-transition: all 0.2s ease-in;            -moz-transition: all 0.2s ease-in;            -o-transition: all 0.2s ease-in;            -ms-transition: all 0.2s ease-in;            transition: all 0.2s ease-in;        }        .nav a:hover{            -webkit-transform:rotate(10deg);            -moz-transform:rotate(10deg);            -o-transform:rotate(10deg);            -ms-transform:rotate(10deg);            transform:rotate(10deg);        }        .nav li:after{            content: "";            position: absolute;            height: 20px;            top:15px;            width: 1px;            right: 0px;            -webkit-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            -moz-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            -o-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            -ms-background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);            background:linear-gradient(to bottom,#3333ff,#0000ff,#3333ff);        }        .nav li:last-child:after{            background: none;        }        .nav a,        .nav a:hover{            color:#fff;            text-decoration: none;        }    </style></head><body>    <ul class="nav">        <li><a href="">Home</a></li>        <li><a href="">About Me</a></li>        <li><a href="">Portfolio</a></li>        <li><a href="">Blog</a></li>        <li><a href="">Resources</a></li>        <li><a href="">Contact Me</a></li>    </ul></body></html>

ログイン後にコピー

カラー画像を送信: