当前位置: 传客网 > 通过css3实现开关选择按钮

通过css3实现开关选择按钮

2017-01-09 作者:CC大神01

通过属性实现如图所示按钮


1.
relative

{
;
;
;
;
}



 2.
属性,并设置为不可见状态

{

    position;

    width;

    height;

    opacity;

    z;

    outline;

}

设置按钮样式,通过伪类元素实现,并添加过渡动画

{
;
;
;
;
;
#ddd;
;
;
;
}
{
;
;
;
;
;
;
;
;
;
}
{
;
;
;
;
;
;
;
;
#ddd;
;
#fff;
;
;
;
}
 
 

选中后的样式

{

    border#000;

    background#000;

}

{

    display;

    color#fff;

    text;

}

{

    left;

    top;

    width;

    height;

    border;

    box;

    box;

}

完整代码示例

 

 

>

 

 

{

    position;

    display;

    width;

    height;

}

{

    position;

    width;

    height;

    opacity;

    z;

    outline;

}

{

    position;

    display;

    width;

    height;

    border;

    border#ddd;

    transition;

    ;

    ;

}

{

    content;

    position;

    display;

    left;

    width;

    height;

    border;

    line;

    text;

}

{

    content;

    position;

    display;

    width;

    height;

    left;

    top;

    border;

    box#ddd;

    border;

    background#fff;

    transition;

    ;

    ;

}


