API tools faq
paste
Advertisement
Falkstids

Arcanine code 1.0

Falkstids
Jun 9th, 2017
77
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 13.19 KB | None | 0 0
raw download clone embed print report
  1. <style>
  2. body{
  3. background-color:transparent;
  4. overflow:hidden;
  5. }
  6. #gradient{
  7. background: linear-gradient(red, yellow); /* Standard syntax */
  8. background-size:100%;
  9. width:100%;
  10. height:100%;
  11. position:fixed;
  12. top:0px;
  13. left:0px;
  14. opacity:0.6;
  15. animation:flame 5s linear infinite;
  16.  
  17. }
  18.  
  19.  
  20. @keyframes flame {
  21. 0% { -webkit-filter: brightness(100%);
  22. }
  23. 20% {-webkit-filter: brightness(150%);
  24. }
  25. 25% {-webkit-filter: brightness(200%);
  26. }
  27. 35% {-webkit-filter: brightness(150%);
  28. }
  29. 40% {-webkit-filter: brightness(100%);
  30. }
  31. 45% {-webkit-filter: brightness(130%);
  32. }
  33. 55% {-webkit-filter: brightness(100%);
  34. }
  35. 60% {-webkit-filter: brightness(150%);
  36. }
  37. 65% {-webkit-filter: brightness(200%);
  38. }
  39. 75% {-webkit-filter: brightness(80%);
  40. }
  41. 85% {-webkit-filter: brightness(160%);
  42. }
  43. 90% {-webkit-filter: brightness(150%);
  44. }
  45. 100% {-webkit-filter: brightness(100%);
  46. }
  47. }
  48.  
  49.  
  50. #background-body{
  51. background-image:url(http://forum.gc.historygames.net/uploads/monthly_2016_09/background1-011.png.14b46c1e826acd884a125ad82e183b16.png);
  52. background-size:10%;
  53. background-position:left;
  54. width:100%;
  55. height:100%;
  56. position:fixed;
  57. top:0px;
  58. left:0px;
  59. opacity:0.7;
  60. z-index:2;
  61. }
  62.  
  63. #whosthat{
  64. background-image:url(http://i.imgur.com/HddtBOT.png);
  65. background-size:100%;
  66. background-repeat:no-repeat;
  67. width:800px;
  68. height:350px;
  69. position:absolute;
  70. top:50%;
  71. left:50%;
  72. margin-top:-185px;
  73. margin-left:-394px;
  74. border-radius: 65px 15px 65px 15px;
  75. background-position:0px -80px;
  76. z-index:50;
  77. opacity:1;
  78. border:solid 6px #000;
  79. }
  80.  
  81. @keyframes turn-off{
  82. 0%{
  83. transform:scale(1,1.3) translate3d(0,0,0);
  84. -webkit-filter:brightness(1);
  85. filter:brightness(1);
  86. opacity:1;
  87. }
  88. 60%{
  89. transform:scale(1.3,0.001) translate3d(0,0,0);
  90. -webkit-filter:brightness(10);
  91. filter:brightness(10);
  92. }
  93. 100%{
  94. transform:scale(0.000,0.0001) translate3d(0,0,0);
  95. -webkit-filter:brightness(50);
  96. filter:brightness(50);
  97. }
  98. }
  99.  
  100. #arcanine{
  101. width:400px;
  102. height:400px;
  103. position:absolute;
  104. top:50%;
  105. left:50%;
  106. margin-top:-150px;
  107. margin-left:-300px;
  108. animation: float 6s ease-in-out infinite;
  109. z-index:1;
  110. }
  111.  
  112. #arcanine a{
  113. background-image:url(http://i.imgur.com/HDhAKmy.png);
  114. background-size:100%;
  115. width:300px;
  116. height:300px;
  117. display:inline-block;
  118. z-index:0;
  119. }
  120.  
  121. @keyframes float {
  122. 0% {
  123.  
  124. transform: translatey(0px);
  125. }
  126. 50% {
  127.  
  128. transform: translatey(-10px);
  129. }
  130. 100% {
  131.  
  132. transform: translatey(0px);
  133. }
  134. }
  135.  
  136. #menu {
  137. border:solid 6px #000;
  138. background-image:url(http://i.imgur.com/7na1fIN.png);
  139. backround-color:transparent;
  140. background-size:100%;
  141. width:800px;
  142. height:350px;
  143. border-radius: 70px 20px 70px 20px;
  144. top:50%;
  145. left:50%;
  146. position:absolute;
  147. margin-top:-190px;
  148. margin-left:-400px;
  149. z-index:5;
  150. opacity:0;
  151. }
  152.  
  153. #container{
  154. width:800px;
  155. height:200px;
  156. top:50%;
  157. left:50%;
  158. position:absolute;
  159. margin-top:-100px;
  160. margin-left:-400px;
  161. background-color:#999999;
  162. opacity:.5;
  163. }
  164.  
  165. #pokeball{
  166. background-image:url(http://thecraftchop.com/files/others/Pokeball.svg);
  167. background-size:100%;
  168. width:200px;
  169. height:200px;
  170. position:absolute;
  171. top:50%;
  172. left:50%;
  173. margin-top:-100px;
  174. margin-left:-105px;
  175. opacity:.6;
  176. }
  177.  
  178. #ball1{
  179.  
  180. background-image:url(https://68.media.tumblr.com/84c06021db3bfcffb6e2400e632da1bf/tumblr_odm3weRRwA1qfjr5zo2_540.gif);
  181. background-size:190%;
  182. background-position:-50px;
  183. width:100px;
  184. height:100px;
  185. top:50%;
  186. left:50%;
  187. margin-top:-230px;
  188. margin-left:400px;
  189. position:absolute;
  190. opacity:1;
  191. border:solid 6px #000;
  192. border-radius:100%;
  193. z-index:10;
  194. opacity:0;
  195. transition:1s;
  196. transition-delay:1s;
  197. }
  198.  
  199. #ball2{
  200.  
  201. background-image:url(https://68.media.tumblr.com/1e762cfbd78fd456546b8601daa08f0d/tumblr_oqxusuHpcY1vpbs3jo1_500.gif);
  202. background-size:190%;
  203. background-position:-50px;
  204. width:100px;
  205. height:100px;
  206. top:50%;
  207. left:50%;
  208. margin-top:-230px;
  209. margin-left:-515px;
  210. position:absolute;
  211. opacity:1;
  212. border:solid 6px #000;
  213. border-radius:100%;
  214. z-index:10;
  215. opacity:0;
  216. transition:1s;
  217. transition-delay:1s;
  218. }
  219.  
  220. #ball3{
  221.  
  222. background-image:url(https://68.media.tumblr.com/4a17b6459b95791c96a8a8e50e479e08/tumblr_omfw0pqGdC1tx6wtwo3_500.gif);
  223. background-size:190%;
  224. background-position:-50px;
  225. width:100px;
  226. height:100px;
  227. top:50%;
  228. left:50%;
  229. margin-top:110px;
  230. margin-left:400px;
  231. position:absolute;
  232. opacity:1;
  233. border:solid 6px #000;
  234. border-radius:100%;
  235. z-index:10;
  236. opacity:0;
  237. transition:1s;
  238. transition-delay:1s;
  239. }
  240.  
  241. #ball4{
  242.  
  243. background-image:url(https://68.media.tumblr.com/2b640258ebb34e1290e10d5f57151232/tumblr_o3mk15wgcF1tqptlzo1_500.gif);
  244. background-size:190%;
  245. background-position:-50px 0px;
  246. width:100px;
  247. height:100px;
  248. top:50%;
  249. left:50%;
  250. margin-top:110px;
  251. margin-left:-515px;
  252. position:absolute;
  253. opacity:0;
  254. border:solid 6px #000;
  255. border-radius:100%;
  256. z-index:10;
  257. opacity:0;
  258. transition:1s;
  259. transition-delay:1s;
  260. }
  261.  
  262. #image{
  263. background-image:url(http://i.imgur.com/jBzZh8a.png);
  264. background-size:40%;
  265. width:570px;
  266. height:500px;
  267. background-repeat:no-repeat;
  268. top:50%;
  269. left:50%;
  270. position:absolute;
  271. margin-top:-175px;
  272. margin-left:-950px;
  273. transform: scaleX(-1);
  274. filter: FlipH;
  275. opacity:0;
  276. z-index:10;
  277. transition:1s;
  278. transition-delay:1.5s;
  279. filter: drop-shadow(1px 1px 5px #000);
  280. }
  281.  
  282. #image2{
  283. background-image:url(http://i.imgur.com/2N1swat.png);
  284. background-size:40%;
  285. width:630px;
  286. height:500px;
  287. background-repeat:no-repeat;
  288. top:50%;
  289. left:50%;
  290. position:absolute;
  291. margin-top:-175px;
  292. margin-left:380px;
  293. opacity:0;
  294. z-index:10;
  295. transition:1s;
  296. transition-delay:1.5s;
  297. filter: drop-shadow(-1px -1px 5px #000);
  298. }
  299.  
  300. #navi{
  301. width:200px;
  302. height:50px;
  303. background-color:transparent;
  304. position:absolute;
  305. top:50%;
  306. left:50%;
  307. opacity:0;
  308. margin-left:-55px;
  309. margin-top:-180px;
  310. }
  311.  
  312. #navi a{
  313. width:25px;
  314. height:25px;
  315. background-image:url(https://smashboards.com/data/avatars/l/336/336977.jpg?1445907979);
  316. background-size:100%;
  317. display:inline-block;
  318. }
  319.  
  320. #sprite{
  321. background-image:url(http://rs980.pbsrc.com/albums/ae290/CorrineAri/arcanine.gif~c200);
  322. width:130px;
  323. height:130px;
  324. position:absolute;
  325. top:50%;
  326. left:50%;
  327. background-size:100%;
  328. margin-top:-120px;
  329. margin-left:-225px;
  330. }
  331.  
  332. #navi a:hover{
  333. animation:flame 2s linear infinite;
  334. }
  335. #blanket:target #whosthat {
  336. opacity:0;
  337. z-index:2;
  338. animation: turn-off 0.55s linear ;
  339. }
  340. #blanket:target #menu{
  341. opacity:1;
  342. transition:1s;
  343. transition-delay:.1s;
  344. }
  345. #blanket:target #ball1{
  346. opacity:1;
  347. margin-left:350px;
  348. }
  349. #blanket:target #ball2{
  350. opacity:1;
  351. margin-left:-465px;
  352. }
  353. #blanket:target #ball3{
  354. opacity:1;
  355. margin-left:350px;
  356. }
  357. #blanket:target #ball4{
  358. opacity:1;
  359. margin-left:-465px;
  360. }
  361. #blanket:target #image{
  362. opacity:1;
  363. margin-left:-800px;
  364. }
  365. #blanket:target #image2{
  366. opacity:1;
  367. margin-left:200px;
  368. }
  369. #blanket:target #navi{
  370. opacity:1;
  371. transition:1s;
  372. z-index:15;
  373. }
  374.  
  375. #infobox1{
  376. width:480px;
  377. height:285px;
  378. position:absolute;
  379. top:50%;
  380. left:50%;
  381. background-image:url(http://i.imgur.com/lGdHMNW.png);
  382. background-repeat:no-repeat;
  383. background-size:100%;
  384. margin-top:-150px;
  385. margin-left:-235px;
  386. z-index:0;
  387. opacity:0;
  388. box-shadow: -12px 10px 64px -15px rgba(0,0,0,0.75);
  389. border:solid 3px #000;
  390. }
  391.  
  392. #blanket2:target #infobox1{
  393. opacity:1;
  394. transition:1s;
  395. z-index:15;
  396. }
  397. #blanket2:target #whosthat {
  398. opacity:0;
  399. z-index:2;
  400. animation: turn-off 0.55s linear ;
  401. }
  402. #blanket2:target #menu{
  403. opacity:1;
  404. transition:1s;
  405. transition-delay:.1s;
  406. }
  407. #blanket2:target #ball1{
  408. opacity:1;
  409. margin-left:350px;
  410. }
  411. #blanket2:target #ball2{
  412. opacity:1;
  413. margin-left:-465px;
  414. }
  415. #blanket2:target #ball3{
  416. opacity:1;
  417. margin-left:350px;
  418. }
  419. #blanket2:target #ball4{
  420. opacity:1;
  421. margin-left:-465px;
  422. }
  423. #blanket2:target #image{
  424. opacity:1;
  425. margin-left:-800px;
  426. }
  427. #blanket2:target #image2{
  428. opacity:1;
  429. margin-left:200px;
  430. }
  431. #blanket2:target #navi{
  432. opacity:1;
  433. transition:1s;
  434. z-index:15;
  435. }
  436.  
  437. #infobox2{
  438. width:480px;
  439. height:285px;
  440. position:absolute;
  441. top:50%;
  442. left:50%;
  443. background-image:url(http://i.imgur.com/dEhAgks.png);
  444. background-repeat:no-repeat;
  445. background-size:100%;
  446. margin-top:-150px;
  447. margin-left:-235px;
  448. z-index:0;
  449. opacity:0;
  450. box-shadow: -12px 10px 64px -15px rgba(0,0,0,0.75);
  451. border:solid 3px #000;
  452. }
  453.  
  454. #blanket3:target #infobox2{
  455. opacity:1;
  456. transition:1s;
  457. z-index:15;
  458. }
  459. #blanket3:target #whosthat {
  460. opacity:0;
  461. z-index:2;
  462. animation: turn-off 0.55s linear ;
  463. }
  464. #blanket3:target #menu{
  465. opacity:1;
  466. transition:1s;
  467. transition-delay:.1s;
  468. }
  469. #blanket3:target #ball1{
  470. opacity:1;
  471. margin-left:350px;
  472. }
  473. #blanket3:target #ball2{
  474. opacity:1;
  475. margin-left:-465px;
  476. }
  477. #blanket3:target #ball3{
  478. opacity:1;
  479. margin-left:350px;
  480. }
  481. #blanket3:target #ball4{
  482. opacity:1;
  483. margin-left:-465px;
  484. }
  485. #blanket3:target #image{
  486. opacity:1;
  487. margin-left:-800px;
  488. }
  489. #blanket3:target #image2{
  490. opacity:1;
  491. margin-left:200px;
  492. }
  493. #blanket3:target #navi{
  494. opacity:1;
  495. transition:1s;
  496. z-index:15;
  497. }
  498.  
  499. #infobox3{
  500. width:480px;
  501. height:285px;
  502. position:absolute;
  503. top:50%;
  504. left:50%;
  505. background-image:url(http://i.imgur.com/mLeW8Lo.png);
  506. background-repeat:no-repeat;
  507. background-size:100%;
  508. margin-top:-150px;
  509. margin-left:-235px;
  510. z-index:0;
  511. opacity:0;
  512. box-shadow: -12px 10px 64px -15px rgba(0,0,0,0.75);
  513. border:solid 3px #000;
  514. }
  515. #flamethrower {
  516. width:300px;
  517. height:30px;
  518. background-color:transparent;
  519. position:absolute;
  520. top:50%;
  521. left:50%;
  522. margin-left:-70px;
  523. margin-top:-110px;
  524. }
  525. #morningsun {
  526. width:300px;
  527. height:30px;
  528. background-color:transparent;
  529. position:absolute;
  530. top:50%;
  531. left:50%;
  532. margin-left:-70px;
  533. margin-top:-75px;
  534. }
  535. #solarbeam {
  536. width:300px;
  537. height:30px;
  538. background-color:transparent;
  539. position:absolute;
  540. top:50%;
  541. left:50%;
  542. margin-left:-70px;
  543. margin-top:-45px;
  544. }
  545. #sunnyday {
  546. width:300px;
  547. height:30px;
  548. background-color:transparent;
  549. position:absolute;
  550. top:50%;
  551. left:50%;
  552. margin-left:-70px;
  553. margin-top:-15px;
  554. }
  555. #flamethrower:hover #description{
  556. width:300px;
  557. height:80px;
  558. position:absolute;
  559. top:50%;
  560. left:0%;
  561. margin-top:165px;
  562. background-image:url(https://image.prntscr.com/image/1kYfWhXASNia_xMeWHgk-g.png);
  563. background-size:100%;
  564. background-repeat:no-repeat;
  565. }
  566. #morningsun:hover #description{
  567. width:300px;
  568. height:80px;
  569. position:absolute;
  570. top:50%;
  571. left:0%;
  572. margin-top:130px;
  573. background-image:url(https://image.prntscr.com/image/xAdrfQQbQt6moPZ1KfnGJA.png);
  574. background-size:100%;
  575. background-repeat:no-repeat;
  576. }
  577. #solarbeam:hover #description{
  578. width:300px;
  579. height:80px;
  580. position:absolute;
  581. top:50%;
  582. left:0%;
  583. margin-top:100px;
  584. background-image:url(https://image.prntscr.com/image/_itTlhGvQq6l5s2UK_8wng.png);
  585. background-size:100%;
  586. background-repeat:no-repeat;
  587. }
  588. #sunnyday:hover #description{
  589. width:300px;
  590. height:80px;
  591. position:absolute;
  592. top:50%;
  593. left:0%;
  594. margin-top:70px;
  595. background-image:url(https://image.prntscr.com/image/A30KU2u_QtirYntSAz5OBQ.png);
  596. background-size:100%;
  597. background-repeat:no-repeat;
  598. }
  599.  
  600.  
  601.  
  602.  
  603. #blanket4:target #infobox3{
  604. opacity:1;
  605. transition:1s;
  606. z-index:15;
  607. }
  608. #blanket4:target #whosthat {
  609. opacity:0;
  610. z-index:2;
  611. animation: turn-off 0.55s linear ;
  612. }
  613. #blanket4:target #menu{
  614. opacity:1;
  615. transition:1s;
  616. transition-delay:.1s;
  617. }
  618. #blanket4:target #ball1{
  619. opacity:1;
  620. margin-left:350px;
  621. }
  622. #blanket4:target #ball2{
  623. opacity:1;
  624. margin-left:-465px;
  625. }
  626. #blanket4:target #ball3{
  627. opacity:1;
  628. margin-left:350px;
  629. }
  630. #blanket4:target #ball4{
  631. opacity:1;
  632. margin-left:-465px;
  633. }
  634. #blanket4:target #image{
  635. opacity:1;
  636. margin-left:-800px;
  637. }
  638. #blanket4:target #image2{
  639. opacity:1;
  640. margin-left:200px;
  641. }
  642. #blanket4:target #navi{
  643. opacity:1;
  644. transition:1s;
  645. z-index:15;
  646. }
  647. </style>
  648. <div id="gradient"></div>
  649. <div id="background-body"></div>
  650. <div id="blanket"> <div id="blanket2"><div id="blanket3">
  651. <div id="blanket4">
  652. <div id="menu"><div id="container"><div id="pokeball"></div></div></div>
  653. <div id="ball1"></div>
  654. <div id="ball2"></div>
  655. <div id="ball3"></div>
  656. <div id="ball4"></div>
  657. <div id="image"></div>
  658. <div id="image2"></div>
  659. <div id="infobox1"><div id="sprite"></div></div>
  660. <div id="infobox2"><div id="sprite"></div></div>
  661. <div id="infobox3">
  662. <div id="sprite"></div>
  663. <div id="flamethrower"><div id="description"></div></div>
  664. <div id="morningsun"><div id="description"></div></div>
  665. <div id="solarbeam"><div id="description"></div></div>
  666. <div id="sunnyday"><div id="description"></div></div>
  667. </div>
  668.  
  669. <div id="navi">
  670. <a href="#blanket2"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  671. <a href="#blanket3"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  672. <a href="#blanket4"></a>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  673. </div>
  674.  
  675. <div id="whosthat"><div id="arcanine"><a href="#blanket"></a></div> </div>
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!