div+css实现逼真通量电容器工作动画效果代码
代码语言:html
所属分类:布局界面
代码描述:div+css实现逼真通量电容器工作动画效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @property --deg { syntax: "<angle>"; inherits: true; initial-value: 0deg; } @property --ratio-pos { syntax: "<number>"; inherits: true; initial-value: 0; } @property --ratio-size { syntax: "<number>"; inherits: true; initial-value: 0; } :root { --labs-sys-color-background: #111; --labs-sys-color-surface: #505050; --labs-sys-color-warn-container: #953a38; --labs-sys-color-tertiary-container: #f9bb26; --labs-sys-color-secondary: #ceb893; --labs-sys-z-noise: 100; --labs-sys-z-top: 1; --labs-sys-z-glass: 2; } .case { --light: rgba(255, 255, 255, 0.3); --surface: transparent; background: conic-gradient(var(--surface), var(--light), var(--surface), var(--light), var(--surface), var(--light), var(--surface), var(--light), var(--surface), var(--surface)), var(--labs-sys-color-surface); box-shadow: 0 0 10vmin rgba(0, 0, 0, 0.5); width: 60vmin; aspect-ratio: 3/3.8; border-radius: 3vmin; position: relative; } .case .top, .case .bottom { height: 8vmin; } .case .center { height: 60vmin; display: grid; place-items: center; } .inner-container { background: radial-gradient(at center, rgba(255, 255, 255, 0.2), transparent 55%), linear-gradient(to bottom, black, rgba(0, 0, 0, 0.2)), var(--labs-sys-color-surface); width: 80%; height: 100%; border-radius: 6vmin; position: relative; overflow: hidden; } .top { display: flex; flex-direction: column; align-items: center; z-index: var(--labs-sys-z-top); } .top .gap { flex-basis: 0.7vmin; } .label { padding: 0.5vmin 0.8vmin; border-radius: 0.25vmin; background: var(--labs-sys-color-warn-container); color: rgba(255, 255, 255, 0.7); text-transform: uppercase; letter-spacing: 0.3vmin; font-weight: bold; font-family: "Helvetica Neue", Helvetica, sans-serif; font-size: 1.1vmin; text-shadow: 0.1vmin 0.1vmin 0.1vmin #390404de; box-shadow: 0 0.1vmin 0.3vmin rgba(0, 0, 0, 0.2); border: 1px solid transparent; z-index: var(--labs-sys-z-top); } .label:last-child { transform: translateY(42vmin); } .inner-container-shadow { pointer-events: none; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; } .inner-container-shadow:before { content: ""; position: absolute; top: 7vmin; left: 2vmin; right: 2vmin; bottom: 2vmin; box-shadow: 0 -2vmin 0 10vmin rgba(0, 0, 0, 0.4); transform: translateY(5vmin); border-radius: 10vmin; filter: blur(10px); } .part { position: absolute; left: 1.5vmin; top: 6.5vmin; } .part .circle { position: absolute; border-radius: 50%; background: var(--labs-sys-color-secondary); width: 14vmin; aspect-ratio: 1; box-shadow: 1vmin 0 3vmin black; } .part .circle:before { content: ""; position: absolute; inset: 0.1vmin; border: 0.2vmin rgba(255, 255, 255, 0.3) solid; border-radius: inherit; background: conic-gradient(transparent, var(--light), transparent, var(--light), transparent, var(--light), transparent, var(--light), transparent, var(--light), transparent); } .part .bolt { position: absolute; left: 2vmin; top: 5.7vmin; width: 1vmin; opacity: 0.8; aspect-ratio: 1; filter: drop-shadow(0 0.2vmin 0.2vmin rgba(0, 0, 0, 0.6)); } .part .bolt.second { top: 7.5vmin; } .part .bolt:before { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5) 40%, rgba(0, 0, 0, 0.2)), var(--labs-sys-color-secondary); -webkit-clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .part .bolt:after { content: ""; position: absolute; inset: 0.25vmin; background: radial-gradient(at center, rgba(255, 255, 255, 0.6) 40%, rgba(0, 0, 0, 0.2)), var(--labs-sys-color-secondary); border-radius: 50%; box-shadow: 0 0.1vmin 0.1vmin rgba(0, 0, 0, 0.4); } .part .plug { position: absolute; } .part .plug .plug-bottom { position: absolute; left: 5vmin; top: 5vmin; border-radius: 50%; box-shadow: 0 0.5vmin 0.5vmin 0.1vmin rgba(0, 0, 0, 0.6); width: 4vmin; aspect-ratio: 1; background: radial-gradient(at top, transparent, rgba(0, 0, 0, 0.4)), var(--labs-sys-color-warn-container); background-size: 150%; background-position-x: 50%; } .part .plug .plug-top { position: absolute; left: 5.4vmin; top: 5.4vmin; width: 3.2vmin; aspect-ratio: 1; border-radius: 50%; border-top: 0.1vmin solid rgba(255, 255, 255, 0.3); border-bottom: 0.3vmin solid rgba(0, 0, 0, 0.5); background: radial-gradient(1vmin at 50% 30%, rgba(255, 255, 255, 0.3), transparent), radial-gradient(5vmin at 50% 30%, rgba(255, 255, 255, 0.1), transparent), radial-gradient(5vmin at 50% 5%, transparent 40%, black 70%) var(--labs-sys-color-warn-container) center center no-repeat; } .part .plug .plug-end { position: absolute; left: 5.8vmin; top: 8vmin; width: 2.5vmin; aspect-ratio: 2/5; border-radius: 0.8vmin; background: radial-gradient(1vmin 2vmin at 70% 50%, rgba(255, 255, 255, 0.25), transparent), linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 30%), linear-gradient(to right, rgba(0, 0, 0, 0.3), transparent, rgba(0, 0, 0, 0.3)), radial-gradient(10vmin at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.5) 60%), var(--labs-sys-color-warn-container); } .part .plug .plug-cable { position: absolute; left: 6.4vmin; top: 14vmin; } .part .plug .plug-cable .plug-calbe-end { position: absolute; left: 0.8vmin; top: 8.7vmin; transform: rotate(-45deg); width: 1.5vmin; height: 3.3vmin; background: radial-gradient(at 50% 0%, transparent 40%, rgba(0, 0, 0, 0.9) 80%), radial-gradient(1vmin at 100% 0%, rgba(0, 0, 0, 0.7), transparent), linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 60%, rgba(0, 0, 0, 0.5)), var(--labs-sys-color-tertiary-container); border-radius: 2vmin; } .part .plug .plug-cable:after { content: ""; position: absolute; border-radius: 3vmin; width: 1.2vmin; height: 10vmin; background: radial-gradient(2vmin at 110% 100%, var(--labs-sys-color-tertiary-container), transparent), linear-gradient(to right, rgba(0, 0, 0, 0.5), transparent 40%, transparent 50%, transparent 60%, rgba(0, 0, 0, 0.5)), var(--labs-sys-color-tertiary-container); } .part .plug .plug-cable:before { content: ""; position: absolute; background: radial-gradient(at 50% 0%, black 40%, rgba(0, 0, 0, 0.8)); border-radius: 50%; border: 0.3vmin solid rgba(255, 255, 255, 0.3); top: 10vmin; left: 1.3vmin; width: 1.8vmin; aspect-ratio: 1; } .part .bridge { position: absolute; background: linear-gradient(to right, transparent 88%, rgba(0, 0, 0, 0.3) 88%, transparent 95%), var(--labs-sys-color-secondary); box-shadow: 0 0 0.3vmin 0vmin rgba(0, 0, 0, 0.3), 0 0 4vmin 0.5vmin rgba(0, 0, 0, 0.6); left: 7vmin; top: 5.2vmin; width: 20.4vmin; height: 1.6vmin; transform: rotate(43deg); transform-origin: center left; } .part .bridge:after { content: ""; position: absolute; top: 0.6vmin; width: 17.5vmin; height: 0.4vmin; background: transparent; box-shadow: inset 0 0 0.3vmin rgba(0, 0, 0, 0.7); border-radius: 2vmin; } .part .bridge-glass { position: absolute; height: 2.2vmin; width: 16vmin; background: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.7), transparent), linear-gradient(to right, rgba(255, 255, 255, 0.7), transparent, transparent); border: 2px solid rgba(255, 255, 255, 0.4); top: -0.45vmin; border-radius: 3vmin; mix-blend-mode: overlay; z-index: 1; } .part .bridge-glass .waveimage { position: absolute; top: -0.8vmin; left: 0; height: 3.5vmin; width: 20vmin; opacity: 0; -webkit-animation: wave 10s linear infinite; animation: wave 10s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } .part .bridge-light { z-index: 1; filter: blur(6px); position: absolute; height: 1.5vmin; width: 16vmin; background: white; -webkit-animation: bridgelight 10s linear infinite; animation: bridgelight 10s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; border-radius: 4vmin; opacity: 0; } .part .bridge-light2 { z-index: 1; position: absolute; height: 0.5vmin; top: 0.5vmin; width: 17vmin; --s: #a4eaf8; background: linear-gradient(to right, var(--s) 20%, transparent 20%, var(--s) 50%, transparent 50%, var(--s) 80%, transparent 80%, var(--s) 90%, transparent 90%, transparent); background-size: 200% 100%; border-radius: 4vmin; -webkit-animation: bridgelight2 1s linear infinite; animation: bridgelight2 1s linear infinite; background-position: -100vmin; opacity: 0; z-index: 100; } @-webkit-keyframes bridgelight2 { from { background-position: -100vmin; opacity: 0; } to { background-position: 0; opacity: 1; } } @keyframes bridgelight2 { from { background-position: -100vmin; opacity: 0; } to { background-position: 0; opacity: 1; } } @-webkit-keyframes bridgelight { from { opacity: 0; width: 0; } 2% { opacity: 1; width: 22vmin; } 49% { opacity: 1; width: 22vmin; } 50% { opacity: 0; width: 0; } 50% { width: 22vmin; } } @keyframes bridgelight { from { opacity: 0; width: 0; } 2% { opacity: 1; width: 22vmin; } 49% { opacity: 1; width: 22vmin; } 50% { opacity: 0; width: 0; } 50% { width: 22vmin; } } .part.right { left: unset; right: 15vmin; } .part.right .circle { transform: rotate(42deg); } .part.right .plug-cable { transform: scaleX(-1) translateX(-1.2vmin); } .part.right .bridge { transform: rotate(136.8deg); } .part.bottom { left: 17.4vmin; top: unset; bottom: 5vmin; } .part.bottom .circle { transform: rotate(59deg); } .part.bottom .plug { transform: rotate(270deg) translateX(-14.1vmin); } .part.bottom .bridge { width: 25.5vmin; left: 6.9vmin; transform: rotate(270deg); background: linear-gradient(to right, transparent 90%, rgba(0, 0, 0, 0.3) 90%, transparent 98%), var(--labs-sys-color-secondary); } .part.bottom .bridge:after { width: 22vmin; } .part.bottom .bridge .waveimage { width: 28vmin; } .part.bottom .bridge .bridge-glass { width: 20vmin; top: -0.5vmin; } .part.bottom .bridge .bridge-light2 { width: 22vmin; } .case-border { pointer-events: none; position: absolute; top: 0.5vmin; left: 0; right: 0.5vmin; bottom: 0; background: transparent; border-radius: inherit; z-index: var(--labs-sys-z-glass); box-shadow: 0 -0.2vmin 0 0.15vmin rgba(0, 0, 0, 0.5), 0.1vmin -0.3vmin 0 0.1vmin rgba(255, 255, 255, 0.6), 0vmin -0.1vmin 0 0.1vmin rgba(255, 255, 255, 0.1), 0.2vmin -0.2vmin 0 0.2vmin rgba(255, 255, 255, 0.6); mix-blend-mode: overlay; opacity: 0.8; } .case-glass { pointer-events: none; --case-glass-light-size: 0.3vmin; position: absolute; z-index: var(--labs-sys-z-glass); inset: 6vmin; filter: drop-shadow(0 0 1vmin rgba(0, 0, 0, 0.4)); border-radius: 5vmin; } .case-glass-bg { position: absolute; inset: -0.5vmin; border-radius: 6vmin; background: linear-gradient(135deg, #333333, black) border-box; border: 3vmin solid transparent; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .case-glass-soft-lights { position: absolute; inset: var(--case-glass-light-size); border-radius: 5vmin; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent 40%, transparent 50%, rgba(255, 255, 255, 0.1)) border-box; border: calc(var(--case-glass-light-size) * 4) solid transparent; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .case-glass-middle-lights { position: absolute; inset: calc(var(--case-glass-light-size) * 2); border-radius: 5vmin; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.2), transparent 40%, transparent 45%, rgba(255, 255, 255, 0.1)) border-box; border: var(--case-glass-light-size) solid transparent; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .case-glass-hard-lights { position: absolute; inset: calc(var(--case-glass-light-size) * 2.5); border-radius: 5vmin; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.1), transparent 40%, transparent 70%, rgba(255, 255, 255, 0.1)) border-box; border: calc(var(--case-glass-light-size) / 2) solid transparent; -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .lights { position: absolute; inset: 0; border-radius: 50%; z-index: 10000; --b-1: #a4eaf80f; --deg: 0deg; --ratio-pos: 1; --ratio-size: 1; opacity: 0; transform: translateY(-2vmin); -webkit-animation: light1 10s linear infinite; animation: light1 10s linear infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } .lights .l-base { mix-blend-mode: overlay; position: absolute; inset: 0vmax; opacity: 0.3; background: conic-gradient(from var(--deg), transparent, var(--b-1), transparent, var(--b-1), transparent, var(--b-1), transparent, var(--b-1), transparent, transparent, transparent, var(--b-1), transparent, var(--b-1), transparent, transparent, transparent, var(--b-1), transparent, var(--b-1), transparent, var(--b-1), transparent, transparent, transparent, var(--b-1), transparent, var(--b-1), transparent); } .lights .l-center { position: absolute; inset: -50vmax; background: radial-gradient(2vmin at center, rgba(255, 255, 255, 0.9), #a4eaf84f, transparent, transparent), radial-gradient(5vmin at center, rgba(255, 255, 255, 0.9), #a4eaf84f, transparent, transparent), radial-gradient(2vmin at center, rgba(255, 255, 255, 0.9), transparent), radial-gradient(10vmin at center, rgba(255, 255, 255, 0.6), #a4eaf81f, transparent, transparent), radial-gradient(20vmin at center, #a4eaf81f, transparent, transparent, transparent), radial-gradient(at center, #a4eaf84f, #a4eaf81f, transparent, transparent, transparent); } .lights .l-bar { position: absolute; top: 36vmin; left: 20vmin; height: 4vmin; width: 59vmin; --s: #a4eaf84f; --e: tran.........完整代码请登录后点击上方下载按钮下载查看
网友评论0