(CSS3 Animated) Game Center iOS 7 Icon
How do I make an (css3 animated) game center ios 7 icon?
Apple's IOS7 Game Center icon animated using CSS3 features with Louie Mantia's great design.. What is a (css3 animated) game center ios 7 icon? How do you make a (css3 animated) game center ios 7 icon? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.
(CSS3 Animated) Game Center iOS 7 Icon - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>(CSS3 Animated) Game Center iOS 7 Icon</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ /*------------------------------------*\ $VARIABLES
\*------------------------------------*/
/*------------------------------------*\ $Box
\*------------------------------------*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
/*------------------------------------*\ $MIXINS
\*------------------------------------*/
/*------------------------------------*\ $REST
\*------------------------------------*/
body { font-size: 6px;
}
ul.gameCenter { position: absolute; left: 50%; top: 50%; height: 48em; width: 48em; margin-left: -24em; margin-top: -24em; border-radius: 11em; border: 2px solid #E0E0E0;
}
ul.gameCenter li { position: absolute; list-style: none;
}
ul.gameCenter li:nth-child(4n) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1D62F0), color-stop(100%, #1AD6FD)); background: -webkit-linear-gradient(top, #1D62F0 0%, #1AD6FD 100%); width: 30em; height: 30em; border-radius: 15em; top: 6em; left: 4em; overflow: hidden; z-index: 3;
}
ul.gameCenter li:nth-child(4n):before, ul.gameCenter li:nth-child(4n):after { content: ""; position: absolute;
}
ul.gameCenter li:nth-child(4n):before { top: 0; left: 14em; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4A9219), color-stop(100%, #6BB635)); background: -webkit-linear-gradient(top, #4A9219 0%, #6BB635 100%); width: 23em; height: 23em; border-radius: 11.5em;
}
ul.gameCenter li:nth-child(4n):after { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8447F6), color-stop(100%, #654DE6)); background: -webkit-linear-gradient(top, #8447F6 0%, #654DE6 100%); width: 15em; height: 15em; border-radius: 7.5em; top: 23em; left: 6em;
}
ul.gameCenter li:nth-child(4n+1) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFDB4C), color-stop(100%, #FFCD02)); background: -webkit-linear-gradient(top, #FFDB4C 0%, #FFCD02 100%); width: 23em; height: 23em; border-radius: 11.5em; top: 6em; left: 18em; z-index: 1;
}
ul.gameCenter li:nth-child(4n+2) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C644FC), color-stop(100%, #5856D6)); background: -webkit-linear-gradient(top, #C644FC 0%, #5856D6 100%); width: 15em; height: 15em; border-radius: 7.5em; top: 29em; left: 10em; z-index: 2;
}
ul.gameCenter li:nth-child(4n+3) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF5E3A), color-stop(100%, #FF2A68)); background: -webkit-linear-gradient(top, #FF5E3A 0%, #FF2A68 100%); width: 21em; height: 21em; border-radius: 10.5em; top: 21em; left: 21em; opacity: 0.95; z-index: 4;
}
/*------------------------------------*\ $ANIMATIONS
\*------------------------------------*/
li:nth-child(4n) { -webkit-animation: ballOne 15s infinite;
}
@-webkit-keyframes ballOne { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(0) translateY(2em); } 80% { -webkit-transform: translateX(5em) translateY(5em); }
}
li:nth-child(4n+1) { -webkit-animation: ballTwo 15s infinite;
}
@-webkit-keyframes ballTwo { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(-9em) translateY(-5em) scale(0.75); } 80% { -webkit-transform: translateX(5em) translateY(3em); }
}
li:nth-child(4n):before { -webkit-animation: ballBefore 15s infinite;
}
@-webkit-keyframes ballBefore { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(-9em) translateY(-7em) scale(0.75); } 80% { -webkit-transform: translateX(0) translateY(-2em); }
}
li:nth-child(4n+2) { -webkit-animation: ballThree 15s infinite;
}
@-webkit-keyframes ballThree { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(9em) translateY(-2em) scale(0.75); } 80% { -webkit-transform: translateX(-3em) translateY(-4em); }
}
li:nth-child(4n):after { -webkit-animation: ballAfter 15s infinite;
}
@-webkit-keyframes ballAfter { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(9em) translateY(-4em) scale(0.75); } 80% { -webkit-transform: translateX(-8em) translateY(-9em); }
}
li:nth-child(4n+3) { -webkit-animation: ballFour 15s infinite;
}
@-webkit-keyframes ballFour { 0% { -webkit-transform: rotate(0) translateX(0) translateY(0); -webkit-transform-origin: 0 0; } 40% { -webkit-transform-origin: 0 0; -webkit-transform: rotate(50deg) translateX(0) translateY(-20em) scale(0.8); } 80% { -webkit-transform-origin: 0 0; -webkit-transform: rotate(-90) translateX(-10em) translateY(0em); }
}
li:nth-child(4n):before,
li:nth-child(4n):after,
li:nth-child(4n),
li:nth-child(4n+1),
li:nth-child(4n+2),
li:nth-child(4n+3) { -webkit-transition-timing-function: linear;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="gameCenter"> <li></li> <li></li> <li></li> <li></li>
</ul> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
(CSS3 Animated) Game Center iOS 7 Icon - Script Codes CSS Codes
/*------------------------------------*\ $VARIABLES
\*------------------------------------*/
/*------------------------------------*\ $Box
\*------------------------------------*/
*, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; padding: 0; margin: 0;
}
/*------------------------------------*\ $MIXINS
\*------------------------------------*/
/*------------------------------------*\ $REST
\*------------------------------------*/
body { font-size: 6px;
}
ul.gameCenter { position: absolute; left: 50%; top: 50%; height: 48em; width: 48em; margin-left: -24em; margin-top: -24em; border-radius: 11em; border: 2px solid #E0E0E0;
}
ul.gameCenter li { position: absolute; list-style: none;
}
ul.gameCenter li:nth-child(4n) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #1D62F0), color-stop(100%, #1AD6FD)); background: -webkit-linear-gradient(top, #1D62F0 0%, #1AD6FD 100%); width: 30em; height: 30em; border-radius: 15em; top: 6em; left: 4em; overflow: hidden; z-index: 3;
}
ul.gameCenter li:nth-child(4n):before, ul.gameCenter li:nth-child(4n):after { content: ""; position: absolute;
}
ul.gameCenter li:nth-child(4n):before { top: 0; left: 14em; background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #4A9219), color-stop(100%, #6BB635)); background: -webkit-linear-gradient(top, #4A9219 0%, #6BB635 100%); width: 23em; height: 23em; border-radius: 11.5em;
}
ul.gameCenter li:nth-child(4n):after { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #8447F6), color-stop(100%, #654DE6)); background: -webkit-linear-gradient(top, #8447F6 0%, #654DE6 100%); width: 15em; height: 15em; border-radius: 7.5em; top: 23em; left: 6em;
}
ul.gameCenter li:nth-child(4n+1) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FFDB4C), color-stop(100%, #FFCD02)); background: -webkit-linear-gradient(top, #FFDB4C 0%, #FFCD02 100%); width: 23em; height: 23em; border-radius: 11.5em; top: 6em; left: 18em; z-index: 1;
}
ul.gameCenter li:nth-child(4n+2) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #C644FC), color-stop(100%, #5856D6)); background: -webkit-linear-gradient(top, #C644FC 0%, #5856D6 100%); width: 15em; height: 15em; border-radius: 7.5em; top: 29em; left: 10em; z-index: 2;
}
ul.gameCenter li:nth-child(4n+3) { background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FF5E3A), color-stop(100%, #FF2A68)); background: -webkit-linear-gradient(top, #FF5E3A 0%, #FF2A68 100%); width: 21em; height: 21em; border-radius: 10.5em; top: 21em; left: 21em; opacity: 0.95; z-index: 4;
}
/*------------------------------------*\ $ANIMATIONS
\*------------------------------------*/
li:nth-child(4n) { -webkit-animation: ballOne 15s infinite;
}
@-webkit-keyframes ballOne { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(0) translateY(2em); } 80% { -webkit-transform: translateX(5em) translateY(5em); }
}
li:nth-child(4n+1) { -webkit-animation: ballTwo 15s infinite;
}
@-webkit-keyframes ballTwo { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(-9em) translateY(-5em) scale(0.75); } 80% { -webkit-transform: translateX(5em) translateY(3em); }
}
li:nth-child(4n):before { -webkit-animation: ballBefore 15s infinite;
}
@-webkit-keyframes ballBefore { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(-9em) translateY(-7em) scale(0.75); } 80% { -webkit-transform: translateX(0) translateY(-2em); }
}
li:nth-child(4n+2) { -webkit-animation: ballThree 15s infinite;
}
@-webkit-keyframes ballThree { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(9em) translateY(-2em) scale(0.75); } 80% { -webkit-transform: translateX(-3em) translateY(-4em); }
}
li:nth-child(4n):after { -webkit-animation: ballAfter 15s infinite;
}
@-webkit-keyframes ballAfter { 0% { -webkit-transform: translateX(0) translateY(0); } 40% { -webkit-transform: translateX(9em) translateY(-4em) scale(0.75); } 80% { -webkit-transform: translateX(-8em) translateY(-9em); }
}
li:nth-child(4n+3) { -webkit-animation: ballFour 15s infinite;
}
@-webkit-keyframes ballFour { 0% { -webkit-transform: rotate(0) translateX(0) translateY(0); -webkit-transform-origin: 0 0; } 40% { -webkit-transform-origin: 0 0; -webkit-transform: rotate(50deg) translateX(0) translateY(-20em) scale(0.8); } 80% { -webkit-transform-origin: 0 0; -webkit-transform: rotate(-90) translateX(-10em) translateY(0em); }
}
li:nth-child(4n):before,
li:nth-child(4n):after,
li:nth-child(4n),
li:nth-child(4n+1),
li:nth-child(4n+2),
li:nth-child(4n+3) { -webkit-transition-timing-function: linear;
}
(CSS3 Animated) Game Center iOS 7 Icon - Script Codes JS Codes
/***
(CSS3 Animated) Game Center iOS 7 Icon
Front-End: Rıza Selçuk Saydam http:/webmagazin.co
Download .sketch Design File: http://bit.ly/GameCenterSketch
Design: Louie Mantia http://drbl.in/iQYz
Inspiration http://youtu.be/cO3rsfE7GM0
***/
Developer | Rıza Selçuk Saydam |
Username | rss |
Uploaded | August 02, 2022 |
Rating | 4 |
Size | 5,127 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Star Wars Toggle Icon Animation | 3,180 Kb |
Button Switch | 5,239 Kb |
SOCIAL BANG | 8,251 Kb |
Flutterby | 3,799 Kb |
Contact Page CSS3 Transation | 6,686 Kb |
Loader Animation | 2,761 Kb |
How a Text Gradient is Made | 4,908 Kb |
Pokemon Icon | 2,655 Kb |
Sticky footer - adjustPusher | 2,127 Kb |
CSS3 Loader Animation - Peeek | 3,854 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
3D-box | Parthviroja | 2,346 Kb |
Font stack | Adrianjacob | 1,868 Kb |
Chuck Norris Background | Manz | 1,967 Kb |
Rotate Demo | Agelber | 3,061 Kb |
JQuery Validate checkbox group | Lunaman | 2,466 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Css3 slide | Nakome | 3,190 Kb |
Basecamp 3 Document | Lachlanjc | 3,811 Kb |
Portfolio Page | HuffmanJ25 | 5,240 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!