Little Boxes on an iPhone

Developer
Rıza Selçuk Saydam
Size
4,036 Kb
Views
54,648
  1. Little Boxes on an iPhone Previews
  2. Little Boxes on an iPhone HTML Codes
  3. Little Boxes on an iPhone CSS Codes
  4. Little Boxes on an iPhone JS Codes

How do I make an little boxes on an iphone?

(CSS3 Animated) Little Boxes on an iPhone. What is a little boxes on an iphone? How do you make a little boxes on an iphone? This script and codes were developed by Rıza Selçuk Saydam on 02 August 2022, Tuesday.

Little Boxes on an iPhone Previews
IQ Test

Little Boxes on an iPhone - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Little Boxes on an iPhone</title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <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; background-color: #31bde4; overflow: hidden;
}
span.iphone { position: absolute; left: 50%; top: 50%; height: 50em; width: 24em; margin-left: -12em; margin-top: -25em; background-size: 24em 50em; background-image: url("http://beta.rss-ems.com/download/iphone.png"); background-repeat: no-repeat;
}
ul.boxes li { width: 10em; height: 10em; display: inline-block; border-radius: 0.5em; list-style: none; position: absolute; top: 100%; left: 50%; margin-left: -35em; -webkit-animation: littleBoxes 3s infinite; -webkit-box-shadow: -1px 1px 0 1px rgba(0, 0, 0, 0.1);
}
ul li:nth-child(4n+1) { background: #fc6956; -webkit-animation-delay: 0.75s;
}
ul li:nth-child(4n+2) { background: #8f7cd2; -webkit-animation-delay: 1.5s;
}
ul li:nth-child(4n+3) { background: #ffee37; -webkit-animation-delay: 2.25s;
}
ul li:nth-child(4n+4) { background: #00e2a8; -webkit-animation-delay: 3s;
}
/*------------------------------------*\ $ANIMATIONS
\*------------------------------------*/
@-webkit-keyframes littleBoxes { 25% { width: 10em; height: 10em; top: 50%; left: 50%; margin: -5em 0 0 -35em; -webkit-transform: rotate(-90deg); border-radius: 0.5em; } 50% { -webkit-transform: rotate(-180deg); top: 50%; left: 50%; width: 20em; height: 35em; margin: -17.5em 0 0 -10em; border-radius: 0em; } 75% { width: 10em; height: 10em; top: 50%; left: 50%; margin: -5em 0 0 25em; -webkit-transform: rotate(-270deg); border-radius: 0.5em; } 100% { top: 100%; left: 50%; margin-left: 25em; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <ul class="boxes">	<li>	<li>	<li>	<li>
</ul>
<span class="iphone"> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Little Boxes on an iPhone - 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; background-color: #31bde4; overflow: hidden;
}
span.iphone { position: absolute; left: 50%; top: 50%; height: 50em; width: 24em; margin-left: -12em; margin-top: -25em; background-size: 24em 50em; background-image: url("http://beta.rss-ems.com/download/iphone.png"); background-repeat: no-repeat;
}
ul.boxes li { width: 10em; height: 10em; display: inline-block; border-radius: 0.5em; list-style: none; position: absolute; top: 100%; left: 50%; margin-left: -35em; -webkit-animation: littleBoxes 3s infinite; -webkit-box-shadow: -1px 1px 0 1px rgba(0, 0, 0, 0.1);
}
ul li:nth-child(4n+1) { background: #fc6956; -webkit-animation-delay: 0.75s;
}
ul li:nth-child(4n+2) { background: #8f7cd2; -webkit-animation-delay: 1.5s;
}
ul li:nth-child(4n+3) { background: #ffee37; -webkit-animation-delay: 2.25s;
}
ul li:nth-child(4n+4) { background: #00e2a8; -webkit-animation-delay: 3s;
}
/*------------------------------------*\ $ANIMATIONS
\*------------------------------------*/
@-webkit-keyframes littleBoxes { 25% { width: 10em; height: 10em; top: 50%; left: 50%; margin: -5em 0 0 -35em; -webkit-transform: rotate(-90deg); border-radius: 0.5em; } 50% { -webkit-transform: rotate(-180deg); top: 50%; left: 50%; width: 20em; height: 35em; margin: -17.5em 0 0 -10em; border-radius: 0em; } 75% { width: 10em; height: 10em; top: 50%; left: 50%; margin: -5em 0 0 25em; -webkit-transform: rotate(-270deg); border-radius: 0.5em; } 100% { top: 100%; left: 50%; margin-left: 25em; }
}

Little Boxes on an iPhone - Script Codes JS Codes

/***
(CSS3 Animated) Little Boxes on an iPhone
Front-End: Rıza Selçuk Saydam http:/webmagazin.co
Design: Tyler Howarth http://drbl.in/hLfe
***/
Little Boxes on an iPhone - Script Codes
Little Boxes on an iPhone - Script Codes
Home Page Home
Developer Rıza Selçuk Saydam
Username rss
Uploaded August 02, 2022
Rating 4.5
Size 4,036 Kb
Views 54,648
Do you need developer help for Little Boxes on an iPhone?

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
CSS3 Loader Animation - Peeek
Pigecon
Button Switch
How a Text Gradient is Made
Loader Animation
METU CSS3 Logo
SOCIAL BANG
Sticky footer - adjustPusher
Pokemon Icon
Flat iOS 7 Safari Icon
Create amazing marketing copy 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!