炫酷灯泡打开关闭效果
代码语言:html
所属分类:动画
代码描述:炫酷灯泡打开关闭效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> /* Press the light bulb button using either a mouse or a keyboard, touch works too! to change the theme :) */ /* DEFAULTS */ /* ======================================================= */ body { --global-bg: hsl(222 4% 96%); --global-s: hsl(222 99% 46%); --global-l: hsl(222 22% 92%); --global-bs: transparent; } body.on { --global-bg: hsl(228 100% 4%); --global-s: hsl(254 100% 83%); --global-l: hsl(254 2% 18%); --global-bs: hsl(146 100% 84% / .06); } body { display: grid; place-content: center; min-height: 100vh; padding: 20px; box-sizing: border-box; margin: 0; background: var(--global-bg); -webkit-transition: .3s linear; transition: .3s linear; } /* BUTTON */ /* ======================================================= */ button { width: 200px; height: 200px; border-radius: 1000px; padding: 2rem; box-sizing: content-box; display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; border: 2px solid var(--global-l); background: transparent; cursor: pointer; -webkit-transition: .3s; transition: .3s; margin: 0 auto; } button:focus { outline: 0; border-color: var(--global-s); } button:active { -webkit-transform: scale(.92); transform: scale(.92); } /* LIGHT BULB */ /* ======================================================= */ .light-bulb { --t-duration: .3s; --t-type: linear; pointer-events: none; -webkit-transform: translateY(9px); transform: translateY(9px); } .upper { -webkit-transform: translateY(-11px); transform: translateY(-11px); } .circle { width: 56px; height: 54px; background: inherit; border: 2px solid var(--global-s); border-radius: 100px; position: relative; -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); box-shadow: inset 0 8px 12px 2px var(--global-bs), 2px -4px 12px var(--global-bs); } .line-1 { width: 10px; height: 30px; border-bottom: 0; position: absolute; bottom: 0; left: 0; z-index: 2; background: var(--global-bg); -webkit-transform: rotate(-30deg) translateX(-3px) translateY(50%); transform: rotate(-30deg) translateX(-3px) translateY(50%); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); } .line-2 { width: 10px; height: 30px; border-bottom: 0; position: absolute; bottom: 0; right: 0; z-index: 2; background: var(--global-bg); -webkit-transform: rotate(30deg) translateX(3px) translateY(50%); transform: rotate(30deg) translateX(3px) translateY(50%); display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); } .line-c { width: 0; height: inherit; border: 1px solid var(--global-s); -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); } .circle-bottom { width: 40px; height: 40px; background: var(--global-l); border-radius: 100%; position: absolute; bottom: -8px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); } .lower { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; position: relative; } .lower-1 { align-self: center; width: 20px; height: 24px; border: 2px solid var(--global-s); border-radius: 0 0 0 4px; position: relative; display: -webkit-box; display: flex; -webkit-box-pack: space-evenly; justify-content: space-evenly; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); box-shadow: 2px 0 4px var(--global-bs); } .lower-1::before { content: ''; position: absolute; left: 2px; top: -2px; z-index: 2; width: 8px; height: 8px; border-radius: 50px 50px 0 0; background: var(--global-bg); -webkit-transform: translate(-100%, -100%); transform: translate(-100%, -100%); -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); } .lower-1::after { content: ''; position: absolute; left: calc(100% - 6px); top: -4px; z-index: 2; width: 6px; height: 8px; background: var(--global-bg); -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type); } .lower-line { width: 50%; height: 2px; background: var(--global-s); -webkit-transition: var(--t-duration) var(--t-type); transition: var(--t-duration) var(--t-type) } .lower-2 { align-self: center; -webkit-transform: translateX(13px) translateY(-4px); transform: translateX(13px) translateY(-4px); -webkit-transition: .3s linear; transition: .3s linear; } .lower-2-lines { width: 2px; height: 40px; background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(20%, transparent), color-stop(20%, var(--global-s)), color-stop(80%, var(--global-s)), color-stop(80%, transparent)); background: linear-gradient(to bottom, transparent, transparent 20%, var(--global-s) 20%, var(--global-s) 80%, transparent.........完整代码请登录后点击上方下载按钮下载查看
网友评论0