Appletv

Developer

Size

6,368 Kb

Views

24,288

Appletv Previews
Appletv HTML Codes
Appletv CSS Codes
Appletv JS Codes

How do I make an appletv?

...another useless css3 demo. What is a appletv? How do you make a appletv? This script and codes were developed by Gianluca Guarini on 04 November 2022, Friday.

Appletv Previews

Appletv - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Appletv</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <ul>
<li><img src="http://lorempixel.com/260/150/?1" /></li>	<li><img src="http://lorempixel.com/260/150/?2" /></li>	<li><img src="http://lorempixel.com/260/150/?3" /></li>	<li><img src="http://lorempixel.com/260/150/?4" /></li>	<li><img src="http://lorempixel.com/260/150/?5" /></li>	<li><img src="http://lorempixel.com/260/150/?6" /></li>	<li><img src="http://lorempixel.com/260/150/?7" /></li>	<li><img src="http://lorempixel.com/260/150/?8" /></li>	<li><img src="http://lorempixel.com/260/150/?9" /></li>	<li><img src="http://lorempixel.com/260/150/?10" /></li>	<li><img src="http://lorempixel.com/260/150/?11" /></li>	<li><img src="http://lorempixel.com/260/150/?12" /></li>	<li><img src="http://lorempixel.com/260/150/?13" /></li>	<li><img src="http://lorempixel.com/260/150/?14" /></li>	<li><img src="http://lorempixel.com/260/150/?15" /></li>	<li><img src="http://lorempixel.com/260/150/?16" /></li>	<li><img src="http://lorempixel.com/260/150/?17" /></li>	<li><img src="http://lorempixel.com/260/150/?18" /></li>	<li><img src="http://lorempixel.com/260/150/?19" /></li>	<li><img src="http://lorempixel.com/260/150/?20" /></li>	<li><img src="http://lorempixel.com/260/150/?21" /></li>	<li><img src="http://lorempixel.com/260/150/?22" /></li>	<li><img src="http://lorempixel.com/260/150/?23" /></li>	<li><img src="http://lorempixel.com/260/150/?1" /></li>	<li><img src="http://lorempixel.com/260/150/?2" /></li>	<li><img src="http://lorempixel.com/260/150/?3" /></li>	<li><img src="http://lorempixel.com/260/150/?4" /></li>	<li><img src="http://lorempixel.com/260/150/?5" /></li>	<li><img src="http://lorempixel.com/260/150/?6" /></li>	<li><img src="http://lorempixel.com/260/150/?7" /></li>	<li><img src="http://lorempixel.com/260/150/?8" /></li>	<li><img src="http://lorempixel.com/260/150/?9" /></li>	<li><img src="http://lorempixel.com/260/150/?10" /></li>	<li><img src="http://lorempixel.com/260/150/?11" /></li>	<li><img src="http://lorempixel.com/260/150/?12" /></li>	<li><img src="http://lorempixel.com/260/150/?13" /></li>	<li><img src="http://lorempixel.com/260/150/?14" /></li>	<li><img src="http://lorempixel.com/260/150/?15" /></li>	<li><img src="http://lorempixel.com/260/150/?16" /></li>	<li><img src="http://lorempixel.com/260/150/?17" /></li>	<li><img src="http://lorempixel.com/260/150/?18" /></li>	<li><img src="http://lorempixel.com/260/150/?19" /></li>	<li><img src="http://lorempixel.com/260/150/?20" /></li>	<li><img src="http://lorempixel.com/260/150/?21" /></li>	<li><img src="http://lorempixel.com/260/150/?22" /></li>	<li><img src="http://lorempixel.com/260/150/?23" /></li>	<li><img src="http://lorempixel.com/260/150/?20" /></li>	<li><img src="http://lorempixel.com/260/150/?21" /></li>	<li><img src="http://lorempixel.com/260/150/?22" /></li>
</ul> <script src="js/index.js"></script>
</body>
</html>

Appletv - Script Codes CSS Codes

