纯css绘制光剑效果
代码语言:html
所属分类:布局界面
代码描述:纯css绘制光剑效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> *, *:before, *:after { position: relative; box-sizing: border-box; } :root { --lightsaber-color: #6eedb2; } html, body { height: 100%; width: 100%; margin: 0; padding: 0; overflow: hidden; } body { display: -webkit-box; display: flex; -webkit-box-pack: center; justify-content: center; -webkit-box-align: center; align-items: center; background: #0f101e; } .lightsaber { -webkit-transition: -webkit-transform 0.3s ease-in-out; transition: -webkit-transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out; transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; width: 30vw; height: 5vw; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-align: center; align-items: center; } .metal { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #ccdbee), color-stop(35%, #607088), color-stop(70%, #ccdbee), to(#607088)); background: linear-gradient(to bottom, #ccdbee 10%, #607088 35%, #ccdbee 70%, #607088); } .black-metal { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #767a83), color-stop(35%, #202432), color-stop(70%, #767a83), to(#202432)); background: linear-gradient(to bottom, #767a83 10%, #202432 35%, #767a83 70%, #202432); } .copper { background: -webkit-gradient(linear, left top, left bottom, color-stop(10%, #70413a), color-stop(35%, #90645a), color-stop(70%, #70413a), to(#401f21)); background: linear-gradient(to bottom, #70413a 10%, #90645a 35%, #70413a 70%, #401f21); } .pommel-cap { height: 90%; width: 10%; border-radius: 10% 0 0 10%; box-shadow: 0 0 5vw black; } .grip { height: 100%; width: 45%; border-radius: 5%; box-shadow: 0 0 5vw black; } .hilt { height: 80%; width: 35%; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -webkit-box-pack: start; justify-content: flex-start; } .hilt > .segment { width: 8%; height: 100%; -webkit-box-flex: 1; flex-grow: 1; } .hilt > .segment.black-metal { width: 20%; } .focusing-ring { height: 70%; width: 15%; display: -webkit-box; display: flex; } .focusing-ring > .segment { width: 40%; height: 100%; -webkit-box-flex: 1; flex-grow: 1; } .focusing-ring > .segment.metal { width: 8%; } .blade-emitter { height: 100%; width: 10%; z-index: 1; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; } .blade-emitter > .segment { width: 40%; height: 100%; -webkit-box-flex: 1; flex-grow: 1; } .blade-emitter > .segment.start { height: 60%; width: 8%; } .blade-emitter > .segment.middle { height: 80%; } .blade-emitter > .segment.end { height: 100%; width: 8%; } .blade { position: absolute; height: 70%; width: 300%; left: 100%; background: -webkit-gradient(linear, left top, left bottom, from(var(--lightsaber-color)), color-stop(25%, white), color-stop(75%, white), to(var(--lightsaber-color))); background: linear-gradient(to bottom, var(--lightsaber-color), white 25%, white 75%, var(--lightsaber-color)); border-top-right-radius: 10vw; border-bottom-right-radius: 10vw; } .blade > .glow { border-radius: inherit; border: inherit; position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-shadow: 0 0 5vw var(--lightsaber-color); } .blade > .glow.large { box-shadow: 0 0 30vw 10vw var(--lightsaber-color); opacity: 0.7; } .controls { height: 25%; width: 50%; position: absolute; left: 45%; bottom: 100%; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; justify-content: space-around; -webkit-box-align: center; align-items: center; z-index: -1; } .controls > .button { height: 0.75vw; width: 0.75vw; background: black; border-radius: 50%; } .controls:before { content: ""; position: absolute; width: 100%; height: 20%; bottom: 100%; background: #b16521; } .button.-up { background-color: #117305; } .button.-down { background-color: #a8141e; } /* ---------------------------------- */ :root { --ease: cubic-bezier(0.5, 0, 0.2, 1); --duration: 10s; --delay: 0s; --speed: 0.75; } :root * { -webkit-animation-duration: var(--duration); animation-duration: var(--duration); -webkit-animation-delay: var(--delay); animation-delay: var(--delay); -webkit-animation-timing-function: var(--ease); animation-timing-function: var(--ease); -webkit-animation-fill-mode: both; animation-fill-mode: both; } .pommel-cap { --delay: 0s; --duration: 1s, 0.5s; -webkit-animation-name: enter-reverse, fade-in; animation-name: enter-reverse, fade-in; } .grip { --delay: 0.3s; --duration: 1s, 0.5s; -webkit-animation-name: enter, fade-in; animation-name: enter, fade-in; } .controls { --delay: 1s; --duration: 1s, 0.5s; -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; } .controls .button { -webkit-animation-name: scale-up; animation-name: scale-up; --delay: calc(1.5s + (var(--i, 0) * 0.1s)); --duration: 0.5s; } .hilt .segment { --delay: calc(1.25s + (var(--i, 0) * 0.05s)); --duration: 1s, 1s; -webkit-animation-name: slide-down, fade-in; animation-name: slide-down, fade-in; } .hilt .segment:nth-child(even) { -webkit-animation-name: slide-up, fade-in; animation-name: slide-up, fade-in; } .focusing-ring .segment { --delay: calc(2.25s + (var(--i, 0) * 0.05s)); --duration: 1s, 1s; -webkit-animation-name: enter, fade-in; animation-name: enter, fade-in; } .blade-emitter .segment { --delay: calc(3s + (var(--i, 0) * 0.05s)); --duration: 1s, 1s; -webkit-animation-name: enter, fade-in; animation-name: enter, fade-in; } .lightsaber { -webkit-animation-name: lightsaber, lightsaber-out; animation-name: lightsaber, lightsaber-out; -webkit-animation-fill-mode: backwards, forwards; animation-fill-mode: backwards, forwards; --ease: cubic-bezier(0.5, 0, 0.2, 1), cubic-bezier(0.82, -0.38, 0.14, 1.35); --delay: 0s, 10s; --duration: 10s, 1s; } .blade { --delay: 4.5s; --duration: 1s, 1s; -webkit-transform-origin: left center; transform-origin: left center; -webkit-animation-name: blade, fade-in; .........完整代码请登录后点击上方下载按钮下载查看
网友评论0