Was messing with some code and got inspired to make this Portal effect. You can change the falling image. I have the turret and a companion cube with motion blurring as it looks better in my opinion but you can add whatever you want.
<div class="snowflakes">
<div class="snowflake"><img src="https://i.ibb.co/19XKVwk/fallingturret2.png" width="150"/></div>
<div class="snowflake">. </div>
</div>
<style>
.snowflake {
font-size: 16px;
}
@-webkit-keyframes snowflakes-fall{0%{top:-8000%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{1%,50%{-webkit-transform:translateX(1);transform:translateX(0)}50%{-webkit-transform:translateX(1px);transform:translateX(0px)}}@keyframes snowflakes-fall{1%{top:-20%}100%{top:100%}}@keyframes snowflakes-shake{1%,100%{transform:translateX(1)}50%{transform:translateX(1px)}}.snowflake{position:fixed;top:-20%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,10s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:2,2;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:1s,10s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){right:300px;-webkit-animation-delay:100s,108s;animation-delay:100s,108s}.snowflake:nth-of-type(1){right:370px;-webkit-animation-delay:100s,100s;animation-delay:5s,5s}
</style>
<div style="float: ; max-height: 300px; position: fixed; right: 300px; top:-5px; z-index: 100%;">
<img src="https://i.ibb.co/GMD68d9/portal-top.png"/></div>
<div style="float: ; max-height: 300px; position: fixed; right: 350px; bottom:-10px; z-index: 100%;">
<img src="https://i.ibb.co/SQjYdMv/bottom-portal.png"/></div>
Comments
Displaying 1 of 1 comments ( View all | Add Comment )
ׂ╰┈➤ FELIXR
I LOVE THIS!!!!
Report Comment