body, html { background: black; overflow: hidden; width: 100%; height: 100%; position: relative;
}
ul { margin: 0 10%; padding: 0; list-style: none; position: absolute; display: block; height: 100%; width: 80%; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: rotate 25s ease-in-out infinite alternate; -moz-animation: rotate 25s ease-in-out infinite alternate; -ms-animation: rotate 25s ease-in-out infinite alternate; -o-animation: rotate 25s ease-in-out infinite alternate; animation: rotate 25s ease-in-out infinite alternate;
}
li { position: absolute; display: block; width: 260px; height: 150px;
}
li img { position: absolute; top: 0; left: 0; display: block; -webkit-box-shadow: 0 0 10px black; -moz-box-shadow: 0 0 10px black; box-shadow: 0 0 10px black;
}
ul li:nth-child(1) { top: 1114px; left: -1481px; -webkit-transform: translate3d(0, 0, 150px); -moz-transform: translate3d(0, 0, 150px); -ms-transform: translate3d(0, 0, 150px); -o-transform: translate3d(0, 0, 150px); transform: translate3d(0, 0, 150px); -webkit-animation: flux 115s linear infinite alternate; -moz-animation: flux 115s linear infinite alternate; -ms-animation: flux 115s linear infinite alternate; -o-animation: flux 115s linear infinite alternate; animation: flux 115s linear infinite alternate;
}
ul li:nth-child(2) { top: 1384px; left: -437px; -webkit-transform: translate3d(0, 0, 990px); -moz-transform: translate3d(0, 0, 990px); -ms-transform: translate3d(0, 0, 990px); -o-transform: translate3d(0, 0, 990px); transform: translate3d(0, 0, 990px); -webkit-animation: flux 40s linear infinite alternate; -moz-animation: flux 40s linear infinite alternate; -ms-animation: flux 40s linear infinite alternate; -o-animation: flux 40s linear infinite alternate; animation: flux 40s linear infinite alternate;
}
ul li:nth-child(3) { top: -538px; left: -36px; -webkit-transform: translate3d(0, 0, 460px); -moz-transform: translate3d(0, 0, 460px); -ms-transform: translate3d(0, 0, 460px); -o-transform: translate3d(0, 0, 460px); transform: translate3d(0, 0, 460px); -webkit-animation: flux 85s linear infinite alternate; -moz-animation: flux 85s linear infinite alternate; -ms-animation: flux 85s linear infinite alternate; -o-animation: flux 85s linear infinite alternate; animation: flux 85s linear infinite alternate;
}
ul li:nth-child(4) { top: 719px; left: 290px; -webkit-transform: translate3d(0, 0, 30px); -moz-transform: translate3d(0, 0, 30px); -ms-transform: translate3d(0, 0, 30px); -o-transform: translate3d(0, 0, 30px); transform: translate3d(0, 0, 30px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(5) { top: -514px; left: 634px; -webkit-transform: translate3d(0, 0, 820px); -moz-transform: translate3d(0, 0, 820px); -ms-transform: translate3d(0, 0, 820px); -o-transform: translate3d(0, 0, 820px); transform: translate3d(0, 0, 820px); -webkit-animation: flux 160s linear infinite alternate; -moz-animation: flux 160s linear infinite alternate; -ms-animation: flux 160s linear infinite alternate; -o-animation: flux 160s linear infinite alternate; animation: flux 160s linear infinite alternate;
}
ul li:nth-child(6) { top: 1343px; left: 1332px; -webkit-transform: translate3d(0, 0, 150px); -moz-transform: translate3d(0, 0, 150px); -ms-transform: translate3d(0, 0, 150px); -o-transform: translate3d(0, 0, 150px); transform: translate3d(0, 0, 150px); -webkit-animation: flux 85s linear infinite alternate; -moz-animation: flux 85s linear infinite alternate; -ms-animation: flux 85s linear infinite alternate; -o-animation: flux 85s linear infinite alternate; animation: flux 85s linear infinite alternate;
}
ul li:nth-child(7) { top: 52px; left: -751px; -webkit-transform: translate3d(0, 0, 660px); -moz-transform: translate3d(0, 0, 660px); -ms-transform: translate3d(0, 0, 660px); -o-transform: translate3d(0, 0, 660px); transform: translate3d(0, 0, 660px); -webkit-animation: flux 130s linear infinite alternate; -moz-animation: flux 130s linear infinite alternate; -ms-animation: flux 130s linear infinite alternate; -o-animation: flux 130s linear infinite alternate; animation: flux 130s linear infinite alternate;
}
ul li:nth-child(8) { top: 1475px; left: 1096px; -webkit-transform: translate3d(0, 0, 100px); -moz-transform: translate3d(0, 0, 100px); -ms-transform: translate3d(0, 0, 100px); -o-transform: translate3d(0, 0, 100px); transform: translate3d(0, 0, 100px); -webkit-animation: flux 40s linear infinite alternate; -moz-animation: flux 40s linear infinite alternate; -ms-animation: flux 40s linear infinite alternate; -o-animation: flux 40s linear infinite alternate; animation: flux 40s linear infinite alternate;
}
ul li:nth-child(9) { top: -1340px; left: -990px; -webkit-transform: translate3d(0, 0, 520px); -moz-transform: translate3d(0, 0, 520px); -ms-transform: translate3d(0, 0, 520px); -o-transform: translate3d(0, 0, 520px); transform: translate3d(0, 0, 520px); -webkit-animation: flux 115s linear infinite alternate; -moz-animation: flux 115s linear infinite alternate; -ms-animation: flux 115s linear infinite alternate; -o-animation: flux 115s linear infinite alternate; animation: flux 115s linear infinite alternate;
}
ul li:nth-child(10) { top: 1314px; left: 702px; -webkit-transform: translate3d(0, 0, 780px); -moz-transform: translate3d(0, 0, 780px); -ms-transform: translate3d(0, 0, 780px); -o-transform: translate3d(0, 0, 780px); transform: translate3d(0, 0, 780px); -webkit-animation: flux 130s linear infinite alternate; -moz-animation: flux 130s linear infinite alternate; -ms-animation: flux 130s linear infinite alternate; -o-animation: flux 130s linear infinite alternate; animation: flux 130s linear infinite alternate;
}
ul li:nth-child(11) { top: 579px; left: -1268px; -webkit-transform: translate3d(0, 0, 390px); -moz-transform: translate3d(0, 0, 390px); -ms-transform: translate3d(0, 0, 390px); -o-transform: translate3d(0, 0, 390px); transform: translate3d(0, 0, 390px); -webkit-animation: flux 115s linear infinite alternate; -moz-animation: flux 115s linear infinite alternate; -ms-animation: flux 115s linear infinite alternate; -o-animation: flux 115s linear infinite alternate; animation: flux 115s linear infinite alternate;
}
ul li:nth-child(12) { top: -441px; left: 1409px; -webkit-transform: translate3d(0, 0, 920px); -moz-transform: translate3d(0, 0, 920px); -ms-transform: translate3d(0, 0, 920px); -o-transform: translate3d(0, 0, 920px); transform: translate3d(0, 0, 920px); -webkit-animation: flux 85s linear infinite alternate; -moz-animation: flux 85s linear infinite alternate; -ms-animation: flux 85s linear infinite alternate; -o-animation: flux 85s linear infinite alternate; animation: flux 85s linear infinite alternate;
}
ul li:nth-child(13) { top: 165px; left: -679px; -webkit-transform: translate3d(0, 0, 330px); -moz-transform: translate3d(0, 0, 330px); -ms-transform: translate3d(0, 0, 330px); -o-transform: translate3d(0, 0, 330px); transform: translate3d(0, 0, 330px); -webkit-animation: flux 85s linear infinite alternate; -moz-animation: flux 85s linear infinite alternate; -ms-animation: flux 85s linear infinite alternate; -o-animation: flux 85s linear infinite alternate; animation: flux 85s linear infinite alternate;
}
ul li:nth-child(14) { top: 140px; left: -757px; -webkit-transform: translate3d(0, 0, 610px); -moz-transform: translate3d(0, 0, 610px); -ms-transform: translate3d(0, 0, 610px); -o-transform: translate3d(0, 0, 610px); transform: translate3d(0, 0, 610px); -webkit-animation: flux 130s linear infinite alternate; -moz-animation: flux 130s linear infinite alternate; -ms-animation: flux 130s linear infinite alternate; -o-animation: flux 130s linear infinite alternate; animation: flux 130s linear infinite alternate;
}
ul li:nth-child(15) { top: 179px; left: -63px; -webkit-transform: translate3d(0, 0, 290px); -moz-transform: translate3d(0, 0, 290px); -ms-transform: translate3d(0, 0, 290px); -o-transform: translate3d(0, 0, 290px); transform: translate3d(0, 0, 290px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(16) { top: 762px; left: -1490px; -webkit-transform: translate3d(0, 0, 110px); -moz-transform: translate3d(0, 0, 110px); -ms-transform: translate3d(0, 0, 110px); -o-transform: translate3d(0, 0, 110px); transform: translate3d(0, 0, 110px); -webkit-animation: flux 100s linear infinite alternate; -moz-animation: flux 100s linear infinite alternate; -ms-animation: flux 100s linear infinite alternate; -o-animation: flux 100s linear infinite alternate; animation: flux 100s linear infinite alternate;
}
ul li:nth-child(17) { top: -1011px; left: 1066px; -webkit-transform: translate3d(0, 0, 650px); -moz-transform: translate3d(0, 0, 650px); -ms-transform: translate3d(0, 0, 650px); -o-transform: translate3d(0, 0, 650px); transform: translate3d(0, 0, 650px); -webkit-animation: flux 145s linear infinite alternate; -moz-animation: flux 145s linear infinite alternate; -ms-animation: flux 145s linear infinite alternate; -o-animation: flux 145s linear infinite alternate; animation: flux 145s linear infinite alternate;
}
ul li:nth-child(18) { top: -652px; left: -587px; -webkit-transform: translate3d(0, 0, 220px); -moz-transform: translate3d(0, 0, 220px); -ms-transform: translate3d(0, 0, 220px); -o-transform: translate3d(0, 0, 220px); transform: translate3d(0, 0, 220px); -webkit-animation: flux 160s linear infinite alternate; -moz-animation: flux 160s linear infinite alternate; -ms-animation: flux 160s linear infinite alternate; -o-animation: flux 160s linear infinite alternate; animation: flux 160s linear infinite alternate;
}
ul li:nth-child(19) { top: -705px; left: 70px; -webkit-transform: translate3d(0, 0, 130px); -moz-transform: translate3d(0, 0, 130px); -ms-transform: translate3d(0, 0, 130px); -o-transform: translate3d(0, 0, 130px); transform: translate3d(0, 0, 130px); -webkit-animation: flux 160s linear infinite alternate; -moz-animation: flux 160s linear infinite alternate; -ms-animation: flux 160s linear infinite alternate; -o-animation: flux 160s linear infinite alternate; animation: flux 160s linear infinite alternate;
}
ul li:nth-child(20) { top: -905px; left: 656px; -webkit-transform: translate3d(0, 0, 320px); -moz-transform: translate3d(0, 0, 320px); -ms-transform: translate3d(0, 0, 320px); -o-transform: translate3d(0, 0, 320px); transform: translate3d(0, 0, 320px); -webkit-animation: flux 100s linear infinite alternate; -moz-animation: flux 100s linear infinite alternate; -ms-animation: flux 100s linear infinite alternate; -o-animation: flux 100s linear infinite alternate; animation: flux 100s linear infinite alternate;
}
ul li:nth-child(21) { top: -1022px; left: 780px; -webkit-transform: translate3d(0, 0, 900px); -moz-transform: translate3d(0, 0, 900px); -ms-transform: translate3d(0, 0, 900px); -o-transform: translate3d(0, 0, 900px); transform: translate3d(0, 0, 900px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(22) { top: -1433px; left: -1089px; -webkit-transform: translate3d(0, 0, 800px); -moz-transform: translate3d(0, 0, 800px); -ms-transform: translate3d(0, 0, 800px); -o-transform: translate3d(0, 0, 800px); transform: translate3d(0, 0, 800px); -webkit-animation: flux 55s linear infinite alternate; -moz-animation: flux 55s linear infinite alternate; -ms-animation: flux 55s linear infinite alternate; -o-animation: flux 55s linear infinite alternate; animation: flux 55s linear infinite alternate;
}
ul li:nth-child(23) { top: -276px; left: -960px; -webkit-transform: translate3d(0, 0, 940px); -moz-transform: translate3d(0, 0, 940px); -ms-transform: translate3d(0, 0, 940px); -o-transform: translate3d(0, 0, 940px); transform: translate3d(0, 0, 940px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(24) { top: 202px; left: -830px; -webkit-transform: translate3d(0, 0, 960px); -moz-transform: translate3d(0, 0, 960px); -ms-transform: translate3d(0, 0, 960px); -o-transform: translate3d(0, 0, 960px); transform: translate3d(0, 0, 960px); -webkit-animation: flux 55s linear infinite alternate; -moz-animation: flux 55s linear infinite alternate; -ms-animation: flux 55s linear infinite alternate; -o-animation: flux 55s linear infinite alternate; animation: flux 55s linear infinite alternate;
}
ul li:nth-child(25) { top: 1102px; left: 544px; -webkit-transform: translate3d(0, 0, 420px); -moz-transform: translate3d(0, 0, 420px); -ms-transform: translate3d(0, 0, 420px); -o-transform: translate3d(0, 0, 420px); transform: translate3d(0, 0, 420px); -webkit-animation: flux 55s linear infinite alternate; -moz-animation: flux 55s linear infinite alternate; -ms-animation: flux 55s linear infinite alternate; -o-animation: flux 55s linear infinite alternate; animation: flux 55s linear infinite alternate;
}
ul li:nth-child(26) { top: -618px; left: -1161px; -webkit-transform: translate3d(0, 0, 240px); -moz-transform: translate3d(0, 0, 240px); -ms-transform: translate3d(0, 0, 240px); -o-transform: translate3d(0, 0, 240px); transform: translate3d(0, 0, 240px); -webkit-animation: flux 55s linear infinite alternate; -moz-animation: flux 55s linear infinite alternate; -ms-animation: flux 55s linear infinite alternate; -o-animation: flux 55s linear infinite alternate; animation: flux 55s linear infinite alternate;
}
ul li:nth-child(27) { top: -1058px; left: 133px; -webkit-transform: translate3d(0, 0, 970px); -moz-transform: translate3d(0, 0, 970px); -ms-transform: translate3d(0, 0, 970px); -o-transform: translate3d(0, 0, 970px); transform: translate3d(0, 0, 970px); -webkit-animation: flux 160s linear infinite alternate; -moz-animation: flux 160s linear infinite alternate; -ms-animation: flux 160s linear infinite alternate; -o-animation: flux 160s linear infinite alternate; animation: flux 160s linear infinite alternate;
}
ul li:nth-child(28) { top: -313px; left: 528px; -webkit-transform: translate3d(0, 0, 530px); -moz-transform: translate3d(0, 0, 530px); -ms-transform: translate3d(0, 0, 530px); -o-transform: translate3d(0, 0, 530px); transform: translate3d(0, 0, 530px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(29) { top: -236px; left: 885px; -webkit-transform: translate3d(0, 0, 520px); -moz-transform: translate3d(0, 0, 520px); -ms-transform: translate3d(0, 0, 520px); -o-transform: translate3d(0, 0, 520px); transform: translate3d(0, 0, 520px); -webkit-animation: flux 130s linear infinite alternate; -moz-animation: flux 130s linear infinite alternate; -ms-animation: flux 130s linear infinite alternate; -o-animation: flux 130s linear infinite alternate; animation: flux 130s linear infinite alternate;
}
ul li:nth-child(30) { top: -1015px; left: 176px; -webkit-transform: translate3d(0, 0, 700px); -moz-transform: translate3d(0, 0, 700px); -ms-transform: translate3d(0, 0, 700px); -o-transform: translate3d(0, 0, 700px); transform: translate3d(0, 0, 700px); -webkit-animation: flux 145s linear infinite alternate; -moz-animation: flux 145s linear infinite alternate; -ms-animation: flux 145s linear infinite alternate; -o-animation: flux 145s linear infinite alternate; animation: flux 145s linear infinite alternate;
}
ul li:nth-child(31) { top: -123px; left: -656px; -webkit-transform: translate3d(0, 0, 520px); -moz-transform: translate3d(0, 0, 520px); -ms-transform: translate3d(0, 0, 520px); -o-transform: translate3d(0, 0, 520px); transform: translate3d(0, 0, 520px); -webkit-animation: flux 70s linear infinite alternate; -moz-animation: flux 70s linear infinite alternate; -ms-animation: flux 70s linear infinite alternate; -o-animation: flux 70s linear infinite alternate; animation: flux 70s linear infinite alternate;
}
ul li:nth-child(32) { top: 56px; left: 172px; -webkit-transform: translate3d(0, 0, 50px); -moz-transform: translate3d(0, 0, 50px); -ms-transform: translate3d(0, 0, 50px); -o-transform: translate3d(0, 0, 50px); transform: translate3d(0, 0, 50px); -webkit-animation: flux 130s linear infinite alternate; -moz-animation: flux 130s linear infinite alternate; -ms-animation: flux 130s linear infinite alternate; -o-animation: flux 130s linear infinite alternate; animation: flux 130s linear infinite alternate;
}
ul li:nth-child(33) { top: 75px; left: -1249px; -webkit-transform: translate3d(0, 0, 520px); -moz-transform: translate3d(0, 0, 520px); -ms-transform: translate3d(0, 0, 520px); -o-transform: translate3d(0, 0, 520px); transform: translate3d(0, 0, 520px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(34) { top: -732px; left: 1464px; -webkit-transform: translate3d(0, 0, 410px); -moz-transform: translate3d(0, 0, 410px); -ms-transform: translate3d(0, 0, 410px); -o-transform: translate3d(0, 0, 410px); transform: translate3d(0, 0, 410px); -webkit-animation: flux 85s linear infinite alternate; -moz-animation: flux 85s linear infinite alternate; -ms-animation: flux 85s linear infinite alternate; -o-animation: flux 85s linear infinite alternate; animation: flux 85s linear infinite alternate;
}
ul li:nth-child(35) { top: -962px; left: 200px; -webkit-transform: translate3d(0, 0, 650px); -moz-transform: translate3d(0, 0, 650px); -ms-transform: translate3d(0, 0, 650px); -o-transform: translate3d(0, 0, 650px); transform: translate3d(0, 0, 650px); -webkit-animation: flux 100s linear infinite alternate; -moz-animation: flux 100s linear infinite alternate; -ms-animation: flux 100s linear infinite alternate; -o-animation: flux 100s linear infinite alternate; animation: flux 100s linear infinite alternate;
}
ul li:nth-child(36) { top: 31px; left: 811px; -webkit-transform: translate3d(0, 0, 820px); -moz-transform: translate3d(0, 0, 820px); -ms-transform: translate3d(0, 0, 820px); -o-transform: translate3d(0, 0, 820px); transform: translate3d(0, 0, 820px); -webkit-animation: flux 130s linear infinite alternate; -moz-animation: flux 130s linear infinite alternate; -ms-animation: flux 130s linear infinite alternate; -o-animation: flux 130s linear infinite alternate; animation: flux 130s linear infinite alternate;
}
ul li:nth-child(37) { top: -568px; left: 394px; -webkit-transform: translate3d(0, 0, 890px); -moz-transform: translate3d(0, 0, 890px); -ms-transform: translate3d(0, 0, 890px); -o-transform: translate3d(0, 0, 890px); transform: translate3d(0, 0, 890px); -webkit-animation: flux 160s linear infinite alternate; -moz-animation: flux 160s linear infinite alternate; -ms-animation: flux 160s linear infinite alternate; -o-animation: flux 160s linear infinite alternate; animation: flux 160s linear infinite alternate;
}
ul li:nth-child(38) { top: 1450px; left: -24px; -webkit-transform: translate3d(0, 0, 610px); -moz-transform: translate3d(0, 0, 610px); -ms-transform: translate3d(0, 0, 610px); -o-transform: translate3d(0, 0, 610px); transform: translate3d(0, 0, 610px); -webkit-animation: flux 130s linear infinite alternate; -moz-animation: flux 130s linear infinite alternate; -ms-animation: flux 130s linear infinite alternate; -o-animation: flux 130s linear infinite alternate; animation: flux 130s linear infinite alternate;
}
ul li:nth-child(39) { top: -556px; left: -572px; -webkit-transform: translate3d(0, 0, 230px); -moz-transform: translate3d(0, 0, 230px); -ms-transform: translate3d(0, 0, 230px); -o-transform: translate3d(0, 0, 230px); transform: translate3d(0, 0, 230px); -webkit-animation: flux 145s linear infinite alternate; -moz-animation: flux 145s linear infinite alternate; -ms-animation: flux 145s linear infinite alternate; -o-animation: flux 145s linear infinite alternate; animation: flux 145s linear infinite alternate;
}
ul li:nth-child(40) { top: -597px; left: 902px; -webkit-transform: translate3d(0, 0, 620px); -moz-transform: translate3d(0, 0, 620px); -ms-transform: translate3d(0, 0, 620px); -o-transform: translate3d(0, 0, 620px); transform: translate3d(0, 0, 620px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(41) { top: -1092px; left: -1161px; -webkit-transform: translate3d(0, 0, 530px); -moz-transform: translate3d(0, 0, 530px); -ms-transform: translate3d(0, 0, 530px); -o-transform: translate3d(0, 0, 530px); transform: translate3d(0, 0, 530px); -webkit-animation: flux 40s linear infinite alternate; -moz-animation: flux 40s linear infinite alternate; -ms-animation: flux 40s linear infinite alternate; -o-animation: flux 40s linear infinite alternate; animation: flux 40s linear infinite alternate;
}
ul li:nth-child(42) { top: -508px; left: -1298px; -webkit-transform: translate3d(0, 0, 510px); -moz-transform: translate3d(0, 0, 510px); -ms-transform: translate3d(0, 0, 510px); -o-transform: translate3d(0, 0, 510px); transform: translate3d(0, 0, 510px); -webkit-animation: flux 160s linear infinite alternate; -moz-animation: flux 160s linear infinite alternate; -ms-animation: flux 160s linear infinite alternate; -o-animation: flux 160s linear infinite alternate; animation: flux 160s linear infinite alternate;
}
ul li:nth-child(43) { top: 344px; left: 719px; -webkit-transform: translate3d(0, 0, 640px); -moz-transform: translate3d(0, 0, 640px); -ms-transform: translate3d(0, 0, 640px); -o-transform: translate3d(0, 0, 640px); transform: translate3d(0, 0, 640px); -webkit-animation: flux 40s linear infinite alternate; -moz-animation: flux 40s linear infinite alternate; -ms-animation: flux 40s linear infinite alternate; -o-animation: flux 40s linear infinite alternate; animation: flux 40s linear infinite alternate;
}
ul li:nth-child(44) { top: -858px; left: -1176px; -webkit-transform: translate3d(0, 0, 950px); -moz-transform: translate3d(0, 0, 950px); -ms-transform: translate3d(0, 0, 950px); -o-transform: translate3d(0, 0, 950px); transform: translate3d(0, 0, 950px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
ul li:nth-child(45) { top: 578px; left: 323px; -webkit-transform: translate3d(0, 0, 240px); -moz-transform: translate3d(0, 0, 240px); -ms-transform: translate3d(0, 0, 240px); -o-transform: translate3d(0, 0, 240px); transform: translate3d(0, 0, 240px); -webkit-animation: flux 115s linear infinite alternate; -moz-animation: flux 115s linear infinite alternate; -ms-animation: flux 115s linear infinite alternate; -o-animation: flux 115s linear infinite alternate; animation: flux 115s linear infinite alternate;
}
ul li:nth-child(46) { top: 468px; left: -958px; -webkit-transform: translate3d(0, 0, 260px); -moz-transform: translate3d(0, 0, 260px); -ms-transform: translate3d(0, 0, 260px); -o-transform: translate3d(0, 0, 260px); transform: translate3d(0, 0, 260px); -webkit-animation: flux 145s linear infinite alternate; -moz-animation: flux 145s linear infinite alternate; -ms-animation: flux 145s linear infinite alternate; -o-animation: flux 145s linear infinite alternate; animation: flux 145s linear infinite alternate;
}
ul li:nth-child(47) { top: -209px; left: -1362px; -webkit-transform: translate3d(0, 0, 600px); -moz-transform: translate3d(0, 0, 600px); -ms-transform: translate3d(0, 0, 600px); -o-transform: translate3d(0, 0, 600px); transform: translate3d(0, 0, 600px); -webkit-animation: flux 85s linear infinite alternate; -moz-animation: flux 85s linear infinite alternate; -ms-animation: flux 85s linear infinite alternate; -o-animation: flux 85s linear infinite alternate; animation: flux 85s linear infinite alternate;
}
ul li:nth-child(48) { top: 258px; left: 77px; -webkit-transform: translate3d(0, 0, 550px); -moz-transform: translate3d(0, 0, 550px); -ms-transform: translate3d(0, 0, 550px); -o-transform: translate3d(0, 0, 550px); transform: translate3d(0, 0, 550px); -webkit-animation: flux 85s linear infinite alternate; -moz-animation: flux 85s linear infinite alternate; -ms-animation: flux 85s linear infinite alternate; -o-animation: flux 85s linear infinite alternate; animation: flux 85s linear infinite alternate;
}
ul li:nth-child(49) { top: 851px; left: -1257px; -webkit-transform: translate3d(0, 0, 600px); -moz-transform: translate3d(0, 0, 600px); -ms-transform: translate3d(0, 0, 600px); -o-transform: translate3d(0, 0, 600px); transform: translate3d(0, 0, 600px); -webkit-animation: flux 175s linear infinite alternate; -moz-animation: flux 175s linear infinite alternate; -ms-animation: flux 175s linear infinite alternate; -o-animation: flux 175s linear infinite alternate; animation: flux 175s linear infinite alternate;
}
@-moz-keyframes flux { from { margin-top: 100%; } to { margin-top: -100%; }
}
@-webkit-keyframes flux { from { margin-top: 100%; } to { margin-top: -100%; }
}
@-o-keyframes flux { from { margin-top: 100%; } to { margin-top: -100%; }
}
@-ms-keyframes flux { from { margin-top: 100%; } to { margin-top: -100%; }
}
@keyframes flux { from { margin-top: 100%; } to { margin-top: -100%; }
}
@-moz-keyframes rotate { 0% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -moz-transform: rotateY(0deg); transform: rotateY(0deg); } 60% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -moz-transform: rotateY(180deg); transform: rotateY(180deg); }
}
@-webkit-keyframes rotate { 0% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -webkit-transform: rotateY(0deg); transform: rotateY(0deg); } 60% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -webkit-transform: rotateY(180deg); transform: rotateY(180deg); }
}
@-o-keyframes rotate { 0% { -o-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -o-transform: rotateY(0deg); transform: rotateY(0deg); } 60% { -o-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -o-transform: rotateY(180deg); transform: rotateY(180deg); }
}
@-ms-keyframes rotate { 0% { -ms-transform: rotateY(0deg); transform: rotateY(0deg); } 40% { -ms-transform: rotateY(0deg); transform: rotateY(0deg); } 60% { -ms-transform: rotateY(180deg); transform: rotateY(180deg); } 100% { -ms-transform: rotateY(180deg); transform: rotateY(180deg); }
}
@keyframes rotate { 0% { transform: rotateY(0deg); } 40% { transform: rotateY(0deg); } 60% { transform: rotateY(180deg); } 100% { transform: rotateY(180deg); }
}

Appletv - Script Codes JS Codes

/**
*
* Sass source code
*
*/
/*
@import "compass";
@import "animation";
$total-lis: 50;
body, html {	background:black;	overflow:hidden;	width:100%;	height:100%;	position:relative;
}
ul {	margin:0 10%;	padding:0;	list-style: none;	position:absolute;	display:block;	height:100%;	width:80%;	@include transform-style(preserve-3d);	@include animation(rotate 25s ease-in-out infinite alternate);
}
li {	position:absolute;	display:block;	width:260px;	height:150px;	img {	position:absolute;	top:0;	left:0;	display:block;	@include box-shadow(0 0 10px black);	}
}
@for $i from 1 to $total-lis {	ul li:nth-child(#{$i}) {	top:random(3000) - 1500px;	left:random(3000) - 1500px;	@include translate3d(0,0,random() * 10px);	@include animation(flux random(10) * 15 + 40s linear infinite alternate);	}
}
@include keyframes(flux) {	from {	margin-top:100%;	}	to {	margin-top:-100%;	}
}
@include keyframes(rotate) {	0% {	@include rotateY(0deg);	}	40% {	@include rotateY(0deg);	}	60% {	@include rotateY(180deg);	}	100% {	@include rotateY(180deg);	}
}
*/

Home Page	Home
Developer	Gianluca Guarini
Username	GianlucaGuarini
Uploaded	November 04, 2022
Rating	3
Size	6,368 Kb
Views	24,288

Do you need developer help for Appletv?

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!

Gianluca Guarini (GianlucaGuarini) Script Codes

Name	Size
EasyAnimationFrame.js	2,382 Kb
Fancy 404	2,569 Kb
Riot simple movies live search	3,501 Kb
Full screen menu	3,702 Kb
The Best Flash Site Ever	2,609 Kb
The Dark Loop	4,130 Kb
The 3D Worrying Cubes	103,249 Kb
CSS3 Breathing Particles	2,756 Kb
Drunk on Google Maps	2,241 Kb
Mario Bros	4,332 Kb

Create amazing sales emails 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
ABVI Menu Discarded	Overdrivemachines	3,607 Kb
Wikipedia viewer	Chpecson	2,865 Kb
Slide out Menu	Rbiggs	4,936 Kb
Css or Czz..	Judag	4,111 Kb
Polo, the flying squirrel	Agbales	2,445 Kb
CSS Donut Charts	Seanstopnik	2,908 Kb
Jquery 2d character movement	Drewtadams	4,291 Kb
Reviews and Ratings Star	Zbnmstry	1,591 Kb
03 - CSS Variables	Run-time	2,682 Kb
Find The Penguin	Lelder	2,212 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!