API tools faq
paste
austinh115

Nightly windmill

austinh115
Aug 18th, 2018
287
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 15.15 KB | None | 0 0
raw download clone embed print report
  1. background:#173b5b;}
  2. /** CSS By Austin (638877683) **/
  3. * {
  4. box-sizing: border-box;
  5. margin: 0;
  6. padding: 0;
  7. }
  8. html,
  9. body {
  10. min-height: 100%;
  11. height: 100%;
  12. }
  13. .align-v-h, .container {
  14. display: flex;
  15. align-items: center;
  16. justify-content: center;
  17. }
  18. .container {
  19. flex-direction: column;
  20. height: 100%;
  21. position: absolute;
  22. top: 50%;
  23. left: 50%;
  24. transform: translate(-50%, -50%);
  25. }
  26. .note{
  27. position: fixed;
  28. right: 12px;
  29. bottom: 12px;
  30. font-size: 16px;
  31. color: #f2f2f2;
  32. font-family: 'Lato', sans-serif;
  33. font-weight: light;
  34. }
  35. .source a {
  36. color: inherit;
  37. font-weight: medium;
  38. }
  39. .wrap {
  40. position: relative;
  41. display: flex;
  42. flex-wrap: wrap;
  43. width: 240px;
  44. height: 520px;
  45. background-color: #153355;
  46. border-radius: 180px;
  47. box-shadow: 0px 20px 64px 0px rgba(9, 28, 49, 0.64);
  48. overflow: hidden;
  49. }
  50. .wrap .stars {
  51. position: absolute;
  52. left: 0;
  53. top: 0;
  54. width: 100%;
  55. height: 60%;
  56. display: flex;
  57. flex-wrap: wrap;
  58. }
  59. .wrap .stars div {
  60. position: absolute;
  61. left: 100%;
  62. top: 0;
  63. width: 32px;
  64. height: 1px;
  65. background-color: #fff;
  66. border-radius: 50%;
  67. -webkit-animation-name: star-animation-2;
  68. animation-name: star-animation-2;
  69. -webkit-animation-duration: 3s;
  70. animation-duration: 3s;
  71. -webkit-animation-iteration-count: infinite;
  72. animation-iteration-count: infinite;
  73. -webkit-animation-timing-function: linear;
  74. animation-timing-function: linear;
  75. }
  76. .wrap .stars div:first-child {
  77. -webkit-transform: rotate(160deg) translateY(-128px);
  78. transform: rotate(160deg) translateY(-128px);
  79. -webkit-animation-delay: 4s;
  80. animation-delay: 4s;
  81. }
  82. .wrap .stars div:nth-child(2) {
  83. -webkit-transform: rotate(160deg) translateY(-18px);
  84. transform: rotate(160deg) translateY(-18px);
  85. -webkit-animation-delay: 2s;
  86. animation-delay: 2s;
  87. }
  88. .wrap .stars div:last-child {
  89. -webkit-transform: rotate(160deg) translateY(-200px);
  90. transform: rotate(160deg) translateY(-200px);
  91. -webkit-animation-delay: 3s;
  92. animation-delay: 3s;
  93. }
  94. .wrap .stars span {
  95. display: flex;
  96. align-items: center;
  97. position: relative;
  98. flex-basis: 100%;
  99. margin-bottom: 12px;
  100. }
  101. .wrap .stars span:before {
  102. content: '';
  103. width: 3px;
  104. height: 3px;
  105. border-radius: 50%;
  106. background-color: #fff;
  107. -webkit-animation-name: star-animation;
  108. animation-name: star-animation;
  109. -webkit-animation-iteration-count: infinite;
  110. animation-iteration-count: infinite;
  111. }
  112. .wrap .stars span:first-child {
  113. justify-content: flex-end;
  114. }
  115. .wrap .stars span:first-child:before {
  116. margin-right: 100px;
  117. -webkit-animation-duration: 1s;
  118. animation-duration: 1s;
  119. -webkit-animation-delay: .32s;
  120. animation-delay: .32s;
  121. }
  122. .wrap .stars span:nth-child(2) {
  123. justify-content: flex-end;
  124. }
  125. .wrap .stars span:nth-child(2):before {
  126. margin-right: 120px;
  127. -webkit-animation-duration: 2s;
  128. animation-duration: 2s;
  129. }
  130. .wrap .stars span:nth-child(3) {
  131. justify-content: flex-end;
  132. }
  133. .wrap .stars span:nth-child(3):before {
  134. margin-right: 66px;
  135. -webkit-animation-duration: 4s;
  136. animation-duration: 4s;
  137. -webkit-animation-delay: .16s;
  138. animation-delay: .16s;
  139. }
  140. .wrap .stars span:nth-child(4) {
  141. justify-content: flex-end;
  142. }
  143. .wrap .stars span:nth-child(4):before {
  144. margin-right: 40px;
  145. -webkit-animation-duration: 3s;
  146. animation-duration: 3s;
  147. -webkit-animation-delay: .32s;
  148. animation-delay: .32s;
  149. }
  150. .wrap .stars span:nth-child(5) {
  151. justify-content: flex-start;
  152. }
  153. .wrap .stars span:nth-child(5):before {
  154. margin-left: 40px;
  155. -webkit-animation-duration: 1s;
  156. animation-duration: 1s;
  157. -webkit-animation-delay: .32s;
  158. animation-delay: .32s;
  159. }
  160. .wrap .stars span:nth-child(6) {
  161. justify-content: flex-end;
  162. }
  163. .wrap .stars span:nth-child(6):before {
  164. margin-right: 100px;
  165. -webkit-animation-duration: 6s;
  166. animation-duration: 6s;
  167. -webkit-animation-delay: .12s;
  168. animation-delay: .12s;
  169. }
  170. .wrap .stars span:nth-child(7) {
  171. justify-content: flex-end;
  172. }
  173. .wrap .stars span:nth-child(7):before {
  174. margin-right: 40px;
  175. }
  176. .wrap .stars span:last-child:before {
  177. margin-left: 8px;
  178. -webkit-animation-duration: 3s;
  179. animation-duration: 3s;
  180. -webkit-animation-delay: .64s;
  181. animation-delay: .64s;
  182. }
  183. .wrap .moon {
  184. position: absolute;
  185. z-index: 10;
  186. top: calc(50px + 32px);
  187. left: calc(50px + 32px);
  188. width: 64px;
  189. height: 64px;
  190. border-radius: 50%;
  191. background-color: #F6F6F6;
  192. transform: translate(-50%,-50%);
  193. opacity: .9;
  194. transition: all 2s cubic-bezier(0.4, 0, 0.2, 1);
  195. box-shadow: 0px 0px 64px rgba(158, 230, 254, 0.6);
  196. }
  197. .wrap .moon:before, .wrap .moon:after {
  198. content: '';
  199. position: absolute;
  200. z-index: 2;
  201. top: 0;
  202. left: 0;
  203. width: 100%;
  204. height: 100%;
  205. border-radius: 50%;
  206. }
  207. .wrap .moon:before {
  208. background-color: transparent;
  209. box-shadow: 0px 0px 0px 32px rgba(32, 94, 114, 0.4);
  210. }
  211. .wrap .moon:after {
  212. background-color: transparent;
  213. box-shadow: 0px 0px 0px 48px rgba(32, 94, 114, 0.2);
  214. }
  215. .wrap .moon:hover {
  216. padding: 445px;
  217. }
  218. .wrap .moon-info {
  219. opacity: 0;
  220. transition: all 1s linear;
  221. position: absolute;
  222. left: 50%;
  223. top: 50%;
  224. transform: translate(-25%,-25%);
  225. width: 200px;
  226. z-index: 999;
  227. }
  228. .wrap .moon:hover .moon-info {
  229. opacity: 1;
  230. }
  231. .wrap .moon-shadow {
  232. position: absolute;
  233. z-index: 2;
  234. top: 0;
  235. left: 0;
  236. width: 100%;
  237. height: 100%;
  238. border-radius: 50%;
  239. background-color: transparent;
  240. box-shadow: 0px 0px 0px 16px rgba(32, 94, 114, 0.6);
  241. }
  242. .wrap .mountains {
  243. position: absolute;
  244. z-index: 3;
  245. width: 0;
  246. height: 0;
  247. bottom: 20%;
  248. left: -100px;
  249. opacity: 0.6;
  250. border-left: 180px solid transparent;
  251. border-right: 180px solid transparent;
  252. border-bottom: 180px solid #124869;
  253. -webkit-transform: rotate(4deg);
  254. transform: rotate(4deg);
  255. }
  256. .wrap .mountains div {
  257. position: absolute;
  258. z-index: 4;
  259. top: 128px;
  260. left: -140px;
  261. width: 0;
  262. height: 0;
  263. opacity: 1;
  264. border-left: 120px solid transparent;
  265. border-right: 120px solid transparent;
  266. border-bottom: 120px solid #104261;
  267. -webkit-transform: rotate(4deg) scale(2);
  268. transform: rotate(4deg) scale(2);
  269. }
  270. .wrap .mountains:before, .wrap .mountains:after {
  271. content: '';
  272. position: absolute;
  273. width: 0;
  274. height: 0;
  275. opacity: 0.6;
  276. }
  277. .wrap .mountains:before {
  278. border-left: 125px solid transparent;
  279. border-right: 125px solid transparent;
  280. border-bottom: 125px solid #124869;
  281. top: 32px;
  282. left: -20px;
  283. }
  284. .wrap .mountains:after {
  285. border-left: 100px solid transparent;
  286. border-right: 100px solid transparent;
  287. border-bottom: 100px solid #124869;
  288. top: 80px;
  289. left: 80px;
  290. }
  291. .wrap .windmill {
  292. position: relative;
  293. z-index: 6;
  294. width: 100%;
  295. height: 104px;
  296. align-self: flex-end;
  297. margin-top: 301px;
  298. }
  299. .wrap .windmill .item {
  300. margin-left: auto;
  301. margin-right: 44px;
  302. width: 64px;
  303. height: 100%;
  304. border-radius: 64px 64px 0 0;
  305. background-color: #101522;
  306. }
  307. .wrap .windmill .item-top {
  308. position: relative;
  309. width: 16px;
  310. height: 16px;
  311. background-color: inherit;
  312. border-radius: 50%;
  313. margin-left: auto;
  314. margin-right: auto;
  315. }
  316. .wrap .windmill .item-top div {
  317. position: absolute;
  318. z-index: 1;
  319. top: 0;
  320. left: 0;
  321. width: 100%;
  322. height: 100%;
  323. background-color: transparent;
  324. -webkit-animation-name: rotate;
  325. animation-name: rotate;
  326. -webkit-animation-duration: 6s;
  327. animation-duration: 6s;
  328. -webkit-animation-iteration-count: infinite;
  329. animation-iteration-count: infinite;
  330. -webkit-animation-timing-function: linear;
  331. animation-timing-function: linear;
  332. }
  333. .wrap .windmill .item-top div:before, .wrap .windmill .item-top div:after {
  334. content: '';
  335. position: absolute;
  336. width: 8px;
  337. height: 48px;
  338. background-color: #101522;
  339. border-radius: 12px;
  340. }
  341. .wrap .windmill .item-top div:first-child:before {
  342. -webkit-transform: rotate(135deg);
  343. transform: rotate(135deg);
  344. bottom: 50%;
  345. margin-bottom: 2px;
  346. right: 50%;
  347. margin-right: 20px;
  348. }
  349. .wrap .windmill .item-top div:first-child:after {
  350. -webkit-transform: rotate(135deg);
  351. transform: rotate(135deg);
  352. top: 50%;
  353. margin-top: 2px;
  354. left: 50%;
  355. margin-left: 20px;
  356. }
  357. .wrap .windmill .item-top div:last-child:before {
  358. -webkit-transform: rotate(45deg);
  359. transform: rotate(45deg);
  360. bottom: 50%;
  361. margin-bottom: 2px;
  362. left: 50%;
  363. margin-left: 20px;
  364. }
  365. .wrap .windmill .item-top div:last-child:after {
  366. -webkit-transform: rotate(45deg);
  367. transform: rotate(45deg);
  368. top: 50%;
  369. margin-top: 2px;
  370. right: 50%;
  371. margin-right: 20px;
  372. }
  373. .wrap .windmill .item-bottom {
  374. display: flex;
  375. flex-direction: column;
  376. height: calc(100% - 24px);
  377. justify-content: space-between;
  378. align-items: center;
  379. }
  380. .wrap .windmill .item-bottom div:first-child {
  381. width: 8px;
  382. height: 12px;
  383. border-radius: 8px 8px 0 0;
  384. background-color: #2f6379;
  385. box-shadow: 0px 0px 24px rgba(158, 230, 254, 0.4);
  386. }
  387. .wrap .windmill .item-bottom div:last-child {
  388. width: 16px;
  389. height: 8px;
  390. -webkit-transform: translateY(4px);
  391. transform: translateY(4px);
  392. border-radius: 12px 12px 0 0;
  393. background-color: #2f6379;
  394. }
  395. .wrap-footer {
  396. position: relative;
  397. z-index: 4;
  398. align-self: flex-end;
  399. -webkit-transform: rotate(4deg) scale(1.2);
  400. transform: rotate(4deg) scale(1.2);
  401. width: 100%;
  402. height: 20%;
  403. background-color: #101522;
  404. }
  405. @media screen and (max-width: 400px) {
  406. .wrap {
  407. -webkit-transform: scale(0.64);
  408. transform: scale(0.64);
  409. }
  410. }
  411. @-webkit-keyframes star-animation {
  412. 0% {
  413. opacity: 0;
  414. }
  415. 50% {
  416. opacity: 1;
  417. }
  418. 100% {
  419. opacity: 0;
  420. }
  421. }
  422. @keyframes star-animation {
  423. 0% {
  424. opacity: 0;
  425. }
  426. 50% {
  427. opacity: 1;
  428. }
  429. 100% {
  430. opacity: 0;
  431. }
  432. }
  433. @-webkit-keyframes rotate {
  434. 0% {
  435. -webkit-transform: rotate(0deg);
  436. transform: rotate(0deg);
  437. }
  438. 100% {
  439. -webkit-transform: rotate(360deg);
  440. transform: rotate(360deg);
  441. }
  442. }
  443. @keyframes rotate {
  444. 0% {
  445. -webkit-transform: rotate(0deg);
  446. transform: rotate(0deg);
  447. }
  448. 100% {
  449. -webkit-transform: rotate(360deg);
  450. transform: rotate(360deg);
  451. }
  452. }
  453. @-webkit-keyframes star-animation-2 {
  454. 0% {
  455. left: 100%;
  456. top: 0;
  457. width: 32px;
  458. }
  459. 10% {
  460. width: 24px;
  461. }
  462. 30% {
  463. left: -100%;
  464. top: 220px;
  465. width: 32px;
  466. }
  467. 100% {
  468. left: -100%;
  469. top: 220px;
  470. width: 32px;
  471. }
  472. }
  473. @keyframes star-animation-2 {
  474. 0% {
  475. left: 100%;
  476. top: 0;
  477. width: 32px;
  478. }
  479. 10% {
  480. width: 24px;
  481. }
  482. 30% {
  483. left: -100%;
  484. top: 220px;
  485. width: 32px;
  486. }
  487. 100% {
  488. left: -100%;
  489. top: 220px;
  490. width: 32px;
  491. }
  492. }
  493. iframe {position: absolute;top:-500px;
  494.  
  495.  
  496.  
  497.  
  498.  
  499.  
  500.  
  501.  
  502.  
  503.  
  504.  
  505. [youtube:500:500:tD_yFYZeMN0:autoplay=1&playlist=tD_yFYZeMN0&loop=1]
  506. [font:Lato]
  507. <div class="container">
  508. <div class="wrap">
  509. <div class="moon">
  510. <div class="moon-shadow"></div>
  511.  
  512. </div>
  513. <div class="mountains">
  514. <div></div>
  515. </div>
  516. <div class="stars">
  517. <div></div>
  518. <div></div>
  519. <div></div>
  520. </div>
  521. <div class="stars"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
  522. <div class="windmill">
  523. <div class="item">
  524. <div class="item-top">
  525. <div></div>
  526. <div></div>
  527. </div>
  528. <div class="item-bottom">
  529. <div></div>
  530. <div></div>
  531. </div>
  532. </div>
  533. </div>
  534. <div class="wrap-footer"></div>
  535. </div>
  536. </div>
Advertisement
Add Comment
Please, Sign In to add comment
Public Pastes
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!