网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款类似键盘按钮特效代码,纯css3实现,鼠标点击按钮可设置监听添加/删除选中样式。
使用方法:
1.使用NPM安装程序包。
# NPM
$ npm i keyboard-css --save
2.将Keyboard.css导入项目中。
<link rel="stylesheet" href="/dist/css/main.min.css" />
3.要创建键盘按钮,只需将CSS类“kbc button”添加到目标元素即可。
<kbd class="kbc-button">Ctrl</kbd>
<button class="kbc-button">Ctrl</button>
<a class="kbc-button">Ctrl</a>
4.移除按钮点击效果
<kbd class="kbc-button no-container">Ctrl</kbd>
<button class="kbc-button no-container">Ctrl</button>
<a class="kbc-button no-container">Ctrl</a>
5.使用以下CSS类来指定按钮大小:
<button class="kbc-button kbc-button-xxs">XXS</button>
<button class="kbc-button kbc-button-xs">XS</button>
<button class="kbc-button kbc-button-sm">SM</button>
<button class="kbc-button">MD</button>
<button class="kbc-button kbc-button-lg">LG</button>
6.4种按钮状态:
<button class="kbc-button hover">Hovered</button>
<button class="kbc-button focus">Focused</button>
<button class="kbc-button active">Activated</button>
<button class="kbc-button disabled">Disabled</button>
7.设置按钮样式:
<kbd class="kbc-button kbc-button-primary">Primary</kbd>
<kbd class="kbc-button kbc-button-secondary">Secondary</kbd>
<kbd class="kbc-button kbc-button-success">Success</kbd>
<kbd class="kbc-button kbc-button-danger">Danger</kbd>
<kbd class="kbc-button kbc-button-info">Info</kbd>
<kbd class="kbc-button kbc-button-light">Light</kbd>
<kbd class="kbc-button kbc-button-dark">Dark</kbd>
8.重写_variables.scss
// Colors
$kbc-white: #fff !default;
$kbc-gray-100: #f8f9fa !default;
$kbc-gray-200: #e9ecef !default;
$kbc-gray-300: #dee2e6 !default;
$kbc-gray-400: #ced4da !default;
$kbc-gray-500: #adb5bd !default;
$kbc-gray-600: #6c757d !default;
$kbc-gray-700: #495057 !default;
$kbc-gray-800: #343a40 !default;
$kbc-gray-900: #212529 !default;
$kbc-black: #000 !default;
$kbc-grays: () !default;
// stylelint-disable
$kbc-grays: map-merge(
(
'100': $kbc-gray-100,
'200': $kbc-gray-200,
'300': $kbc-gray-300,
'400': $kbc-gray-400,
'500': $kbc-gray-500,
'600': $kbc-gray-600,
'700': $kbc-gray-700,
'800': $kbc-gray-800,
'900': $kbc-gray-900,
),
$kbc-grays
);
// stylelint-enable
$kbc-light: $kbc-gray-100 !default;
$kbc-dark: $kbc-gray-800 !default;
$kbc-blue: #007bff !default;
$kbc-indigo: #6610f2 !default;
$kbc-purple: #6f42c1 !default;
$kbc-pink: #e83e8c !default;
$kbc-red: #dc3545 !default;
$kbc-orange: #fd7e14 !default;
$kbc-yellow: #ffc107 !default;
$kbc-green: #28a745 !default;
$kbc-teal: #20c997 !default;
$kbc-cyan: #17a2b8 !default;
$kbc-colors: () !default;
// stylelint-disable
$kbc-colors: map-merge(
(
'blue': $kbc-blue,
'indigo': $kbc-indigo,
'purple': $kbc-purple,
'pink': $kbc-pink,
'red': $kbc-red,
'orange': $kbc-orange,
'yellow': $kbc-yellow,
'green': $kbc-green,
'teal': $kbc-teal,
'cyan': $kbc-cyan,
'white': $kbc-white,
'gray': $kbc-gray-600,
'gray-dark': $kbc-gray-800,
),
$kbc-colors
);
// stylelint-enable
$kbc-primary: $kbc-blue !default;
$kbc-secondary: $kbc-gray-600 !default;
$kbc-success: $kbc-green !default;
$kbc-info: $kbc-cyan !default;
$kbc-warning: $kbc-yellow !default;
$kbc-danger: $kbc-red !default;
$kbc-light: $kbc-gray-100 !default;
$kbc-dark: $kbc-gray-800 !default;
$kbc-theme-colors: () !default;
// stylelint-disable
$kbc-theme-colors: map-merge(
(
'primary': $kbc-primary,
'secondary': $kbc-secondary,
'success': $kbc-success,
'info': $kbc-info,
'warning': $kbc-warning,
'danger': $kbc-danger,
'light': $kbc-light,
'dark': $kbc-dark,
),
$kbc-theme-colors
);
// stylelint-enable
// Set a specific jump point for requesting color jumps
$kbc-theme-color-interval: 8% !default;
// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
$kbc-yiq-contrasted-threshold: 150 !default;
// Customize the light and dark text colors for use in our YIQ color contrast function.
$kbc-yiq-text-dark: $kbc-gray-900 !default;
$kbc-yiq-text-light: $kbc-white !default;
// Components
//
// Define common padding and border radius sizes and more.
$kbc-line-height-base: 1.5 !default;
$kbc-line-height-lg: $kbc-line-height-base !default;
$kbc-line-height-sm: $kbc-line-height-base !default;
$kbc-line-height-xs: $kbc-line-height-base !default;
$kbc-line-height-xxs: $kbc-line-height-base !default;
$kbc-border-width: 1px !default;
$kbc-bg-color: $kbc-white !default;
$kbc-border-color: adjust-color($kbc-bg-color, $lightness: -10%) !default;
$kbc-shadow-color: adjust-color($kbc-bg-color, $lightness: -30%) !default;
$kbc-font-color: color-yiq($kbc-bg-color) !default;
$kbc-border-radius: 0.25rem !default;
$kbc-border-radius-lg: 0.3rem !default;
$kbc-border-radius-sm: 0.2rem !default;
// Typography
//
// Font, line-height, and color for body text, headings, and more.
$kbc-font-family-sans-serif: -apple-system, BlinkMacSystemFont, 'Segoe UI',
Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' !default;
$kbc-font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
'Liberation Mono', 'Courier New', monospace !default;
$kbc-font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
$kbc-font-size-lg: $kbc-font-size-base * 1.25 !default;
$kbc-font-size-sm: $kbc-font-size-base * 0.875 !default;
$kbc-font-size-xs: $kbc-font-size-base * 0.725 !default;
$kbc-font-size-xxs: $kbc-font-size-base * 0.7 !default;
$kbc-btn-depth-xxs: 2 !default;
$kbc-btn-depth-xs: 2 !default;
$kbc-btn-depth-sm: 3 !default;
$kbc-btn-depth: 5 !default;
$kbc-btn-depth-lg: 8 !default;
$kbc-font-weight-lighter: lighter !default;
$kbc-font-weight-light: 300 !default;
$kbc-font-weight-normal: 400 !default;
$kbc-font-weight-bold: 700 !default;
$kbc-font-weight-bolder: bolder !default;
$kbc-font-weight-base: $kbc-font-weight-normal !default;
$kbc-small-font-size: 80% !default;
// Buttons
$kbc-btn-border-width: $kbc-border-width !default;
$kbc-btn-border-color: $kbc-border-color !default;
$kbc-btn-disabled-opacity: 0.65 !default;
$kbc-btn-line-height: $kbc-line-height-base !default;
$kbc-btn-font-size: $kbc-font-size-base !default;
$kbc-btn-font-weight: $kbc-font-weight-base !default;
$kbc-btn-font-family: $kbc-font-family-sans-serif !default;
$kbc-btn-border-radius: $kbc-border-radius !default;
$kbc-btn-bg-color: $kbc-bg-color !default;
$kbc-btn-font-color: $kbc-font-color !default;
$kbc-btn-shadow-color: $kbc-shadow-color !default;
$kbc-btn-after-border-color: $kbc-shadow-color !default;
$kbc-btn-cursor: pointer !default;
$kbc-btn-text-align: left !default;
$kbc-btn-icon-right: 0.5rem !default;
$kbc-btn-icon-top: 0.5rem !default;
// stylelint-disable
$kbc-btn-hover-bg-color: adjust-color(
$kbc-btn-bg-color,
$lightness: -10%
) !default;
// stylelint-enable
$kbc-btn-focus-bg-color: $kbc-btn-hover-bg-color !default;
$kbc-btn-active-bg-color: $kbc-btn-hover-bg-color !default;
$kbc-btn-active-box-shadow: 0 0 1px 1px #c7c7c7 !default;
// KBD stuff
$kbc-kbd-font-size-base: inherit !default;
$kbc-kbd-line-height-base: inherit !default;
$kbc-kbd-depth: 3 !default;
$kbc-kbd-border-radius: $kbc-btn-border-radius !default;
$kbc-kbd-font-family: $kbc-font-family-monospace !default;
// KBD size
$kbc-kbd-size-base: () !default;
// stylelint-disable
$kbc-kbd-size-base: map-merge(
(
'padding-y': 0.1rem,
'padding-x': 0.4rem,
'font-size': $kbc-kbd-font-size-base,
'line-height': $kbc-kbd-line-height-base,
'depth': $kbc-kbd-depth,
'after-border-width': 0.125rem,
'after-adjust-x': -0.0625rem,
'after-adjust-y': -6,
'after-border-radius': $kbc-kbd-border-radius + 0.25rem,
),
$kbc-kbd-size-base
);
// stylelint-enable
// Button sizing
$kbc-btn-size-base: () !default;
// stylelint-disable
$kbc-btn-size-base: map-merge(
(
'padding-y': 0.375rem,
'padding-x': 0.75rem,
'font-size': $kbc-font-size-base,
'line-height': $kbc-line-height-base,
'depth': $kbc-btn-depth,
'after-border-width': 0.125rem,
'after-adjust-x': -0.0625rem,
'after-adjust-y': -5,
'after-border-radius': $kbc-btn-border-radius + 0.25rem,
),
$kbc-btn-size-base
);
// stylelint-enable
// stylelint-disable
$kbc-btn-size-map: () !default;
$kbc-btn-size-map: map-merge(
(
'xxs': (
'padding-y': 0.1rem,
'padding-x': 0.3rem,
'font-size': $kbc-font-size-xxs,
'line-height': $kbc-line-height-xxs,
'depth': $kbc-btn-depth-xxs,
'after-border-width': 0.0625rem,
'after-adjust-x': -0.125rem,
'after-adjust-y': -4,
'after-border-radius': $kbc-btn-border-radius + 0.125rem,
),
'xs': (
'padding-y': 0.175rem,
'padding-x': 0.5rem,
'font-size': $kbc-font-size-xs,
'line-height': $kbc-line-height-xs,
'depth': $kbc-btn-depth-xs,
'after-border-width': 0.0625rem,
'after-adjust-x': -0.125rem,
'after-adjust-y': -4,
'after-border-radius': $kbc-btn-border-radius + 0.125rem,
),
'sm': (
'padding-y': 0.25rem,
'padding-x': 0.5rem,
'font-size': $kbc-font-size-sm,
'line-height': $kbc-line-height-sm,
'depth': $kbc-btn-depth-sm,
'after-border-width': 0.09375rem,
'after-adjust-x': -0.0625rem,
'after-adjust-y': -4,
'after-border-radius': $kbc-btn-border-radius + 0.125rem,
),
'lg': (
'padding-y': 0.5rem,
'padding-x': 1rem,
'font-size': $kbc-font-size-lg,
'line-height': $kbc-line-height-lg,
'depth': $kbc-btn-depth-lg,
'after-border-width': 0.125rem,
'after-adjust-x': -0.125rem,
'after-adjust-y': -5,
'after-border-radius': $kbc-btn-border-radius + 0.25rem,
),
),
$kbc-btn-size-map
);
// stylelint-enable
转载请注明来源:html5+css3 3D立体键盘风格按钮特效代码
本文永久链接地址:https://www.moyouyouw.cn/code/678.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论