精华内容
下载资源
问答
  • css 滑动按钮样式

    2016-08-02 10:48:00
    /*滑动按钮样式 <-- start --> */ .pub_switch_box { font-size: 0; display: inline-block; margin-left: 30%; } .pub_switch { display: none; } .pub_switch + label { display: inline-block; position: ...
    <div class="pub_switch_box">
    <input type="checkbox" id="pub_switch_a1" class="pub_switch" />
    <label for="pub_switch_a1"></label>
    <input type="checkbox" id="pub_switch_a2" class="pub_switch" checked />
    <label for="pub_switch_a2"></label>
    </div>


    /*滑动按钮样式 <-- start --> */
    .pub_switch_box {
    font-size: 0;
    display: inline-block;
    margin-left: 30%;
    }

    .pub_switch {
    display: none;
    }

    .pub_switch + label {
    display: inline-block;
    position: relative;
    width: 56px;
    height: 26px;
    margin: 5px;
    background-color: #fafbfa;
    border-radius: 50px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    }

    .pub_switch + label:after {
    content:"";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: box-shadow 0.1s ease-in;
    transition: box-shadow 0.1s ease-in;
    left: 0;
    border-radius: 100px;
    box-shadow: inset 0 0 0 0 #eee, 0 0 1px rgba(0, 0, 0, 0.4);
    }

    .pub_switch + label:before {
    content: "";
    position: absolute;
    top: 0;
    left: 1px;
    z-index: 999999;
    width: 26px;
    height: 26px;
    -webkit-transition: all 0.1s ease-in;
    transition: all 0.1s ease-in;
    border-radius: 100px;
    box-shadow: 0 3px 1px rgba(0, 0, 0, 0.05), 0 0 1px rgba(0, 0, 0, 0.3);
    background: white;
    }

    .pub_switch:active + label:after {
    box-shadow: inset 0 0 0 20px #eee, 0 0 1px #eee;
    }
    .pub_switch:active + label:before {
    width: 37px;
    }
    .pub_switch:checked:active + label:before {
    width: 37px;
    left: 20px;
    }
    .pub_switch + label:active {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
    inset 0 1px 3px rgba(0, 0, 0, 0.1);
    }
    .pub_switch:checked + label:before {
    content: "";
    position: absolute;
    left: 31px;
    border-radius: 100px;
    }
    .pub_switch:checked + label:after {
    content: "";
    font-size: 1.5em;
    position: absolute;
    background: #3399ff;
    box-shadow: 0 0 1px #3399ff;
    }
    /* <-- end --> */

    转载于:https://www.cnblogs.com/y-lin/p/5728398.html

    展开全文
  • TiTatoggle是一款基于Bootstrap3的纯CSS滑动开关按钮组件。该滑动按钮组件没有使用Javascript,它的HTML结构和原生的Bootstrap checkbox组件结构基本相同,使用起来非常方便。它还提供了多种主题样式:IOS样式和...
  • 这是一组共15种不同效果的纯CSS3滑动按钮。这些滑动按钮通过使用“CHECKBOX HACK”技术,通过checkbox和label元素来完成这些滑动按钮的动画效果。
  • css3鼠标滑动按钮demo

    2016-08-26 10:39:44
    使用css3写的简单的鼠标滑动按钮demo
  • CSS3滑动按钮

    2018-08-02 11:21:13
    漂亮的滑动开关按钮 代码如下: 粘过去可直接测试 &lt;html&gt; &lt;style&gt; .slide-switch { position: relative; display: inline-block; } .slide-switch:after, .slide-switch:before {...

    漂亮的滑动开关按钮

    代码如下:

    粘过去可直接测试

    <html>
    <style>
    .slide-switch {
      position: relative;
      display: inline-block;
    }
    .slide-switch:after, .slide-switch:before {
      font-family: FontAwesome;
      -webkit-font-feature-settings: normal;
         -moz-font-feature-settings: normal;
              font-feature-settings: normal;
      -webkit-font-kerning: auto;
         -moz-font-kerning: auto;
              font-kerning: auto;
      -webkit-font-language-override: normal;
         -moz-font-language-override: normal;
              font-language-override: normal;
      font-stretch: normal;
      font-style: normal;
      font-synthesis: weight style;
      font-variant: normal;
      font-weight: normal;
      text-rendering: auto;
    }
    .slide-switch label {
      width: 60px;
      height: 20px;
      background: #ccc;
      position: relative;
      display: inline-block;
      border-radius: 46px;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }
    .slide-switch label:after {
      content: '';
      position: absolute;
      width: 20px;
      height: 20px;
      border-radius: 100%;
      left: 0;
      top: 0px;
      z-index: 2;
      background: #fff;
      -webkit-transition: 0.4s;
      transition: 0.4s;
    }
    .slide-switch input {
      position: absolute;
      left: 0;
      width: 100%;
      height: 100%;
      z-index: 5;
      opacity: 0;
      cursor: pointer;
    }        
    .slide-switch input:hover + label:after {
    }
    .slide-switch input:checked + label:after {
      left: 40px;
    }
     
    .model-1 .slide-switch input:checked + label {
      background: #376ecb;
    }
    .model-1 .slide-switch input:checked + label:after {
      background: #4285F4;
    }  
    </style>
    
    <body>
    <section class="model-1">
      <div class="slide-switch">
        <input type="checkbox"/>
        <label></label>
      </div>
    </section>    
    </body>
    </html>
    

     

    展开全文
  • css3鼠标滑动按钮动画效果是一款实用的网页css3鼠标滑过动态按钮动画效果代码。
  • css3鼠标滑动按钮动画效果是一款实用的网页css3鼠标滑过动态按钮动画效果代码。
  • CSS3 滑动按钮

    千次阅读 2018-07-11 15:05:41
    btn: ['重要','奇葩'] //按钮 }, function(){ layer.msg('的确很重要', {icon: 1}); }, function(){ console.log(4); if(ac.is(":checked")){ ac.prop("checked",false)...
    <style>
    			.onoffswitch {position: absolute;right: 15px;top: 50%;margin-top: -15px; width:50px;-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;}
    			.onoffswitch-checkbox {display: none;}
    			.onoffswitch-label {display: block;overflow: hidden;cursor: pointer;border-radius: 20px;}
    			.onoffswitch-inner {display: block;width: 200%;margin-left: -100%;transition: margin 0.3s ease-in 0s;}
    			.onoffswitch-inner:before,.onoffswitch-inner:after{display: block;float: left;width: 50%;height: 30px;padding: 0;line-height: 30px;font-size: 19px;color: white;font-family: Trebuchet, Arial, sans-serif;font-weight: bold;box-sizing: border-box;}
    			.onoffswitch-inner:before {content: "";padding-left: 13px;background-color: #a82d6f;}
    			.onoffswitch-inner:after {content: "";padding-right: 13px;background-color: #999;text-align: right;}
    			.onoffswitch-switch {display: block;width: 28px;height: 28px; margin:1px;background: #FFFFFF;position: absolute;top: 0;bottom: 0;right: 20px;border-radius: 20px;transition: all 0.3s ease-in 0s;}
    			.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-inner {margin-left: 0;}
    			.onoffswitch-checkbox:checked+.onoffswitch-label .onoffswitch-switch {right: 0px;}
    		</style>
    		<div class="onoffswitch">
    					<input type="checkbox" name="onoffswitch" checked class="onoffswitch-checkbox" id="myonoffswitch" >
    					<label class="onoffswitch-label" for="myonoffswitch">
    					 <span class="onoffswitch-inner"></span>
    					 <span class="onoffswitch-switch"></span>
    					</label>
    			</div>
    			<script>
    			$(".onoffswitch-label").click(function(){	
    					var ac =$(".onoffswitch-checkbox[type='checkbox']");
    					layer.confirm('您是如何看待前端开发?', {
    						  btn: ['重要','奇葩'] //按钮
    						}, function(){
    						  layer.msg('的确很重要', {icon: 1});
    						}, function(){
    						  console.log(4);
    		          if(ac.is(":checked")){
    				    		ac.prop("checked",false);
    				    	}else{
    				        ac.prop("checked",true);
    				      }
    						});
    		    });

    所以有个经验就是:

    • 对于HTML元素本身就带有的固有属性,在处理时,使用prop方法。快速,准确。

    • 对于HTML元素我们自己自定义的DOM属性,在处理时,使用attr方法。

    展开全文
  • 这是一款使用纯css3制作的类似于android滑动按钮的左右滑动按钮效果。这个css3左右滑动按钮可以使用鼠标来控制开关滑动,按钮开关滑动时带有很炫的动画和渐变效果。
  • CSS3按钮悬停上下滑动动画展开特效是一款纯CSS3制作的鼠标悬停按钮效果,在按钮变色的同时还会从按钮的上沿和下沿滑动伸展出文字内容。
  • css按钮滑动

    2011-12-17 00:05:29
    .btn45 {  width:152px;  height:50px;  background:url("bg45.jpg") repeat-x left top;  color:#ffafaf;  padding-bottom:18px;  padding-left:14px; } ...鼠标经过按钮时照片上移75

     <style type="text/css">
    <!--
    .btn45 {
     width:152px;
     height:50px;
     background:url("bg45.jpg") repeat-x left top;
     color:#ffafaf;
     padding-bottom:18px;
     padding-left:14px;
    }
    -->
    </style>

    鼠标经过按钮时照片上移75

    <input type="button" class="btn45" value="Submit" οnmοuseοver="this.style.backgroundPosition='left -75px';this.style.color='#bcf1a7';" οnmοuseοut="this.style.backgroundPosition='left top';this.style.color='#ffafaf';" />

    展开全文
  • 这是一款使用纯CSS3制作的滑动开关按钮特效。该滑动按钮使用伪元素来制作外观,配合渐变和动画过渡效果,制作出4种安卓样式的滑动开关按钮。
  • CSS滑动门技术宽度自适应按钮 滑动门技术自适应宽度按钮按钮的宽度可以随着内容的多少而改变,这个在导航菜单上的应该尤为广泛 #nav ul { list-style:none; margin: 0px; padding: 0px; height:31px; ...
  • CSS3滑动开关按钮

    2018-11-29 11:50:00
    CSS3滑动开关按钮 在线演示 本地下载 posted @ 2018-11-29 11:50 栖息地 阅读(...) 评论(...) 编辑 收藏
  •  之前做项目的时候,基本都是将圆角背景图切成三块,故而每次用的标签都超级多,a标签中总是包含三个span,然后里面还得放按钮,导航冗余标签极多。  事实上是之前理解的滑动门的精髓不够到位。  现在有两种...
  • 这是一组使用CSS3制作的精美滑动开关按钮特效。这组滑动按钮按Bootstrap的情景类来设计,可以适应5种不同的场景,以及一种不可用的状态。
  • css3悬停滑动分享按钮动画特效
  • CSS3简单滑动开关按钮是一款使用伪元素来制作外观,配合渐变和动画过渡效果,制作出4种安卓样式的滑动开关按钮
  • 今天用CSS3实现滑动按钮 使用定位,圆角,::after伪元素选择器,相邻兄弟选择器来实现 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" ...
  • 几个很简单可爱的纯css滑动开关按钮,应该只是颜色不一样,比较简单,如果有需要的可以自行下载使用。。。
  • CSS3鼠标悬停按钮滑动特效CSS3鼠标悬停按钮滑动特效CSS3鼠标悬停按钮滑动特效
  • 这是一组使用CSS3制作的精美滑动开关按钮特效。这组滑动按钮按Bootstrap的情景类来设计,可以适应5种不同的场景,以及一种不可用的状态
  • CSS3简单滑动开关按钮是一款使用伪元素来制作外观,配合渐变和动画过渡效果,制作出4种安卓样式的滑动开关按钮
  • 这是一款jQuery和CSS3滑动展开菜单按钮插件。该滑动展开菜单按钮在用户点击主菜单按钮之后,子菜单以滑动的方式依次展开,效果非常炫酷。
  • CSS3简单滑动开关按钮是一款使用伪元素来制作外观,配合渐变和动画过渡效果,制作出4种安卓样式的滑动开关按钮
  • css3模仿微信滑动按钮

    2018-04-19 14:30:49
    html代码 接受新消息通知开声音 diccode="1502">开新消息提示开 da="">消息详情开 css样式 /*设置页面*/ .setpage{ background:#fff; } .setpage .set_dl{  background: #fff
  • CSS-button-滑动按钮

    2019-11-04 21:23:06
    <button class="btn1"> < </button> <button class="btn2"> < </button> .show-center ul button{ width:25px; height:35px; background: rgba(0,0,0,.15);... color:...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 551
精华内容 220
关键字:

css滑动按钮