纯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;
}
/* -----------------------.........完整代码请登录后点击上方下载按钮下载查看
网友评论0