相关推荐

  • 广州按钮开关厂家首选徳崧电子

      30多年了按钮开关依旧被市场看好,什么是按钮开关?就是一种电子元件,利用来控制电源流动的一种开关,那市场是怎么看待按钮开关的呢?下面我们来了解一下按钮开关。  我国按钮开关形成大批量生产的时间应该是在家电产业,尤其是彩电产业飞速发展的时

  • 北京东城按钮开关厂家请选徳崧公司优质产品

      德崧公司主要生产金属系列防水型按钮开关、不锈钢按钮、信号指示灯;以及塑胶系列防水开关、按键开关、船型翘板开关、电源插座、保险丝座等。德崧公司的产品涉及多个市场领域,其中包括汽车工业,电动车行业,家用电器,工业设备,仪器仪表,通讯设备,健

  • 谢岗按钮开关厂家推荐东莞市德崧电子有限公司

      谢岗按钮开关厂家推荐东莞市德崧电子有限公司  德崧公司主要生产金属系列防水型按钮开关、不锈钢按钮、信号指示灯;以及塑胶系列防水开关、按键开关、船型翘板开关、电源插座、保险丝座等。企业通过ISO9001:2008质量管理体系认证,产品通过

  • 艾朗按钮开关怎么样_艾朗门铃开关门铃开关按钮好吗

    艾朗按钮开关怎么样_艾朗门铃开关门铃开关按钮好吗大家注意了,现在山寨假冒产品多,购买要去艾朗旗舰店,正品保证!特价优惠1-3折火爆进行中点击进入艾朗旗舰店>>>>查看最新优惠信息。。品质好电工说电工说品质好品质好品质

  • qiannian旗舰店官网_12mm金属防水按钮开关 高头 焊脚 自复位 独轮车

    您搜索的商品【12mm金属防水按钮开关高头焊脚自复位独轮车】是来自于淘宝天猫店铺qiannian旗舰店经营的商品,其qiannian旗舰店主要经营的商品有:金属开关,按钮开关,接线器,接线端子连接器,12mm自锁,金属指示灯,按钮开关电源标

  • 门铃按钮开关 正品 亮彩系列120型门铃开关 专卖 松下开关插座面板

    去天猫查看详情或购买>>|查询天猫类似商品>>门铃按钮开关正品亮彩系列120型门铃开关专卖松下开关插座面板,价格是¥39.80元(原价是¥39.80元),卖家是“上海”的天猫店铺,30日销

  • 天图按钮开关怎么样_天图防盗门门铃家用好吗

    天图按钮开关怎么样_天图防盗门门铃家用好吗大家注意了,现在山寨假冒产品多,购买要去天图旗舰店,正品保证!特价优惠1-3折火爆进行中点击进入天图旗舰店>>>>查看最新优惠信息还好吧东西不错,效果很好,因为是无线,所以会

  • 怎样选择智能开关?

    经湖南连天侨汇电气调查  到目前为止智能家居——智能开关行业发展还不够成熟,标志也还不统一。所以在智能开关市场整体还不完善的情况下消费者应该多了解一些基础知识,避免不必要的损失。对此长沙智能开关、长沙智能墙壁开关供应商湖南连天侨汇告诉大家。

  • 三相不平衡调平系统 换相开关实现三相负荷平衡

    三相不平衡调整装置、低压配电网三相不平衡监测装置、三相不平衡调平系统、不对称负荷自动调平系统(型号:TLKS-PLAI特力康小容)一、产品详情不对称负荷自动调平系统是深圳特力康科技研发的一款针对电力配网系统电能质量问题进行治理,实现三相功率

  • Molex 电容开关和金属触摸开关实现交钥匙解决方案

      Molex公司的电容开关和金属触摸开关解决方案具有结构坚固、高度可靠的定制用户接口。垂直集成的Molex设计与顶尖的制造能力可以加快定制电容开关和金属开关的上市时间,同时提供众多的设计选项。  Molex全球产品经理JeffNagy表示

  • 鸿雁开关插座按钮按键开关面板开关面板墙壁开关一开单控

    去天猫查看详情或购买>>|查询天猫类似商品>>鸿雁开关插座按钮按键开关面板开关面板墙壁开关一开单控,价格是¥6.50元(原价是¥20.51元),卖家是“浙江杭州”的天猫店铺,30日销量12

  • 选购(按键开闭.按钮开闭.自锁开闭)要醋笤下寂圆里去选择

    选购(按键开闭.按钮开闭.自锁开闭)要醋笤下寂圆里去选择选购按键开闭要醋笤下寂圆里去选择1、看足感:  品量好的开闭除夜多操做泛茂嚼匀初级原料制成,防水性能、防潮性能、防碰击性能等皆较下,大要光滑,选购时该当

  • Delphi中如何实现透明按钮

    各位亲爱的读者,在delphi编程实战中我们可以使用按钮控件来制作程序中的按钮键。但是在使用其它软件时,我们常常可以看到透明按钮的效果。那么如何在delphi中实现透明按钮的效果?笔者在互联网搜索了不少时间也没有找到这方面的控件,于是决定自

  • C# 代码实现控件的添加(按钮)

    .........////C9BtnPaint是继承button类的子类;//功能实现:添加2排5列button按钮,并为按钮上绘制实心圆点;窗体部分代码:publicForm1(){InitializeComponent();intsX=

  • [转载]电脑高手常用的5个按钮

    原文地址:电脑高手常用的5个按钮作者:在家教育学堂电脑高手常用的5个按钮winkey+d:  这是高手最常用的第一快捷组合键。这个快捷键组合可以将桌面上的所有窗口瞬间最小化,无论是聊天的窗口还是游戏的窗口;只要再次按下这个组合键,刚才的所有

  • 网页设计师注意啦!PSD格式网页按钮图标大全

    黑色质感按钮图标PSD素材条形按钮图标PSD素材黑色水晶按钮图标PSD素材圆形按钮图标PSD素材黑色按钮图标PSD素材按钮PSD素材圆形按钮PSD素材导航按钮PSD素材网页设计图标PSD素材银色黑色按钮图标PSD素材按钮图标PSD素材圆形齿

  • 电源灯开关一位单联面板按钮墙壁套餐 一开单开单控 欧普86型

    去天猫查看详情或购买>>|查询天猫类似商品>>电源灯开关一位单联面板按钮墙壁套餐一开单开单控欧普86型,价格是¥5.50元(原价是¥25.00元),卖家是“江苏苏州”的天猫店铺,30日销量

  • 车内六大按钮绝对不能乱按 ESP按键要小心

    车内的按钮多种多样,进口依维柯卡车系配置按钮能带给驾驶员更好的驾驶感受,但一旦按错,不仅会导致车辆受损,还会带来驾驶安全隐患。那么,这些不能错按的按钮,你都知道吗?车内六大按钮绝对不能乱按ESP按键要小心1、油箱盖按钮一般,这个按钮比较靠近

  • 两开双开电源灯开关套餐面板按钮墙壁轻点 欧普86型二开单控

    去天猫查看详情或购买>>|查询天猫类似商品>>两开双开电源灯开关套餐面板按钮墙壁轻点欧普86型二开单控,价格是¥8.90元(原价是¥39.00元),卖家是“江苏苏州”的天猫店铺,30日销量

  • ZBrush 4R7中按钮颜色怎样自定义

    本文详细讲解在ZBrush®4R7中如何改变按钮颜色。Zbrush默认的开关按钮颜色为橙黄色,若您不喜欢当前颜色,可以通过“Icolors”功能按钮下的各命令来更改界面开关颜色及透明度,与此同时,您还可以更改图标按钮色、图标按钮文本

返回
顶部