`

帮助你生成纯CSS3动画开关效果的在线工具 - On/Off FlipSwitch

阅读更多

日期:2012-8-7  来源:GBin1.com

帮助你生成纯CSS3动画开关效果的在线工具 - On/Off FlipSwitch

在线演示

以前我们介绍过在线生成纯CSS3的气泡提示的在线工具 ,今天我们这里介绍一个帮助你在线生成纯CSS实现的动画开关界面UI的工具 - On/Off FlipSwitch

这个工具可以帮助你自定义这个动画开关的UI,并且完全使用CSS3实现。同时它也拥有预定义的iOS4,iOS5和Android样式可供选择。如果你需要在你的界面中添加开关UI的话,这个工具肯定能够帮助你创建漂亮动感的UI元素。

CSS代码

.onoffswitch {
    position: relative; width: 90px;
    
-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: 2px solid #
999999; border-radius: 20px;
}
.onoffswitch
-inner {
    width: 
200%; margin-left: -100%;
    
-moz-transition: margin 0.3s ease-in
 0s; -webkit-transition: margin 0.3s ease-in
 0s;
    
-o-transition: margin 0.3s ease-in
 0s; transition: margin 0.3s ease-in
 0s;
}
.onoffswitch
-inner > div {
    
float
: left; width: 50%; height: 30px; padding: 0; line-height: 30px;
    font
-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold;
    
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
}
.onoffswitch
-inner .onoffswitch-active {
    padding
-left: 10px;
    background
-color: #2FCCFF; color: #FFFFFF;
}
.onoffswitch
-inner .onoffswitch-inactive {
    padding
-right: 10px;
    background
-color: #EEEEEE; color: #999999;
    text
-align: right;
}
.onoffswitch
-switch
 {
    width: 18px; margin: 6px;
    background: #FFFFFF;
    border: 2px solid #
999999; border-radius: 20px;
    position: absolute; top: 
0; bottom: 0; right: 56px;
    
-moz-transition: all 0.3s ease-in
 0s; -webkit-transition: all 0.3s ease-in
 0s;
    
-o-transition: all 0.3s ease-in
 0s; 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; 
}

HTML代码

<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" checked>
    <label class="onoffswitch-label" for
="myonoffswitch">
        <div class="onoffswitch-inner">
            <div class="onoffswitch-active">ON</div>
            <div class="onoffswitch-inactive">OFF</div>
        </div>
        <div class="onoffswitch-switch"></div>
    </label>
</div> 

希望大家喜欢这个在线工具,如果你有任何想法,请给我们留言,谢谢!

来源:帮助你生成纯CSS3动画开关效果的在线工具 - On/Off FlipSwitch

分享到:
评论

相关推荐

    纯css3 on/off按钮

    然而,在纯CSS3实现的on/off按钮中,我们会隐藏这个原始的复选框,用自定义的图形来代替,以创建更美观且符合用户界面设计标准的开关效果。 描述中提到了利用`checkbox`复选框进行操作,这涉及到CSS3的伪类和数据...

    纯CSS3动画按钮效果 5种漂亮样式

    在“纯CSS3动画按钮效果 5种漂亮样式”这个主题中,我们将讨论如何利用这些特性来设计吸引眼球且用户体验良好的按钮。 首先,CSS3中的关键帧动画(@keyframes)是实现按钮动画的核心。通过定义动画的不同阶段,我们...

    纯css3带动画效果的左右滑动按钮

    【纯css3带动画效果的左右滑动按钮】是一种利用CSS3特性实现的交互式设计,主要用于创建具有平滑动画和视觉吸引力的开关按钮。在现代网页设计中,这种按钮常用于用户界面,如设置选项、开启/关闭功能等。CSS3作为...

    css3动画仿加速球水波流动效果

    css3动画仿加速球水波流动效果 参考地址: https://reportvalue.com/wordpress-plugins/gauge-plugin-for-wordpress/ http://codepen.io/wiseguy12851/pen/mJZNqN

    纯CSS3灯光开关动画 自定义checkbox样式

    今天我们要分享一个纯CSS3灯光开关动画,切换开关可以改变页面背景颜色,从而模拟灯光的开启和关闭。值得注意的是,这款开关是通过CSS3自定义checkbox样式来实现的,记得很早以前也分享过类似的一个CSS3应用纯CSS3...

    css3在线动画制作工具

    2. **实时预览**:在线工具通常提供实时预览功能,用户可以立即看到动画效果,方便调整和优化。 3. **代码生成**:完成动画设计后,工具会自动生成对应的CSS3代码,可以直接复制到项目中使用。 4. **兼容性检查**...

    纯css3炫酷粒子动画特效

    【CSS3炫酷粒子动画特效】是一种利用现代浏览器对CSS3特性的支持,通过编程方式创建出视觉上引人入胜的动态效果。这个特效主要依赖于CSS3的动画(Animations)和转换(Transforms)特性,以及可能的伪元素(Pseudo-...

    纯css实现按钮开关效果

    总结来说,纯CSS实现按钮开关效果是一种高效且灵活的方法,它利用了CSS的伪类选择器和动画特性,为网页带来了丰富的交互体验。通过理解和掌握这一技术,开发者可以创建出更多富有创意和个性化的用户界面。

    纯CSS3实现动画开关按钮特效.zip

    本项目“纯CSS3实现动画开关按钮特效”利用了CSS3的特性,创造了一个无需JavaScript介入的交互式开关按钮,实现了鼠标操作时的滑动动画和渐变效果,提升了用户体验。 首先,我们要理解CSS3中的关键帧动画(@...

    纯css3黑色炫酷开关按钮动画效果

    在这个特定的案例中,我们关注的是一个纯CSS3实现的黑色炫酷开关按钮动画效果。 首先,CSS3中的关键帧动画(@keyframes)是实现这种开关按钮动画的基础。通过定义动画的不同阶段,我们可以让按钮在被点击时从“关闭...

    SVG/CSS3镂空3D自行车骑行动画

    之前我们分享过一些基于CSS3和SVG的自行车动画,比如这款SVG/CSS3自行车 模拟自行车行驶动画和纯CSS3 3D自行车动画都非常炫酷。今天我们要给大家介绍另外一款基于SVG的3D镂空自行车骑行动画,与前面自行车动画不同的...

    css3弹力球动画animation属性制作3D弹力球弹跳动画效果

    在CSS3中,`animation`属性是一个强大的工具,它允许我们创建复杂的动态效果,比如我们的主题——3D弹力球的弹跳动画。这个动画效果不仅增强了用户界面的视觉吸引力,还能提供更好的交互体验。接下来,我们将深入...

    HTML5+CSS3源码_纯CSS3实现滑杆开关切换按钮动画.rar.rar

    在这个名为“HTML5+CSS3源码_纯CSS3实现滑杆开关切换按钮动画.rar”的压缩包中,我们主要讨论的是如何使用CSS3来实现一个滑杆开关的动态切换按钮。 首先,HTML5是超文本标记语言的最新版本,它引入了许多新的元素和...

    css动画切换效果

    随着技术的发展,CSS3引入了许多新的特性和功能,其中就包括丰富的动画效果。本篇将详细探讨CSS3动画切换效果及其在实际应用中的实现。 一、CSS3动画基础 1. `@keyframes` 规则:CSS3动画的核心是`@keyframes`,它...

    漂亮的纯CSS3开关切换按钮动画

    之前我们为大家分享过很多款各式各样的CSS3开关切换按钮,很多还是非常富有创意的,比如这里的多组超具创意的CSS3开关切换按钮和纯CSS3灯光开关动画。今天我们要带来另外一款外观很漂亮的纯CSS3开关切换按钮动画,它...

    纯CSS实现语音动画.docx

    总结起来,这个纯CSS实现的语音动画利用了CSS的动画框架和伪类选择器,巧妙地创建了一种动态的波浪形视觉效果,适用于微信小程序或其他Web应用中的录音界面,以提升交互体验。这种技术的优点在于它不依赖JavaScript...

    纯css3鼠标经过动画菜单效果

    本主题聚焦于“纯CSS3鼠标经过动画菜单效果”,这是一个在网页设计中非常实用且流行的技术,尤其适用于创建动态交互的导航菜单。通过CSS3的特性,我们可以实现无需JavaScript或任何其他脚本语言的复杂动画效果。 ...

    html入门--纯CSS动画全演示

    本资源聚焦于纯CSS动画,为初学者提供了一个全面的学习平台,旨在帮助新手掌握如何使用CSS实现丰富的动态效果。 在Web设计中,CSS动画能够增加用户体验,使网站更具吸引力。它们可以用来创建过渡效果、微交互以及...

    纯CSS3炫酷元素边框线条动画特效

    本文将深入探讨“纯CSS3炫酷元素边框线条动画特效”,这是一种无需JavaScript,仅通过CSS3就能实现的动态边框效果,能够使页面元素的边框自动循环运动,为用户带来独特的交互体验。 首先,CSS3中的关键帧动画(@...

Global site tag (gtag.js) - Google Analytics