脚本之家 服务器常用软件
快捷导航
您的位置：主页 > 网页制作 > CSS > CSS教程 >

CSS凹型导航按钮效果的实现代码

  发布时间：2016-05-20 09:36:32   作者：佚名   我要评论
下面小编就为大家带来一篇CSS凹型导航按钮效果的实现代码。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧。祝大家游戏愉快哦

一般需求，圆角看起来更加舒服，但是下面直角略显生硬

于是设计师有了下面的需求，下面加上小凹型：

凹型？凹型？凹型？有点变态，这怎么实现...........

图片肯定是最先考虑到的，CSS实现有貌似有一定难度.......

别怕，咋们遇难而上，go go...

先上html结构，这个很简单,没什么可以说明的：

XML/HTML Code复制内容到剪贴板
  1. <!DOCTYPE html>    
  2. <html>    
  3. <head>    
  4.     <meta charset="utf-8">    
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">    
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">    
  7.     <title>css凹型导航</title>    
  8.      
  9. </head>    
  10. <body>    
  11. <nav id="nav">    
  12.     <ul>    
  13.         <li>    
  14.             <div class="left"></div>    
  15.             <div class="con">导航1</div>    
  16.             <div class="right"></div>    
  17.         </li>    
  18.         <li>    
  19.             <div class="left"></div>    
  20.             <div class="con">导航2</div>    
  21.             <div class="right"></div>    
  22.         </li>    
  23.         <li>    
  24.             <div class="left"></div>    
  25.             <div class="con">导航3</div>    
  26.             <div class="right"></div>    
  27.         </li>    
  28.         <li>    
  29.             <div class="left"></div>    
  30.             <div class="con">导航4</div>    
  31.             <div class="right"></div>    
  32.         </li>    
  33.     </ul>    
  34. </nav>    
  35. </body>    
  36. </html>  

再看CSS

CSS Code复制内容到剪贴板
  1. #nav {    
  2.             background: #fff;    
  3.             border-bottom: 1px solid #7bd1ff;    
  4.             width: 960px;    
  5.             margin: 100px auto;    
  6.             height: 60px;;    
  7.         }    
  8.      
  9.         #nav ul li {    
  10.             float: left;    
  11.             list-style: none;    
  12.             height: 60px;    
  13.             margin: 0 10px;    
  14.         }    
  15.      
  16.         li * {    
  17.             float: left;    
  18.             transition: all .2s;    
  19.         }    
  20.      
  21.         .con {    
  22.             width: 60px;    
  23.             height: 60px;    
  24.             line-height: 60px;    
  25.             text-align: center;    
  26.             background: #7bd1ff;    
  27.             border-radius: 10px 10px 0 0;    
  28.         }    
  29. 　　　　　/*   
  30. 　　　　　　设置凹型的尺寸，   
  31. 　　　　　　通过margin定位   
  32. 　　　　　*/    
  33. .left, .rightright {    
  34.  width: 7px; height: 7px; margin: 53px 0 0 0;     
  35. }    
  36.  　　　　　/*   
  37. 　　　　　　下面的是关键，主要是用到了径向渐变 radial-gradient，   
  38. 　　　　　　通过比例划分实现直接透明过度到背景色，没有渐变   
  39. 　　　　　　测试结果显示 transparent 50% 并不能一半透明一半有颜色，70%+比较何时   
  40. 　　　　　*/    
  41. .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #7bd1ff 30%); }    
  42.  .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #7bd1ff 30%); }    
  43.      
  44.      
  45.  li:hover .con { background: #2d85ff }    
  46.  li:hover .left { background: -webkit-radial-gradient(top left, circle, transparent 70%, #2d85ff 30%); }    
  47.  li:hover .rightright { background: -webkit-radial-gradient(top rightright, circle, transparent 70%, #2d85ff 30%); }  

　so，这样，是不是也没有什么难度，轻松搞定。

以上这篇CSS凹型导航按钮效果的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

原文地址：CSS凹型导航按钮效果的实现代码

相关文章

  • CSS3中设置3D变形的transform-style属性详解

    transform-style经常被用来做三维空间坐标系中的图形变换,下面我们就来看看CSS3中设置3D变形的transform-style属性详解,需要的朋友可以参考下
    2016-05-23

  • css 元素选择器的简单实例

    下面小编就为大家带来一篇css 元素选择器的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-23

  • css border属性的使用方法和技巧

    下面小编就为大家带来一篇css border属性的使用方法和技巧。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-23

  • css sprite简单实例

    下面小编就为大家带来一篇css sprite简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-23

  • CSS3中的Transition过度与Animation动画属性使用要点

    这篇文章主要介绍了CSS3中的Transition过度与Animation动画属性使用要点Transition和Animation能被用来制作基本的页面图片动态效果,当然进一步的控制还是需要JavaScript的
    2016-05-20

  • CSS中:before和:after伪元素使用的奇技淫巧

    :before和:after伪元素在CSS中除了被用来添加元素、加小标、清浮动等,还有很多妙用之处,接下来我们就来看一两个CSS中:before和:after伪元素使用的奇技淫巧
    2016-05-20

  • 使用CSS绘制基础的对话框图案的代码示例

    气泡式对话框在Web页面上如今也十分普及和常见,对话框中三角形的朝向关键在于before伪元素的定位,接下来我们就来看一下使用CSS绘制基础的对话框图案的代码示例
    2016-05-20

  • CSS3 magic带64种动画库特效源码

    magic.css是一套带64种动画效果的CSS3动画库。全部使用CSS3 animation动画来完成
    2016-05-19

  • CSS文本超出指定宽度后隐藏并显示为省略号的实现方法

    下面小编就为大家带来一篇CSS文本超出指定宽度后隐藏并显示为省略号的实现方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2016-05-24

最新评论

关注微信公众号

扫一扫