CSS3 Atari Logo + Pong animated - Snippet

--- jQuery jQuery UI Bootstrap Angular Backbone D3 Ember GreenSock TweenMax Handlebars Lodash Modernizr Polymer React React DOM Snap.svg Three.js Underscore Zepto ZingChart

--- Bootstrap Foundation Animate.css

• Preview
• HTML
• CSS
• JS

<div id="atari"> <div class="monitor"> <div class="canvas"> <div class="screen"> <div class="icon"> <div class="side1 side"> <div class="atari1"></div> <div class="atari2"></div> <div class="atari3"></div> <div class="atari4"></div> </div> <div class="side2 side"> <div class="atari1"></div> <div class="atari2"></div> <div class="atari3"></div> <div class="atari4"></div> </div> </div> <div class="pong"> <div class="score1 score"></div> <div class="score2 score"></div> <div class="player1 player"></div> <div class="player2 player"></div> <div class="ball"></div> </div> <div class="resolution canvas"> <div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div> <div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div><div class="line"></div> </div> <div class="shadow"></div> </div> </div> </div> </div>

#atari { width: 600px; margin: 0 auto; } #atari .screen, #atari .atari2,#atari .atari4,#atari .line,#atari .line:after,#atari .line:before { background: #111; } #atari .screen { height: 304px; position: absolute; width:540px; } #atari .resolution { background: none; margin:0; position: absolute; top:0; } #atari .inner-shadow { height: 300px; left: 0; position: absolute; top: 0; width: 500px; z-index: 100; } #atari .line,#atari .line:after,#atari .line:before { height: 1px; margin-bottom: 5px; position: relative; width:530px; } #atari .line:before,#atari .line:after { content:"#"; display: block; margin: 0 none; position: absolute; text-indent:-9999px; top:2px; width:530px; } #atari .line:after { top:4px; } #atari .line:nth-child(1),#atari .line:nth-child(1):before,#atari .line:nth-child(1):after,#atari .line:nth-child(2),#atari .line:nth-child(2):before,#atari .line:nth-child(2):after,#atari .line:nth-child(50),#atari .line:nth-child(50):before,#atari .line:nth-child(50):after,#atari .line:nth-child(49),#atari .line:nth-child(49):before,#atari .line:nth-child(49):after{ width: 500px; } #atari .line:nth-child(1),#atari .line:nth-child(2),#atari .line:nth-child(49),#atari .line:nth-child(50) { left:15px; } #atari .line:nth-child(1){ background: transparent; } #atari .pong { left:20px; position: absolute; top:2px; } #atari .pong * { background: #fff; position: absolute; } @-moz-keyframes ball { 0%, 100% { left:30px; top:107px } 30% { left:300px; top:294px } 50% { left:464px; top:192px } 80% { left:198px; top:0px } } @-moz-keyframes player1 { 0%, 90%, 100% { top:70px } 30% { top:90px } 50% { top:80px } 80% { top:60px } } @-moz-keyframes player2 { 0%, 90%, 100% { top:180px } 30% { top:200px } 50% { top:190px } 80% { top:160px } } @-webkit-keyframes ball { 0%, 100% { left:30px; top:107px } 30% { left:300px; top:294px } 50% { left:464px; top:192px } 80% { left:198px; top:0px } } @-webkit-keyframes player1 { 0%, 90%, 100% { top:70px } 30% { top:90px } 50% { top:80px } 80% { top:60px } } @-webkit-keyframes player2 { 0%, 90%, 100% { top:180px } 30% { top:200px } 50% { top:190px } 80% { top:160px } } @keyframes ball { 0%, 100% { left:30px; top:107px } 30% { left:300px; top:294px } 50% { left:464px; top:192px } 80% { left:198px; top:0px } } @keyframes player1 { 0%, 90%, 100% { top:70px } 30% { top:90px } 50% { top:80px } 80% { top:60px } } @keyframes player2 { 0%, 90%, 100% { top:180px } 30% { top:200px } 50% { top:190px } 80% { top:160px } } #atari .pong .ball { -moz-animation: ball 4s linear 0s infinite normal; -webkit-animation: ball 4s linear 0s infinite normal; animation: ball 4s linear 0s infinite normal; height: 6px; left:300px; top:294px; width:6px; } #atari .pong .player { height: 54px; width:8px; } #atari .pong .player1 { -moz-animation: player1 4s linear 0s infinite alternate; -webkit-animation: player1 4s linear 0s infinite alternate; animation: player1 4s linear 0s infinite alternate; left: 22px; top: 70px; } #atari .pong .player2 { -moz-animation: player2 4s linear 0s infinite normal; -webkit-animation: player2 4s linear 0s infinite normal; animation: player2 4s linear 0s infinite normal; left:470px; top: 180px; } #atari .pong .midfield { height: 240px; left: 247px; top:30px; width:6px; } #atari .icon { height: 200px; left:153px; overflow: hidden; position: absolute; top:52px; width:234px; } #atari .icon * { position: absolute; } #atari .side2 { left:234px; position: absolute; top:0px; -o-transform:scalex(-1); -moz-transform:scalex(-1); -ms-transform:scalex(-1); -webkit-transform:scalex(-1); transform:scalex(-1); } #atari .atari1,.atari3 { background: #fa000f; } #atari .atari1 { height: 200px; left: 85px; width: 32px; } #atari .atari2 { height:256px; top:-53px; width:141px} #atari .atari2 { border-radius:0 0 141px 141px/256px 256px 256px 256px; left: -34px; top:-22px; } #atari .atari3 { border-radius:0 0 200px 200px/334px 334px 334px 334px; bottom:0; height: 334px; left:-101px; top:-135px; width:200px; } #atari .atari4 { border-radius:0 0 183px 183px/239px 239px 239px 239px; height:239px; left:-100px; top:-89px; width:183px; } /* general styles */ .canvas { display: block; overflow: hidden; position: relative; top: 0px; text-indent:-9999px; z-index: 10; } .icon, .icon * { display: block; position: absolute; } .monitor, .monitor .canvas { height: 304px; width:540px; } .monitor { background: #000; border:30px solid #000; border-radius:20px; float:left; position:relative; } .monitor:before { /* shadow */ box-shadow: 0 360px 10px rgba(0,0,0,0.2); border-radius:50%; content: "#"; display: block; height: 20px; left: 30px; position: absolute; text-indent: -9999px; width: 540px; } .monitor:after { /* shine */ background: -webkit-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); background: -moz-linear-gradient(top left, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); background: linear-gradient(to bottom right, rgba(255,255,255,0) 60%, rgba(255,255,255,0.2) 60%, rgba(255,255,255,0) 100%); border-radius:20px 20px 0 0; height: 364px; content: "#"; display: block; position: absolute; right: -30px; text-indent: -9999px; top:-30px; width:600px; z-index: 10; }

Tutorials Palace 20 December, 2018 No Comments

118 Views