<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3自定义Checkbox特效</title>
</head>
<style type="text/css">
.tgl{display:none}
.tgl,.tgl *,.tgl :after,.tgl :before,.tgl+.tgl-btn,.tgl:after,.tgl:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.tgl ::-moz-selection,.tgl :after::-moz-selection,.tgl :before::-moz-selection,.tgl+.tgl-btn::-moz-selection,.tgl::-moz-selection,.tgl:after::-moz-selection,.tgl:before::-moz-selection{background:0 0}
.tgl ::selection,.tgl :after::selection,.tgl :before::selection,.tgl+.tgl-btn::selection,.tgl::selection,.tgl:after::selection,.tgl:before::selection{background:0 0}
.tgl+.tgl-btn{outline:0;display:block;width:4em;height:2em;position:relative;cursor:pointer}
.tgl+.tgl-btn:after,.tgl+.tgl-btn:before{position:relative;display:block;content:"";width:50%;height:100%}
.tgl+.tgl-btn:after{left:0}
.tgl+.tgl-btn:before{display:none}
.tgl:checked+.tgl-btn:after{left:50%}
.tgl-light+.tgl-btn{background:#f0f0f0;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease}
.tgl-light+.tgl-btn:after{border-radius:50%;background:#fff;-webkit-transition:all .2s ease;transition:all .2s ease}
.tgl-light:checked+.tgl-btn{background:#9FD6AE}
.tgl-ios+.tgl-btn{background:#fbfbfb;border-radius:2em;padding:2px;-webkit-transition:all .4s ease;transition:all .4s ease;border:1px solid #e8eae9}
.tgl-ios+.tgl-btn:after{border-radius:2em;background:#fbfbfb;-webkit-transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;transition:left .3s cubic-bezier(.175,.885,.32,1.275),padding .3s ease,margin .3s ease;-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08);box-shadow:0 0 0 1px rgba(0,0,0,.1),0 4px 0 rgba(0,0,0,.08)}
.tgl-ios+.tgl-btn:active{-webkit-box-shadow:inset 0 0 0 2em #e8eae9;box-shadow:inset 0 0 0 2em #e8eae9}
.tgl-ios+.tgl-btn:active:after{padding-right:.8em}
.tgl-ios:checked+.tgl-btn{background:#86d993}
.tgl-ios:checked+.tgl-btn:active{-webkit-box-shadow:none;box-shadow:none}
.tgl-ios:checked+.tgl-btn:active:after{margin-left:-.8em}
.tgl-skewed+.tgl-btn{overflow:hidden;-webkit-transform:skew(-10deg);-ms-transform:skew(-10deg);transform:skew(-10deg);-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;background:#888}
.tgl-skewed+.tgl-btn:after,.tgl-skewed+.tgl-btn:before{-webkit-transform:skew(10deg);-ms-transform:skew(10deg);transform:skew(10deg);display:inline-block;-webkit-transition:all .2s ease;transition:all .2s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.4)}
.tgl-skewed+.tgl-btn:after{left:100%;content:attr(data-tg-on)}
.tgl-skewed+.tgl-btn:before{left:0;content:attr(data-tg-off)}
.tgl-skewed+.tgl-btn:active{background:#888}
.tgl-skewed+.tgl-btn:active:before{left:-10%}
.tgl-skewed:checked+.tgl-btn{background:#86d993}
.tgl-skewed:checked+.tgl-btn:before{left:-100%}
.tgl-skewed:checked+.tgl-btn:after{left:0}
.tgl-skewed:checked+.tgl-btn:active:after{left:10%}
.tgl-flat+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;background:#fff;border:4px solid #f2f2f2;border-radius:2em}
.tgl-flat+.tgl-btn:after{-webkit-transition:all .2s ease;transition:all .2s ease;background:#f2f2f2;content:"";border-radius:1em}
.tgl-flat:checked+.tgl-btn{border:4px solid #7FC6A6}
.tgl-flat:checked+.tgl-btn:after{left:50%;background:#7FC6A6}
.tgl-flip+.tgl-btn{padding:2px;-webkit-transition:all .2s ease;transition:all .2s ease;font-family:sans-serif;-webkit-perspective:100px;-ms-perspective:100px;perspective:100px}
.tgl-flip+.tgl-btn:after,.tgl-flip+.tgl-btn:before{display:inline-block;-webkit-transition:all .4s ease;transition:all .4s ease;width:100%;text-align:center;position:absolute;line-height:2em;font-weight:700;color:#fff;position:absolute;top:0;left:0;-webkit-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden;border-radius:4px}
.tgl-flip+.tgl-btn:after{content:attr(data-tg-on);background:#02C66F;-webkit-transform:rotateY(-180deg);-ms-transform:rotateY(-180deg);transform:rotateY(-180deg)}
.tgl-flip+.tgl-btn:before{background:#FF3A19;content:attr(data-tg-off)}
.tgl-flip+.tgl-btn:active:before{-webkit-transform:rotateY(-20deg);-ms-transform:rotateY(-20deg);transform:rotateY(-20deg)}
.tgl-flip:checked+.tgl-btn:before{-webkit-transform:rotateY(180deg);-ms-transform:rotateY(180deg);transform:rotateY(180deg)}
.tgl-flip:checked+.tgl-btn:after{-webkit-transform:rotateY(0);-ms-transform:rotateY(0);transform:rotateY(0);left:0;background:#7FC6A6}
.tgl-flip:checked+.tgl-btn:active:after{-webkit-transform:rotateY(20deg);-ms-transform:rotateY(20deg);transform:rotateY(20deg)}
</style>
<body>
<span class='tg-list-item'>
<input class='tgl tgl-light' id='cb1' type='checkbox'>
<label class='tgl-btn' for='cb1'></label>
</span>
<span class='tg-list-item'>
<input class='tgl tgl-ios' id='cb2' type='checkbox'>
<label class='tgl-btn' for='cb2'></label>
</span>
<span class='tg-list-item'>
<input class='tgl tgl-skewed' id='cb3' type='checkbox'>
<label class='tgl-btn' data-tg-off='OFF' data-tg-on='ON' for='cb3'></label>
</span>
<span class='tg-list-item'>
<input class='tgl tgl-flat' id='cb4' type='checkbox'>
<label class='tgl-btn' for='cb4'></label>
</span>
<span class='tg-list-item'>
<input class='tgl tgl-flip' id='cb5' type='checkbox'>
<label class='tgl-btn' data-tg-off='Nope' data-tg-on='Yeah!' for='cb5'></label>
</span>
</body>
</html>
相关推荐
本主题聚焦于如何利用CSS来改写`checkout input`（即表单输入框）的默认样式，以提升用户在结账时的体验。我们将探讨CSS3的新特性，以及如何结合JavaScript进行更深入的定制。 1. **CSS3基础样式调整** - `border-...
在网页中，CSS负责样式和布局，而JS则处理交互性和动态功能。如果这些资源加载速度慢或者顺序不当，可能会导致页面显示不正常或用户体验下降。css_js_loader插件正是为了解决这个问题，它优化了ZenCart中CSS和JS文件...
1. `styles.css`：全局样式，包含网站的基本样式和布局设置。 2. `responsive.css`：响应式样式，确保网站在不同设备和屏幕尺寸上都能正常显示。 3. `components.css`：组件样式，针对特定UI元素如按钮、导航栏、...
3. `js`和`css`目录：分别存放JavaScript和CSS代码，负责前端交互和样式设计。 4. `languages`目录：包含多语言文件，支持插件的国际化。 5. `woocommerce-checkout-field-editor.php`：主插件文件，定义插件的基本...
4. **购物车和结账样式**（如`cart.css`和`checkout.css`）：处理购物车图标、购物车页面以及结账流程的视觉表现。 5. **页脚样式**（如`footer.css`）：页脚区域的样式，包括版权信息、联系信息和社交媒体链接。 ...
这个文件夹可能包含 PHP 脚本、CSS 样式表、JavaScript 文件以及任何其他与 PagSeguro API 交互所需的资源。 通过这个插件，OpenCart 商家可以轻松地接受来自巴西及其他地区使用 PagSeguro 的客户的支付，从而扩大...
`style.css` 文件包含了项目的样式定义，用于美化和布局HTML页面，使其符合设计要求。 `composer.json` 和 `composer.lock` 是PHP依赖管理工具Composer的相关文件。`composer.json` 定义了项目所需的库和扩展，而`...
- `templates/`: 优化后的模板文件，可能包括HTML、CSS和JavaScript，用于修改结账页面的布局和样式。 - `includes/`: PHP脚本，用于处理结账逻辑，如订单处理、数据验证和支付接口集成。 - `language/`: 多语言...
标题中的“freemius-checkout-css”显然与一个特定的软件插件或服务有关，它允许用户自定义其在industryhills.com上的Freemius结账流程的样式。Freemius是一个知名的WordPress插件市场，它提供了订阅和支付管理功能...
CSS3是CSS的最新版本，引入了许多新的样式属性和动画效果。在这个插件中，CSS3的`transform`和`transition`属性起到了关键作用。`transform`用于改变元素的位置、大小或形状，而`transition`则定义了这些变化的过渡...
在网页开发中，CSS（Cascading Style Sheets）和JavaScript（JS）是不可或缺的组成部分，它们负责页面的样式布局和交互效果。"css js loader"是一个专门针对这两者加载优化的工具，它能够帮助开发者更有效地管理和...
2. **模板文件**：这些文件（如HTML和CSS）定义了一页结账的视觉样式和布局，可能位于`templates`或`includes/templates`目录下。 3. **PHP脚本**：这些文件处理用户输入，进行业务逻辑处理，如`checkout.php`，它...
整个 CSS 样式表可以在index.css找到。 但是，在css/目录中，有各个实用程序的样式表： color 、 background-color 、 border 、 fill和stroke 。 该模块还在lib/目录中公开了一些可以合并到现有返工项目中的返工...
在创建`CSS`样式文件时，建议遵循以下命名约定： - 使用有意义的名称，避免使用过于简略的缩写。 - 避免使用下划线`_`和空格，而是使用连字符`-`分隔单词，如`main-navigation`。 - 使用驼峰式命名法（camelCase）...
CSS（层叠样式表）是一种用于控制网页元素样式的技术，它能让网页布局、颜色、字体等元素呈现出丰富的视觉效果。 首先，我们来深入了解一下CSS模板。CSS模板是一种预先设计好的样式布局，可以快速应用到HTML页面上...
项目目标允许前端开发人员适应媒体查询以拥有更多功能允许在CSS中使用媒体查询样式的日期时间查询TODO：在CSS中允许基于位置的查询入门要使用，只需在任何输出之前包含queryKit.php。 查看演示文件。贡献叉吧！ 创建...
CSS 代码则影响页面样式和布局。 - **后端逻辑**：PHP 脚本可能涉及与 Magento 2 的 API 交互，以获取订单信息、更新用户账户状态等。 - **模板修改**：可能涉及到 Magento 2 的模板文件修改，以显示自定义内容或...
我们将讨论Stripe Checkout的基本概念、设置过程以及与CSS相关的自定义选项。 首先，Stripe Checkout提供了简洁的API，使得开发者可以通过几行代码就可启动订阅流程。要开始使用，你需要在Stripe后台创建一个帐户并...
这些资源是构建和展示电子商务平台用户界面的关键元素，它们包括但不限于CSS样式表、JavaScript脚本以及JSP（JavaServer Pages）文件。下面将详细阐述这些资源在网页开发中的作用及其重要性。 1. CSS (Cascading ...
展示CSS的特殊性和继承性以创建和更新样式 实施CSS重置并了解为什么它对跨浏览器开发很重要 描述和使用响应单位（px，em，rem，％和vw.vh）创建完全响应的网站 介绍 在这个项目中，您将使用更高级CSS样式化单个页面...