Sword

HTML
<div class="container"> <div class="hand"> <div class="d1"></div> <div class="d2"></div> <div class="d3"></div> <div class="d4"></div> <div class="d5"></div> </div> <div class="agua"></div> <div class="dagas"> <div class="daga"></div> <div class="daga3"></div> <div class="base"></div> <div class="base3"></div> </div> </div>
CSS
body{ background:black; } .container{ position:relative; width:800px; height:600px; background:#eaf0ff; overflow:hidden; margin:90px auto; } .agua{ position:absolute; width:800px; height:121px; background:#91d2f8; margin:500px 0 } .dagas{ position:relative; width:30px; height:500px; transform-origin:center center; margin:21px auto; transform:scale(.7); animation:gira 3s alternate infinite; } .daga{ position:absolute; border-top: 192px solid #aab9ae; border-left: 9px solid transparent; border-right: 9px solid transparent; height: 0; width: 30px; } .daga::before{ content:""; position:absolute; width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid #aab9ae; margin: -241px -10px } .daga3{ position:absolute; border-top: 192px solid #9aa89e; border-left: 9px solid transparent; border-right: 0px solid transparent; height: 0; width: 16px; } .daga3::before{ content:""; position:absolute; width: 0; height: 0; border-bottom: 50px solid #9aa89e; border-left: 25px solid transparent; margin: -241px -10px } .base{ position:absolute; width:65px; height:30px; border-radius:12px; background:#63666b; margin:192px -9px } .base::before{ content:""; position:absolute; width:25px; height:25px; border-radius:100%; background:#ff566d; margin:2px 21px } .base::after{ content:""; position:absolute; width:12px; height:12px; border-radius:100%; background:#f99db3; margin:3px 25px } .base3{ position:absolute; width:25px; height:50px; background:#63666b; margin:221px 12px; box-shadow: inset 2px 2px 1px #63666b, inset 2px 3px 5px rgba(0,0,0,0.3), inset -2px -3px 5px rgba(255,255,255,0.5); } .base3::before{ content:""; position:absolute; width:53px; height:35px; border-radius:50px ; background:#63666b; margin:33px -14px } .base3::after{ content:""; position:absolute; width:17px; height:14px; border-radius:100%; background:#aab9ae; margin:43px 0px } .hand{ position:absolute; width:50px; height:50px; border-radius:16px; background:#fccf97; margin:550px 380px; animation:sube 3s alternate infinite; } .hand::before{ content:""; position:absolute; width:25px; height:40px; background:#fccf97; margin:50px 13px } .d1,.d2,.d3,.d4{ position:absolute; width:12px; border-radius:9px; background:#fccf97; } .d1{ height:40px; margin:-17px 0; } .d2{ height:60px; margin:-30px 12px; } .d3{ height:60px; margin:-40px 23px; } .d4{ height:60px; margin:-35px 35px; } .d5{ position:absolute; width:12px; height:30px; border-radius:12px; background:#fccf97; transform:rotate(45deg); margin:0px 45px; animation:sube3 3s alternate infinite; } @keyframes gira{ 0%{transform:rotate(0deg) scale(.7) } 50%,70%{transform:rotate(360deg)scale(.7) } 80%, 90%, 100%{transform: translateY(162PX) scale(.7) } } @keyframes gira{ 0%{transform:rotate(0deg) scale(.7) } 50%,70%{transform:rotate(360deg)scale(.7) } 80%, 90%, 100%{transform: translateY(162PX) scale(.7) } } @keyframes sube{ 0%,50%{transform: translateY(0px) } 80%, 90%,100%{transform: translateY(-121PX) } } @keyframes sube3{ 0%,50%,60%,70%,80%{transform:translateX(0px) translateY(0px) rotate(0deg); } 90%,100%{transform:translateX(-5px) translateY(0px) rotate(-12deg); } }
JAVASCRIPT
Expand for more options Login