三沣开发知识 购物 网址 小说 美女秀 游戏 电影下载 图说天下 生肖星座 新闻 笑话 | IT开发 软件下载 手机论坛 三沣软件 360图书馆
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题
autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程 CSS/HTML/Xhtml
html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
站长资讯 .NET新手 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA VisualStudio ASP.NET-MVC .NET控件开发 EntityFramework WinRT-Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动 Html-Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP OracleERP DynamicsCRM K2 BPM 信息安全 企业信息 Android开发 iOS开发 WindowsPhone WindowsMobile 其他手机 敏捷开发 项目管理 软件工程 SQLServer Oracle MySQL NoSQL 其它数据库 Windows7 WindowsServer Linux
  IT知识库 -> Html-Css -> 用CSS3/JS绘制自己想要的按钮 -> 正文阅读
 

[Html-Css]用CSS3/JS绘制自己想要的按钮

用CSS3/JS绘制自己想要的按钮 我认为按钮的绘制分以下三个步骤 第一步,绘制按钮的轮廓 选择合适的html标签,设置轮廓的CSS

/* html代码 */
<a href="#" class="button off"></a>
body{
    background-color: #E6C9B6;
}

/* CSS样式 */
/* 按钮轮廓 */
.button{
    display: block;
    margin:100px auto;
    position: relative;
    width:100px;
    height:40px;
    border-radius: 50px;
    border:1px solid #fff;
    background-color: #E9E4E0;
}

效果图

仿IOS-1.jpg
第二步,绘制按钮的默认状态 这一步很重要,由于我们不会再给html文件添加其他的标签,所以我们需要用 :after 伪类对按钮进行CSS渲染

/* 接在上面继续写 */
.button:after{
   display: block;
   position: absolute;    //相对按钮的轮廓进行决定定位
   top:2px;
   bottom: 2px;        //即设置top,又设置bottom使元素自动拉伸到最大
   left:2px;           //实际上,按钮的宽度即为容器的高度-(top+bottom)
   width:36px;           //按钮的宽度
   line-height: 36px;    //按钮文字的高度,如果不需要文字,可移除
   text-align: center;
   text-transform: uppercase;
   font-size: 16px;
   background-color: #fff;      //这里的背景颜色是按钮的背景颜色
   border:2px solid;
   transition: all 500ms;        //按钮的动画时长
}

实际上,做到这一步之后会发现,在浏览器上的效果没有一点变化,还是之前的那样子,不过不用着急,我们再加一点东西就很明显了
在轮廓内添加小按钮

.off:after {
   content: 'off';
   border-radius:30px;
   color: #999;
}

默认为off状态

仿IOS-2.jpg

- 再接着绘制要切换的状态


.on:after {
          content: 'ON';
          border-radius:30px;
          transform: translate(56px, 0);   
          color:transparent;
          background-color:#4BD429;
        }


仿IOS-3.jpg
最后一步,写JS代码进行切换
实际上,在CSS的切换之中,toggleClass是最为方便的。
但是!!!
这种切换方法不能切换你要触发的JS事件,
毕竟,我们画按钮是为了完成某些功能,
所以我采用的是这种方式,但也许并不是最好的

var zn=0;
$('.button').click(function(e){
  if(zn==1){
      $(this).removeClass("on").addClass("off");
      //此处可填要触发的事件
      zn=0;
  }else{
      $(this).removeClass("off").addClass("on");
       //此处可填要触发的事件
      zn=1;
  }
});

到此,一个完整的开关按钮就绘制完成了
感谢你能花3~5分钟的时间阅览我不专业的教程
PS:昨天要绘制一个按钮控制灯泡的开关(实际上就是切换背景图片),然后我四周一看,看到了墙壁上的一个公牛开关,既然是控制电灯的,我就想玩一玩仿真开关,忍着中午的睡意,还真勉强的给绘制出来了

  绘制过程并不复杂,我也就不细说了,贴下效果图和代码,感兴趣的可以自行看一下


仿真开关.jpg

仿真-2.jpg

PS:我引用了一个初始化的CSS文件,可能需要
box-sizing:border-box;

