`

帮助你生成纯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-球形3d旋转-多图3d球形旋转

    本项目“纯css3-球形3d旋转-多图3d球形旋转”着重展示了如何利用CSS3的特性来实现一个动态的、三维球形的图像旋转展示效果。这种效果可以用于网站的轮播图、产品展示或任何需要吸引用户注意力的地方。 首先,我们来...

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

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

    CSS3动画效果源代码27个合集.zip

    一共27个各式各样的CSS3动画效果源代码,内容如下:纯CSS3模拟风车转动效果纯css3云彩动画效果纯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炫酷粒子动画特效

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

    css3在线动画制作工具

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

    纯css实现按钮开关效果

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

    纯css3各种开关按钮动画特效

    **纯CSS3开关按钮动画特效详解** 在网页设计中,交互性和用户体验是至关重要的元素,而按钮作为用户与页面交互的主要方式之一,其设计和动画效果直接影响着用户的感知。本篇将详细介绍如何利用纯CSS3技术实现四种...

    纯CSS3实现百叶窗动画效果

    纯CSS3实现的百叶窗动画效果是一种极具视觉吸引力的技术,它通过利用CSS3的特性,如选择器、转换(transform)、过渡(transition)和动画(animation),将一个图像或背景分割成多个部分,模拟百叶窗缓缓打开的效果...

    CSS3动画库motion-css

    纯css3写的动画库 motion-css,里面有代码源码 也有实例 ;

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

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

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

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

    css动画切换效果

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

    CSS3实现的动画开关,效果很炫酷

    【CSS3实现的动画开关详解】 在Web开发中,用户界面的交互性是提升用户体验的重要因素之一。CSS3(Cascading Style Sheets Level 3)的引入为开发者提供了丰富的动画功能,使得创建炫酷的界面元素变得更加容易。本...

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

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

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

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

    纯css3有趣的文字波浪动画特效

    纯CSS3技术在近年来的Web开发中扮演了重要的角色,它为网页设计师提供了丰富的样式和动画效果,使得网站交互性和视觉表现力大幅提升。本文将深入探讨如何利用CSS3实现有趣的文字波浪动画特效,让网页设计更加生动...

    纯css3音阶波浪loading加载动画特效

    【纯CSS3音阶波浪加载动画特效】是一种利用现代浏览器对CSS3特性的支持,创建出具有音乐旋律感和动态视觉效果的加载指示器。这个加载动画通过纯CSS3技术,无需JavaScript或其他编程语言,就能实现优雅且引人入胜的...

Global site tag (gtag.js) - Google Analytics