(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 Previews
(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 |
Do you need developer help for (CSS3 Animated) Game Center iOS 7 Icon?
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!
Rıza Selçuk Saydam (rss) Script Codes
| Name | Size |
| SOCIAL BANG | 8,251 Kb |
| Pigecon | 3,730 Kb |
| Flat iOS 7 Safari Icon | 3,332 Kb |
| Sticky footer - adjustPusher | 2,127 Kb |
| Little Boxes on an iPhone | 4,036 Kb |
| Star Wars Toggle Icon Animation | 3,180 Kb |
| Loader Animation | 2,761 Kb |
| Animated Flat Camera Icon | 3,843 Kb |
| Button Switch | 5,239 Kb |
| Flutterby | 3,799 Kb |
Create amazing video scripts with AI!
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!
Similar Scripts & Codes
| Name | Username | Size |
| Twinkling Stars | Ripley6811 | 2,750 Kb |
| CSS Grid Overlay | Cliffpyles | 3,090 Kb |
| Angular Route | Arun_v606 | 1,837 Kb |
| Responsive Boxes without Images | Andymcfee | 4,120 Kb |
| A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
| Save for later... | Victorfreire | 1,359 Kb |
| Custom Select Element | Agrayson | 3,616 Kb |
| CSS Link Icons with jQuery Titles | Nicwinn | 2,312 Kb |
| Fellowship of the Ring | Aussieyang | 2,639 Kb |
| Expert Help | SinceSidSlid | 4,064 Kb |
Do you want hide your ip address?
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!