本文主要包含css3立体效果,css3,导航菜单等相关知识,佚名 希望在学习及工作中可以帮助到您
先给大家展示效果图，效果如下：
微课江湖友情提醒大家：请使用支持CSS3的浏览器访问本页面，获得更好效果。
源代码：
微课江湖友情提醒大家：请使用支持CSS3的浏览器访问本页面，获得更好效果。
源代码：
- <style>
- .keleyi-com-nav{
- width:px;
- height: px;
- font:bold /px Arial;
- text-align:center;
- margin:px auto ;
- border-radius: px;
- }
- .keleyi-com-nav a{display: inline-block;
- -webkit-transition: all .s ease-in;
- -moz-transition: all .s ease-in;
- -o-transition: all .s ease-in;
- -ms-transition: all .s ease-in;
- transition: all .s ease-in;
- }
- .keleyi-com-nav a:hover{
- -webkit-transform:rotate(deg);
- -moz-transform:rotate(deg);
- -o-transform:rotate(deg);
- -ms-transform:rotate(deg);
- transform:rotate(deg);
- }
- .black{
- background: #ccc;
- box-shadow: px #bbb;
- }
- .red{
- background: #ff;
- box-shadow: px #baa;
- }
- .blue{
- background: #be;
- box-shadow: px #b;
- }
- .green{
- background: #cd;
- box-shadow: px #bb;
- }
- .keleyi-com-nav li{
- position:relative;
- display:inline-block;
- padding: px;
- font-size: px;
- text-shadow:px px px rgba(,,,.);
- list-style: none outside none;
- }
- .keleyi-com-nav li::before,
- .keleyi-com-nav li::after{
- content:"";
- position:absolute;
- top:px;
- height: px;
- width: px;
- }
- .keleyi-com-nav li::after{
- rightright: ;
- background: -moz-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
- background: -webkit-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
- background: -o-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
- background: -ms-linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
- background: linear-gradient(top, rgba(,,,), rgba(,,,.) %, rgba(,,,));
- }&nbs