<style type="text/css">
    /*开关的轮廓*/
    .button{
        display: block;
        position: relative;
        width:160px;
        height:180px;
        border-radius: 5px;
        background-color: #f1f1f1;
    }
    .button2{
        display: block;
        position: relative;
        width:160px;
        height:180px;
        border-radius: 5px;
        background-color: #f1f1f1;
    }
    /*指示灯*/
    .indicate{
        display: block;
        position: absolute;
        margin:60px 0 0 70px;
        width: 20px;
        height: 4px;
        border-radius: 2px;
        background-color: #A8C1C2;
        z-index: 1;
        transition: all 200ms;
    }
    .indicate_yes{
        margin:69px 0 0 70px;
        background-color: #A3D7E7;
    }
    /*开关内部的小按钮*/
    .button:after{
        display: block;
        position: absolute;
        top:40px;
        bottom: 40px;
        left:20px;
        right:20px;
        line-height: 52px;
        border:1px solid #FFF;
        transition: all 200ms;
    }
    .button2:after{
        display: block;
        position: absolute;
        top:49px;
        bottom: 31px;
        left:20px;
        right:20px;
        line-height: 52px;
        border:1px solid #FFF;
        transition: all 200ms;
    }
    /*默认状态的小按钮*/
    .on:after {
      content: '';
      border-radius: 5px;
      /* CSS3的颜色渐变凸显按钮的凸出感 */
      background: linear-gradient(#fff, #f2f2f2 80%,#fff);
      /* CSS3的影音的综合应用,绘制按钮的边缘,给予立体感 */
      box-shadow: 0 1px 0 0 #fff,
          0 3px 0.5px 0 #E7E9EA,
          0 5px 0.5px 0 #DEDFDF,
          0 6px 0.5px 0 #CCCCCD,
          0 7px 0.5px 0 #C5C7C7,
          0 8px 2px 0 #818283,
          0 9px 2px 0 #A7A8A8;
    }
    /*关闭后的小按钮*/
    .off:after {
      content: '';
      border-radius: 5px;
      background: linear-gradient(#fff, #f2f2f2 80%,#fff);
      box-shadow: 0 -1px 0 0 #fff,
          0 -3px 0.5px 0 #E7E9EA,
          0 -5px 0.5px 0 #DEDFDF,
          0 -6px 0.5px 0 #CCCCCD,
          0 -7px 0.5px 0 #C5C7C7,
          0 -8px 2px 0 #818283,
          0 -9px 2px 0 #A7A8A8;
    }
    </style> 

/* JS代码 */
<script type="text/javascript">
$('.button').click(function(e) {
  var toggle = this;
  e.preventDefault();
  $(toggle).toggleClass('on')
         .toggleClass('off')
         .toggleClass("button2");
  //指示灯亮/灭
  $(this).children(".indicate")
    .toggleClass("indicate_yes");
});

//localStorage.clear();
</script>



学习过程中遇到什么问题或者想获取学习资源的话,欢迎加入学习交流群
343599877,我们一起学前端!
  Html-Css 最新文章
学习CSS制作菜单列表,举一反三
行内元素转为块级元素的方法
CSS3动画功能
margin赋值为负值的几种效果(负值像素,负
display:flex css
html5 css选择器 井号, 句点的区别
5种实现垂直居中css
利用锚点制作简单索引效果
最锋利的Visual Studio Web开发工具扩展:W
过渡
上一篇文章      下一篇文章      查看所有文章
加:2017-06-18 01:46:55  更:2017-06-18 01:47:05 
 
技术频道: 站长资讯 .NET新手区 ASP.NET C# WinForm Silverlight WCF CLR WPF XNA Visual Studio ASP.NET MVC .NET控件开发 Entity Framework WinRT/Metro Java C++ PHP Delphi Python Ruby C语言 Erlang Go Swift Scala R语言 Verilog 其它语言 架构设计 面向对象 设计模式 领域驱动设计 Html/Css JavaScript jQuery HTML5 SharePoint GIS技术 SAP Oracle ERP Dynamics CRM K2 BPM 信息安全 企业信息化其他 Android开发 iOS开发 Windows Phone Windows Mobile 其他手机开发 敏捷开发 项目与团队管理 软件工程其他 SQL Server Oracle MySQL NoSQL 其它数据库 Windows 7 Windows Server Linux
脚本语言: vbs/VBScript DOS/BAT hta htc python perl 游戏相关 VBA 远程脚本 ColdFusion ruby专题 autoit seraphzone PowerShell linux shell Lua Golang Erlang 其它教程
网站开发: CSS/HTML/Xhtml html5 CSS XML/XSLT Dreamweaver教程 经验交流 开发者乐园 Android开发资料
360图书馆 母婴/育儿 软件开发资料 网页快照 文字转语音 购物精选 软件 美食菜谱 新闻中心 电影下载 小游戏 Chinese Culture
生肖星座解梦 三沣玩客 拍拍 视频 开发 Android开发 站长 古典小说 网文精选 搜图网 天下美图 中国文化英文 多播视频
2017-6-29 11:49:54
多播视频美女直播
↓电视,电影,美女直播,迅雷资源↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT知识库