box-shadow实现光剑
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title></title> <style> /* defaults */ html { -moz-box-sizing: border-box; box-sizing: border-box; font-size: 16px; } *, *:before, *:after { -moz-box-sizing: inherit; box-sizing: inherit; } body, html { height: 100%; background-color: black; color: white; } a { color: inherit; } /* cf */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /* lightsaber */ .lightsaber-cont { height: 100%; text-align: center; } .lightsaber-cont:before { display: inline-block; height: 100%; margin-right: -0.25em; vertical-align: middle; content: ""; } .lightsaber { display: inline-block; width: 85%; height: 20px; vertical-align: middle; } /* blade */ @keyframes blade-glow { 0% { box-shadow: 20px 0 50px 6px; } 50% { box-shadow: 20px 0 50px 12px; } 100% { box-shadow: 20px 0 50px 6px; } } .blade { float: right; position: relative; z-index: 1; width: 75%; height: 14px; border: 1px solid red; border-left: none; margin-top: 3px; border-radius: 0 47% 47% 0; background-color: white; color: red; animation: blade-glow 4s infinite; } /* hilt */ .hilt { float: left; position: relative; z-index: 2; width: 25%; height: 100%; border: 1px solid #333; border-radius: 35% 20% 20% 35%; background-color: #999; } </style> </head> <body> <div class="lightsaber-cont"> <div class="lightsaber cf"> <div class="blade"></div> <div class="hilt"></div> </div> </div> </body> </html>
.