设备开光按钮点击效果
代码语言:html
所属分类:表单美化
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css?family=Open+Sans&display=swap"); *, *:before, *:after { box-sizing: border-box; position: relative; } :root { --easing: cubic-bezier(.5, 0, .5, 1); --duration: .3s; --blue: #6C80F5; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; } /* ---------------------------------- */ .toggle-wrapper { font-size: 2rem; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } #toggle { width: 2em; height: 2em; visibility: hidden; position: absolute; } #app { display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; color: #404843; } .fancy-toggle { font-size: 3rem; width: 1em; height: 1em; padding: 0.2em; box-sizing: content-box; margin-right: 1.5em; -webkit-transition: -webkit-transform 0.4s var(--easing); transition: -webkit-transform 0.4s var(--easing); transition: transform 0.4s var(--easing); transition: transform 0.4s var(--easing), -webkit-transform 0.4s var(--easing); -webkit-transition-property: width, background-color, -webkit-transform; transition-property: width, background-color, -webkit-transform; transition-property: transform, width, background-color; transition-property: transform, width, background-color, -webkit-transform; } .fancy-toggle .bg { background: grey; position: absolute; top: 0; left: 0; width: 175%; height: 100%; border-radius: 2em; box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); -webkit-transition: inherit; transition: inherit; } .fancy-toggle .circle { width: 1em; height: 1em; background: white; box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.1); border-radius: 50%; -webkit-transition: inherit; transition: inherit; } .fancy-toggle .circle > svg { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); margin: -.1em; } .fancy-toggle .loader { stroke: var(--blue); stroke-width: 6; fill: none; stroke-dasharray: 1 1; stroke-dashoffset: -1; -webkit-transition: stroke-dasharray calc(var(--timeout, 0) * 0.5ms) linear, stroke-dashoffset 1000ms linear; transition: stroke-dasharray calc(var(--timeout, 0) * 0.5ms) linear, stroke-dashoffset 1000ms linear; } .status { overflow: hidden; display: grid; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .status > div { grid-area: 1 / 1; } .status-text { -webkit-transition: -webkit-transform var(--duration) var(--easing); transition: -webkit-transform var(--duration) var(--easing); transition: transform var(--duration) var(--easing); transition: transform var(--duration) var(--easing), -webkit-transform var(--duration) var(--easing); } .status-text[data-for="off"], .status-text[data-for="pending"] { -webkit-transform: translateY(-100%); transform: translateY(-100%); } .status-text[data-for="on"] { -webkit-transform: translateY(100%); transform: translateY(100%); } .status-text[data-active] ~ [data-for="pending"] { -webkit-transform: translateY(100%); transform: translateY(100%); } .status-text[data-active] { -webkit-transform: translateY(0); transform: translateY(0); } [data-state="off"] .fancy-toggle .bg { background: #E44B45; } [data-state="pending"] .fancy-toggle { -webkit-transform: translateX(50%); transform: translateX(50%); } [data-state="pending"] .fancy-toggle .bg { w.........完整代码请登录后点击上方下载按钮下载查看
网友评论0