纯css布局实现门式炮塔发射架效果
代码语言:html
所属分类:布局界面
代码描述:纯css布局实现门式炮塔发射架效果
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <style> body { margin: 0; background: #101010; color: white; display: -webkit-box; display: flex; -webkit-box-align: center; align-items: center; -webkit-box-pack: center; justify-content: center; min-height: 100vh; } * { box-sizing: border-box; } *:before, *:after { content: ''; display: block; box-sizing: border-box; } .turret { position: relative; } .turret:after { position: absolute; bottom: 0; left: 50%; width: 200%; height: 4em; z-index: 0; background: black; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); border-radius: 100% 100% 90% 90%; -webkit-filter: blur(1em); filter: blur(1em); opacity: 0.5; } .turret-body { position: relative; } .turret-body .turret-core { width: 5.625em; height: 13.75em; position: relative; z-index: 11; } .turret-body .turret-core:before { width: 5.625em; height: 5.625em; -webkit-transform: rotate(45deg) skew(18deg, 18deg); transform: rotate(45deg) skew(18deg, 18deg); border-radius: 100% 0 0 0; background: white; } .turret-body .turret-core:after { width: 100%; height: calc(100% - 2.9em); position: absolute; bottom: 0; left: 0; border-radius: 100%; background: white; } .turret-body .turret-core .eye { position: absolute; width: 2em; height: 2em; background: #4E0208; border: 2px solid black; z-index: 11; top: calc(50% + 1.5em); left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); border-radius: 100%; } .turret-body .turret-core .eye:before { width: 100%; height: 100%; border-radius: 100%; -webkit-animation: eye 4s forwards infinite; animation: eye 4s forwards infinite; background: #4e0208; background: radial-gradient(circle, #4e0208 0%, #f2192b 37%); } .turret-body .turret-core .eye:after { width: 170%; height: 170%; position: absolute; background: aqua; background: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.1)), color-stop(87%, rgba(255, 255, 255, 0))); background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(255, 255, 255, 0) 87%); top: -35%; left: -35%; z-index: -3; border-radius: 100%; } .turret-body .turret-core .line { position: absolute; z-index: 10; left: 50%; top: 0.6em; bottom: 0; width: 0.1em; background: #99A0BC; } .turret-body .turret-arm { position: absolute; bottom: 0; height: 100%; width: 150%; z-index: 0; } .turret-body .turret-arm .arm-inner { display: block; width: 100%; height: 100%; -webkit-animation: arm-slide 4s forwards infinite; animation: arm-slide 4s forwards infinite; } .turret-body .turret-arm .arm-inner:before { position: absolute; width: 50%; left: 0.3em; height: 4em; border-radius: 0.5em; top: 60%; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); z-index: 10; background-color: #333333; border: 2px solid #4d4d4d; } .turret-body .turret-arm .arm-inner:after { width: 0.25em; height: 0.5em; background: #101010; position: absolute; left: -1em; top: 59%; } .turret-body .turret-arm .arm-inner .guns { width: 1em; height: 1em; border-radius: 100%; border: 2px solid #99A0BC; position: absolute; top: 58%; left: 0.7em; z-index: 10; } .turret-body .turret-arm .arm-inner .guns:before { position: absolute; width: 0.7em; height: 0.7em; top: -1.2em; border: 4px solid #99A0BC; border-radius: 100%; } .turret-body .turret-arm .arm-inner .guns:after { position: absolute; width: 0.3em; height: 0.3em; bottom: -1em; left: calc(50% - 0.3em); background: #99A0BC; border-radius: 100%; } .turret-body .turret-arm .case { position: absolute; top: 50%; width: 6em; height: 6em; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; border-radius: 100% 0 0 0; background: white; -webkit-transform: rotate(-45deg) skew(-18deg, -18deg) translate(-35%, -63%); transform: rotate(-45deg) skew(-18deg, -18deg) translate(-35%, -63%); } .turret-body .turret-arm .case:before { width: 75%; height: 75%; left: 0; border-radius: 100% 0 0 0; margin: 1.6em 0 0 1.6em; top: 50%; background: #101010; } .turret-body .turret-arm.left { left: 0; } .turret-body .turret-arm.right {.........完整代码请登录后点击上方下载按钮下载查看
网友评论0