API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Mar 31st, 2020
121
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 25.66 KB | None | 0 0
raw download clone embed print report
  1.  
  2. <!DOCTYPE html>
  3. <html lang="en">
  4. <head>
  5. <meta charset="UTF-8">
  6. <link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
  7. <meta name="apple-mobile-web-app-title" content="CodePen">
  8. <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
  9. <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
  10. <meta charset="utf-8">
  11. <meta name='viewport' content='width=device-width, initial-scale=1'>
  12. <title>CodePen - Cloudy Spiral CSS animation</title>
  13. <link rel="stylesheet" media="screen" href="https://static.codepen.io/assets/fullpage/fullpage-4de243a40619a967c0bf13b95e1ac6f8de89d943b7fc8710de33f681fe287604.css" />
  14. <link href='https://fonts.googleapis.com/css?family=Lato:300,400,400italic,700,700italic,900,900italic' rel='stylesheet'>
  15. <link rel="apple-touch-icon" type="image/png" href="https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png" />
  16. <meta name="apple-mobile-web-app-title" content="CodePen">
  17. <link rel="shortcut icon" type="image/x-icon" href="https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico" />
  18. <link rel="mask-icon" type="" href="https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg" color="#111" />
  19. <title>CodePen - Cloudy Spiral CSS animation</title>
  20. <script>
  21. if (document.location.search.match(/type=embed/gi)) {
  22. window.parent.postMessage("resize", "*");
  23. }
  24. </script>
  25. <style>
  26. html { font-size: 15px; }
  27. html, body { margin: 0; padding: 0; min-height: 100%; }
  28. body { height:100%; display: flex; flex-direction: column; }
  29. .referer-warning {
  30. background: black;
  31. box-shadow: 0 2px 5px rgba(0,0,0, 0.5);
  32. padding: 0.75em;
  33. color: white;
  34. text-align: center;
  35. font-family: 'Lato', 'Lucida Grande', 'Lucida Sans Unicode', Tahoma, Sans-Serif;
  36. line-height: 1.2;
  37. font-size: 1rem;
  38. position: relative;
  39. z-index: 2;
  40. }
  41. .referer-warning h1 { font-size: 1.2rem; margin: 0; }
  42. .referer-warning a { color: #56bcf9; } /* $linkColorOnBlack */
  43. </style>
  44. </head>
  45. <body class="">
  46. <div class="referer-warning">
  47. <h1>⚠️ Do not enter passwords or personal information on this page. ⚠️</h1>
  48. This is a code demo posted by a web developer on <a href="https://codepen.io">codepen.io</a>.
  49. <br />
  50. A referer from CodePen is required to render this page view, and your browser is not sending one (<a href="https://blog.codepen.io/2017/10/05/regarding-referer-headers/" target="_blank">more details</a>).</h1>
  51. </div>
  52. <div id="result-iframe-wrap" role="main">
  53. <iframe id="result" srcdoc="
  54. <!DOCTYPE html>
  55. <html lang=&quot;en&quot; >
  56.  
  57. <head>
  58.  
  59. <meta charset=&quot;UTF-8&quot;>
  60.  
  61. <link rel=&quot;apple-touch-icon&quot; type=&quot;image/png&quot; href=&quot;https://static.codepen.io/assets/favicon/apple-touch-icon-5ae1a0698dcc2402e9712f7d01ed509a57814f994c660df9f7a952f3060705ee.png&quot; />
  62. <meta name=&quot;apple-mobile-web-app-title&quot; content=&quot;CodePen&quot;>
  63.  
  64. <link rel=&quot;shortcut icon&quot; type=&quot;image/x-icon&quot; href=&quot;https://static.codepen.io/assets/favicon/favicon-aec34940fbc1a6e787974dcd360f2c6b63348d4b1f4e06c77743096d55480f33.ico&quot; />
  65.  
  66. <link rel=&quot;mask-icon&quot; type=&quot;&quot; href=&quot;https://static.codepen.io/assets/favicon/logo-pin-8f3771b1072e3c38bd662872f6b673a722f4b3ca2421637d5596661b4e2132cc.svg&quot; color=&quot;#111&quot; />
  67.  
  68.  
  69. <title>CodePen - Cloudy Spiral CSS animation</title>
  70.  
  71.  
  72. <link rel=&quot;stylesheet&quot; href=&quot;https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css&quot;>
  73.  
  74.  
  75.  
  76. <style>
  77. html, body {
  78. overflow: hidden;
  79. background: #3e6fa3;
  80. }
  81.  
  82. .wrapper {
  83. position: absolute;
  84. top: 50%;
  85. left: 50%;
  86. z-index: 2;
  87. -moz-perspective: 500px;
  88. -webkit-perspective: 500px;
  89. perspective: 500px;
  90. }
  91.  
  92. i {
  93. display: block;
  94. position: absolute;
  95. width: 8px;
  96. height: 8px;
  97. border-radius: 8px;
  98. opacity: 0;
  99. background: rgba(255, 255, 255, 0.5);
  100. box-shadow: 0px 0px 10px white;
  101. animation-name: spin;
  102. animation-duration: 3s;
  103. animation-iteration-count: infinite;
  104. animation-timing-function: ease-in-out;
  105. }
  106.  
  107. i:nth-child(1) {
  108. -moz-transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  109. -ms-transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  110. -webkit-transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  111. transform: rotate(11.6129deg) translate3d(80px, 0, 0);
  112. animation-delay: 0.04839s;
  113. }
  114.  
  115. i:nth-child(2) {
  116. -moz-transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  117. -ms-transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  118. -webkit-transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  119. transform: rotate(23.22581deg) translate3d(80px, 0, 0);
  120. animation-delay: 0.09677s;
  121. }
  122.  
  123. i:nth-child(3) {
  124. -moz-transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  125. -ms-transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  126. -webkit-transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  127. transform: rotate(34.83871deg) translate3d(80px, 0, 0);
  128. animation-delay: 0.14516s;
  129. }
  130.  
  131. i:nth-child(4) {
  132. -moz-transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  133. -ms-transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  134. -webkit-transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  135. transform: rotate(46.45161deg) translate3d(80px, 0, 0);
  136. animation-delay: 0.19355s;
  137. }
  138.  
  139. i:nth-child(5) {
  140. -moz-transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  141. -ms-transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  142. -webkit-transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  143. transform: rotate(58.06452deg) translate3d(80px, 0, 0);
  144. animation-delay: 0.24194s;
  145. }
  146.  
  147. i:nth-child(6) {
  148. -moz-transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  149. -ms-transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  150. -webkit-transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  151. transform: rotate(69.67742deg) translate3d(80px, 0, 0);
  152. animation-delay: 0.29032s;
  153. }
  154.  
  155. i:nth-child(7) {
  156. -moz-transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  157. -ms-transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  158. -webkit-transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  159. transform: rotate(81.29032deg) translate3d(80px, 0, 0);
  160. animation-delay: 0.33871s;
  161. }
  162.  
  163. i:nth-child(8) {
  164. -moz-transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  165. -ms-transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  166. -webkit-transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  167. transform: rotate(92.90323deg) translate3d(80px, 0, 0);
  168. animation-delay: 0.3871s;
  169. }
  170.  
  171. i:nth-child(9) {
  172. -moz-transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  173. -ms-transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  174. -webkit-transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  175. transform: rotate(104.51613deg) translate3d(80px, 0, 0);
  176. animation-delay: 0.43548s;
  177. }
  178.  
  179. i:nth-child(10) {
  180. -moz-transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  181. -ms-transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  182. -webkit-transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  183. transform: rotate(116.12903deg) translate3d(80px, 0, 0);
  184. animation-delay: 0.48387s;
  185. }
  186.  
  187. i:nth-child(11) {
  188. -moz-transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  189. -ms-transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  190. -webkit-transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  191. transform: rotate(127.74194deg) translate3d(80px, 0, 0);
  192. animation-delay: 0.53226s;
  193. }
  194.  
  195. i:nth-child(12) {
  196. -moz-transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  197. -ms-transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  198. -webkit-transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  199. transform: rotate(139.35484deg) translate3d(80px, 0, 0);
  200. animation-delay: 0.58065s;
  201. }
  202.  
  203. i:nth-child(13) {
  204. -moz-transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  205. -ms-transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  206. -webkit-transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  207. transform: rotate(150.96774deg) translate3d(80px, 0, 0);
  208. animation-delay: 0.62903s;
  209. }
  210.  
  211. i:nth-child(14) {
  212. -moz-transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  213. -ms-transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  214. -webkit-transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  215. transform: rotate(162.58065deg) translate3d(80px, 0, 0);
  216. animation-delay: 0.67742s;
  217. }
  218.  
  219. i:nth-child(15) {
  220. -moz-transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  221. -ms-transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  222. -webkit-transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  223. transform: rotate(174.19355deg) translate3d(80px, 0, 0);
  224. animation-delay: 0.72581s;
  225. }
  226.  
  227. i:nth-child(16) {
  228. -moz-transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  229. -ms-transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  230. -webkit-transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  231. transform: rotate(185.80645deg) translate3d(80px, 0, 0);
  232. animation-delay: 0.77419s;
  233. }
  234.  
  235. i:nth-child(17) {
  236. -moz-transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  237. -ms-transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  238. -webkit-transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  239. transform: rotate(197.41935deg) translate3d(80px, 0, 0);
  240. animation-delay: 0.82258s;
  241. }
  242.  
  243. i:nth-child(18) {
  244. -moz-transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  245. -ms-transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  246. -webkit-transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  247. transform: rotate(209.03226deg) translate3d(80px, 0, 0);
  248. animation-delay: 0.87097s;
  249. }
  250.  
  251. i:nth-child(19) {
  252. -moz-transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  253. -ms-transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  254. -webkit-transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  255. transform: rotate(220.64516deg) translate3d(80px, 0, 0);
  256. animation-delay: 0.91935s;
  257. }
  258.  
  259. i:nth-child(20) {
  260. -moz-transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  261. -ms-transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  262. -webkit-transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  263. transform: rotate(232.25806deg) translate3d(80px, 0, 0);
  264. animation-delay: 0.96774s;
  265. }
  266.  
  267. i:nth-child(21) {
  268. -moz-transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  269. -ms-transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  270. -webkit-transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  271. transform: rotate(243.87097deg) translate3d(80px, 0, 0);
  272. animation-delay: 1.01613s;
  273. }
  274.  
  275. i:nth-child(22) {
  276. -moz-transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  277. -ms-transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  278. -webkit-transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  279. transform: rotate(255.48387deg) translate3d(80px, 0, 0);
  280. animation-delay: 1.06452s;
  281. }
  282.  
  283. i:nth-child(23) {
  284. -moz-transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  285. -ms-transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  286. -webkit-transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  287. transform: rotate(267.09677deg) translate3d(80px, 0, 0);
  288. animation-delay: 1.1129s;
  289. }
  290.  
  291. i:nth-child(24) {
  292. -moz-transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  293. -ms-transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  294. -webkit-transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  295. transform: rotate(278.70968deg) translate3d(80px, 0, 0);
  296. animation-delay: 1.16129s;
  297. }
  298.  
  299. i:nth-child(25) {
  300. -moz-transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  301. -ms-transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  302. -webkit-transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  303. transform: rotate(290.32258deg) translate3d(80px, 0, 0);
  304. animation-delay: 1.20968s;
  305. }
  306.  
  307. i:nth-child(26) {
  308. -moz-transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  309. -ms-transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  310. -webkit-transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  311. transform: rotate(301.93548deg) translate3d(80px, 0, 0);
  312. animation-delay: 1.25806s;
  313. }
  314.  
  315. i:nth-child(27) {
  316. -moz-transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  317. -ms-transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  318. -webkit-transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  319. transform: rotate(313.54839deg) translate3d(80px, 0, 0);
  320. animation-delay: 1.30645s;
  321. }
  322.  
  323. i:nth-child(28) {
  324. -moz-transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  325. -ms-transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  326. -webkit-transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  327. transform: rotate(325.16129deg) translate3d(80px, 0, 0);
  328. animation-delay: 1.35484s;
  329. }
  330.  
  331. i:nth-child(29) {
  332. -moz-transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  333. -ms-transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  334. -webkit-transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  335. transform: rotate(336.77419deg) translate3d(80px, 0, 0);
  336. animation-delay: 1.40323s;
  337. }
  338.  
  339. i:nth-child(30) {
  340. -moz-transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  341. -ms-transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  342. -webkit-transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  343. transform: rotate(348.3871deg) translate3d(80px, 0, 0);
  344. animation-delay: 1.45161s;
  345. }
  346.  
  347. i:nth-child(31) {
  348. -moz-transform: rotate(360deg) translate3d(80px, 0, 0);
  349. -ms-transform: rotate(360deg) translate3d(80px, 0, 0);
  350. -webkit-transform: rotate(360deg) translate3d(80px, 0, 0);
  351. transform: rotate(360deg) translate3d(80px, 0, 0);
  352. animation-delay: 1.5s;
  353. }
  354.  
  355. i:nth-child(32) {
  356. -moz-transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  357. -ms-transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  358. -webkit-transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  359. transform: rotate(371.6129deg) translate3d(80px, 0, 0);
  360. animation-delay: 1.54839s;
  361. }
  362.  
  363. i:nth-child(33) {
  364. -moz-transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  365. -ms-transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  366. -webkit-transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  367. transform: rotate(383.22581deg) translate3d(80px, 0, 0);
  368. animation-delay: 1.59677s;
  369. }
  370.  
  371. i:nth-child(34) {
  372. -moz-transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  373. -ms-transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  374. -webkit-transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  375. transform: rotate(394.83871deg) translate3d(80px, 0, 0);
  376. animation-delay: 1.64516s;
  377. }
  378.  
  379. i:nth-child(35) {
  380. -moz-transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  381. -ms-transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  382. -webkit-transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  383. transform: rotate(406.45161deg) translate3d(80px, 0, 0);
  384. animation-delay: 1.69355s;
  385. }
  386.  
  387. i:nth-child(36) {
  388. -moz-transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  389. -ms-transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  390. -webkit-transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  391. transform: rotate(418.06452deg) translate3d(80px, 0, 0);
  392. animation-delay: 1.74194s;
  393. }
  394.  
  395. i:nth-child(37) {
  396. -moz-transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  397. -ms-transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  398. -webkit-transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  399. transform: rotate(429.67742deg) translate3d(80px, 0, 0);
  400. animation-delay: 1.79032s;
  401. }
  402.  
  403. i:nth-child(38) {
  404. -moz-transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  405. -ms-transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  406. -webkit-transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  407. transform: rotate(441.29032deg) translate3d(80px, 0, 0);
  408. animation-delay: 1.83871s;
  409. }
  410.  
  411. i:nth-child(39) {
  412. -moz-transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  413. -ms-transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  414. -webkit-transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  415. transform: rotate(452.90323deg) translate3d(80px, 0, 0);
  416. animation-delay: 1.8871s;
  417. }
  418.  
  419. i:nth-child(40) {
  420. -moz-transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  421. -ms-transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  422. -webkit-transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  423. transform: rotate(464.51613deg) translate3d(80px, 0, 0);
  424. animation-delay: 1.93548s;
  425. }
  426.  
  427. i:nth-child(41) {
  428. -moz-transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  429. -ms-transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  430. -webkit-transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  431. transform: rotate(476.12903deg) translate3d(80px, 0, 0);
  432. animation-delay: 1.98387s;
  433. }
  434.  
  435. i:nth-child(42) {
  436. -moz-transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  437. -ms-transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  438. -webkit-transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  439. transform: rotate(487.74194deg) translate3d(80px, 0, 0);
  440. animation-delay: 2.03226s;
  441. }
  442.  
  443. i:nth-child(43) {
  444. -moz-transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  445. -ms-transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  446. -webkit-transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  447. transform: rotate(499.35484deg) translate3d(80px, 0, 0);
  448. animation-delay: 2.08065s;
  449. }
  450.  
  451. i:nth-child(44) {
  452. -moz-transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  453. -ms-transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  454. -webkit-transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  455. transform: rotate(510.96774deg) translate3d(80px, 0, 0);
  456. animation-delay: 2.12903s;
  457. }
  458.  
  459. i:nth-child(45) {
  460. -moz-transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  461. -ms-transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  462. -webkit-transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  463. transform: rotate(522.58065deg) translate3d(80px, 0, 0);
  464. animation-delay: 2.17742s;
  465. }
  466.  
  467. i:nth-child(46) {
  468. -moz-transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  469. -ms-transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  470. -webkit-transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  471. transform: rotate(534.19355deg) translate3d(80px, 0, 0);
  472. animation-delay: 2.22581s;
  473. }
  474.  
  475. i:nth-child(47) {
  476. -moz-transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  477. -ms-transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  478. -webkit-transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  479. transform: rotate(545.80645deg) translate3d(80px, 0, 0);
  480. animation-delay: 2.27419s;
  481. }
  482.  
  483. i:nth-child(48) {
  484. -moz-transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  485. -ms-transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  486. -webkit-transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  487. transform: rotate(557.41935deg) translate3d(80px, 0, 0);
  488. animation-delay: 2.32258s;
  489. }
  490.  
  491. i:nth-child(49) {
  492. -moz-transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  493. -ms-transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  494. -webkit-transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  495. transform: rotate(569.03226deg) translate3d(80px, 0, 0);
  496. animation-delay: 2.37097s;
  497. }
  498.  
  499. i:nth-child(50) {
  500. -moz-transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  501. -ms-transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  502. -webkit-transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  503. transform: rotate(580.64516deg) translate3d(80px, 0, 0);
  504. animation-delay: 2.41935s;
  505. }
  506.  
  507. i:nth-child(51) {
  508. -moz-transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  509. -ms-transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  510. -webkit-transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  511. transform: rotate(592.25806deg) translate3d(80px, 0, 0);
  512. animation-delay: 2.46774s;
  513. }
  514.  
  515. i:nth-child(52) {
  516. -moz-transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  517. -ms-transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  518. -webkit-transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  519. transform: rotate(603.87097deg) translate3d(80px, 0, 0);
  520. animation-delay: 2.51613s;
  521. }
  522.  
  523. i:nth-child(53) {
  524. -moz-transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  525. -ms-transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  526. -webkit-transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  527. transform: rotate(615.48387deg) translate3d(80px, 0, 0);
  528. animation-delay: 2.56452s;
  529. }
  530.  
  531. i:nth-child(54) {
  532. -moz-transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  533. -ms-transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  534. -webkit-transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  535. transform: rotate(627.09677deg) translate3d(80px, 0, 0);
  536. animation-delay: 2.6129s;
  537. }
  538.  
  539. i:nth-child(55) {
  540. -moz-transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  541. -ms-transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  542. -webkit-transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  543. transform: rotate(638.70968deg) translate3d(80px, 0, 0);
  544. animation-delay: 2.66129s;
  545. }
  546.  
  547. i:nth-child(56) {
  548. -moz-transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  549. -ms-transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  550. -webkit-transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  551. transform: rotate(650.32258deg) translate3d(80px, 0, 0);
  552. animation-delay: 2.70968s;
  553. }
  554.  
  555. i:nth-child(57) {
  556. -moz-transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  557. -ms-transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  558. -webkit-transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  559. transform: rotate(661.93548deg) translate3d(80px, 0, 0);
  560. animation-delay: 2.75806s;
  561. }
  562.  
  563. i:nth-child(58) {
  564. -moz-transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  565. -ms-transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  566. -webkit-transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  567. transform: rotate(673.54839deg) translate3d(80px, 0, 0);
  568. animation-delay: 2.80645s;
  569. }
  570.  
  571. i:nth-child(59) {
  572. -moz-transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  573. -ms-transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  574. -webkit-transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  575. transform: rotate(685.16129deg) translate3d(80px, 0, 0);
  576. animation-delay: 2.85484s;
  577. }
  578.  
  579. i:nth-child(60) {
  580. -moz-transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  581. -ms-transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  582. -webkit-transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  583. transform: rotate(696.77419deg) translate3d(80px, 0, 0);
  584. animation-delay: 2.90323s;
  585. }
  586.  
  587. i:nth-child(61) {
  588. -moz-transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  589. -ms-transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  590. -webkit-transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  591. transform: rotate(708.3871deg) translate3d(80px, 0, 0);
  592. animation-delay: 2.95161s;
  593. }
  594.  
  595. i:nth-child(62) {
  596. -moz-transform: rotate(720deg) translate3d(80px, 0, 0);
  597. -ms-transform: rotate(720deg) translate3d(80px, 0, 0);
  598. -webkit-transform: rotate(720deg) translate3d(80px, 0, 0);
  599. transform: rotate(720deg) translate3d(80px, 0, 0);
  600. animation-delay: 3s;
  601. }
  602.  
  603. @keyframes spin {
  604. from {
  605. opacity: 0.0;
  606. }
  607. to {
  608. opacity: 0.6;
  609. transform: translate3d(-4px, -4px, 570px);
  610. }
  611. }
  612. #black {
  613. position: absolute;
  614. left: 10px;
  615. bottom: 10px;
  616. color: rgba(255, 255, 255, 0.6);
  617. text-decoration: none;
  618. }
  619. #black:after {
  620. content: 'Black &amp; white';
  621. }
  622.  
  623. #black:target {
  624. top: 0;
  625. left: 0;
  626. width: 100%;
  627. height: 100%;
  628. z-index: 1;
  629. background: #111;
  630. cursor: default;
  631. }
  632. #black:target:after {
  633. content: '';
  634. }
  635. </style>
  636.  
  637. <script>
  638. window.console = window.console || function(t) {};
  639. </script>
  640.  
  641. <script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js&quot;></script>
  642.  
  643.  
  644. <script>
  645. if (document.location.search.match(/type=embed/gi)) {
  646. window.parent.postMessage(&quot;resize&quot;, &quot;*&quot;);
  647. }
  648. </script>
  649.  
  650.  
  651. </head>
  652.  
  653. <body translate=&quot;no&quot; >
  654. <div class='wrapper'>
  655. <i></i>
  656. <i></i>
  657. <i></i>
  658. <i></i>
  659. <i></i>
  660. <i></i>
  661. <i></i>
  662. <i></i>
  663. <i></i>
  664. <i></i>
  665. <i></i>
  666. <i></i>
  667. <i></i>
  668. <i></i>
  669. <i></i>
  670. <i></i>
  671. <i></i>
  672. <i></i>
  673. <i></i>
  674. <i></i>
  675. <i></i>
  676. <i></i>
  677. <i></i>
  678. <i></i>
  679. <i></i>
  680. <i></i>
  681. <i></i>
  682. <i></i>
  683. <i></i>
  684. <i></i>
  685. <i></i>
  686. <i></i>
  687. <i></i>
  688. <i></i>
  689. <i></i>
  690. <i></i>
  691. <i></i>
  692. <i></i>
  693. <i></i>
  694. <i></i>
  695. <i></i>
  696. <i></i>
  697. <i></i>
  698. <i></i>
  699. <i></i>
  700. <i></i>
  701. <i></i>
  702. <i></i>
  703. <i></i>
  704. <i></i>
  705. <i></i>
  706. <i></i>
  707. <i></i>
  708. <i></i>
  709. <i></i>
  710. <i></i>
  711. <i></i>
  712. <i></i>
  713. <i></i>
  714. <i></i>
  715. <i></i>
  716. <i></i>
  717. </div>
  718. <a href='#black' id='black'></a>
  719. <script src=&quot;https://static.codepen.io/assets/common/stopExecutionOnTimeout-157cd5b220a5c80d4ff8e0e70ac069bffd87a61252088146915e8726e5d9f147.js&quot;></script>
  720.  
  721.  
  722.  
  723. <script id=&quot;rendered-js&quot; >
  724. // Set out to build a loading indicator
  725. // but ended up with this cloudy spiral
  726. // animation.
  727. //
  728. // - Hakim | @hakimel
  729. //# sourceURL=pen.js
  730. </script>
  731.  
  732.  
  733.  
  734.  
  735. </body>
  736.  
  737. </html>
  738.  
  739. " sandbox="allow-forms allow-modals allow-pointer-lock allow-popups allow-presentation allow-scripts" allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr" allowTransparency="true" allowpaymentrequest="true" allowfullscreen="true" class="result-iframe">
  740. </iframe>
  741. </div>
  742. </body>
  743. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!