Floating logo by Software RVG

HTML
<meta charset="utf-8"> <meta name="generator" content="SOFTWARE RVG HTML Editor (www.software-rvg.com)"> <meta name="dcterms.created" content="wed., 14 apr. 2016 01:24:25 GMT"> <meta name="description" content="css3 animation design by Software RVG,advanced css3 floating animation logo "> <meta name="keywords" content="css3,html5,svg,javascript,animations,Software RVG advanced designs,programming,designing,developing"> <title>CSS3 ADVANCED ANIMATION ,FLOATING LOGO BY SOFTWARE RVG </title> <div id="phaser-example"><canvas width="800" height="300" style="display: block; touch-action: none; -webkit-user-select: none; -webkit-tap-highlight-color: rgba(0, 24, 88, 0.8); width: 800px;height: 300px;"></canvas></div> <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><link rel="canonical" href="http://codepen.io/noahblon/pen/CsxfH" /> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet prefetch" href="//codepen.io/assets/reset/reset.css" /><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: 450px; height: 100vh; margin: 0; background: radial-gradient(circle, #0077ea, #1f4f96, #1b2949, #000000); } .stage { height: 300px; width: 500px; 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> <div class="stage"> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> <div class="layer"></div> </div> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
CSS
.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); }
JAVASCRIPT
src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"
Expand for more options Login