Skip to content

Conversation

@SoftwareRVG
Copy link
Owner

<script src="//assets.codepen.io/assets/editor/live/console_runner-ba402f0a8d1d2ce5a72889b81a71a979.js"></script><script src="//assets.codepen.io/assets/editor/live/events_runner-902c66a0175801ad4cdf661b3208a97b.js"></script><script src="//assets.codepen.io/assets/editor/live/css_live_reload_init-bad5f8d322020126e7b4287d497c7efe.js"></script> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <script src="//codepen.io/assets/libs/prefixfree.min.js"></script> <style class="cp-pen-styles">@charset "UTF-8"; @import url("//fonts.googleapis.com/css?family=Roboto:500&text=Softw@re "); @import url("//fonts.googleapis.com/css?family=Roboto:500&text=RVG"); @import url("//fonts.googleapis.com/css?family=Roboto:100&text=CSS3 "); body { min-height: 400px; height: 100vh; margin: 0; background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000); }

.stage {
height: 1000px;
width: 1500px;
margin: auto;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
perspective: 9999px;
transform-style: preserve-3d;
}

.layer {
width: 100%;
height: 100%;
position: absolute;
transform-style: preserve-3d;
opacity: 0;
animation: ಠ_ಠ 5s infinite alternate ease-in-out -7.5s, o_O 0.1s 1;
animation-fill-mode: forwards;
transform: rotateY(40deg) rotateX(33deg) translateZ(0);
}

.layer:after {
font: 100px/0.65 'Pacifico', 'Kaushan Script', Futura, 'Roboto', 'Trebuchet MS', Helvetica, sans-serif;
content: 'Softw@re\A RVG';
white-space: pre;
text-align: center;
height: 100%;
width: 100%;
position: absolute;
top: 50px;
color: whitesmoke;
letter-spacing: -5px;
text-shadow: 4px 0 10px rgba(0, 0, 0, 0.13);
}

.layer:nth-child(1):after {
transform: translateZ(0px);
}

.layer:nth-child(2):after {
transform: translateZ(-2px);
}

.layer:nth-child(3):after {
transform: translateZ(-4px);
}

.layer:nth-child(4):after {
transform: translateZ(-6px);
}

.layer:nth-child(5):after {
transform: translateZ(-8px);
}

.layer:nth-child(6):after {
transform: translateZ(-10px);
}

.layer:nth-child(7):after {
transform: translateZ(-12px);
}

.layer:nth-child(8):after {
transform: translateZ(-14px);
}

.layer:nth-child(9):after {
transform: translateZ(-16px);
}

.layer:nth-child(10):after {
transform: translateZ(-18px);
}

.layer:nth-child(11):after {
transform: translateZ(-20px);
}

.layer:nth-child(12):after {
transform: translateZ(-22px);
}

.layer:nth-child(13):after {
transform: translateZ(-24px);
}

.layer:nth-child(14):after {
transform: translateZ(-26px);
}

.layer:nth-child(15):after {
transform: translateZ(-28px);
}

.layer:nth-child(16):after {
transform: translateZ(-30px);
}

.layer:nth-child(17):after {
transform: translateZ(-32px);
}

.layer:nth-child(18):after {
transform: translateZ(-34px);
}

.layer:nth-child(19):after {
transform: translateZ(-36px);
}

.layer:nth-child(20):after {
transform: translateZ(-38px);
}

.layer:nth-child(n+10):after {
-webkit-text-stroke: 3px rgba(0, 0, 0, 0.25);
}

.layer:nth-child(n+11):after {
-webkit-text-stroke: 15px dodgerblue;
text-shadow: 6px 0 6px #00366b, 5px 5px 5px #002951, 0 6px 6px #00366b;
}

.layer:nth-child(n+12):after {
-webkit-text-stroke: 15px #0077ea;
}

.layer:last-child:after {
-webkit-text-stroke: 17px rgba(0, 0, 0, 0.1);
}

.layer:first-child:after {
color: #fff;
text-shadow: none;
}

@Keyframes ಠ_ಠ {
100% {
transform: rotateY(-40deg) rotateX(-43deg);
}
}
@Keyframes o_O {
100% {
opacity: 1;
}
}
</style>

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant