API tools faq
paste
Advertisement
Arabella23

Mapa Interactivo (css)

Arabella23
Jun 27th, 2015
419
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 8.30 KB | None | 0 0
raw download clone embed print report
  1. /*Codigo Mapa interactivo by Arabella*/
  2. #pinbrasil {
  3.   width: 15px;
  4.   height: 15px;
  5.   -webkit-border-radius: 50% 50% 50% 0;
  6.   border-radius: 50% 50% 50% 0;
  7.   background: #46da1e;
  8.   -webkit-transform: rotate(-45deg);
  9.   -moz-transform: rotate(-45deg);
  10.   -o-transform: rotate(-45deg);
  11.   -ms-transform: rotate(-45deg);
  12.   transform: rotate(-45deg);
  13.   margin-top:-200;
  14.   margin-left:150px;
  15.   -webkit-animation-name: bounce;
  16.   -moz-animation-name: bounce;
  17.   -o-animation-name: bounce;
  18.   -ms-animation-name: bounce;
  19.   animation-name: bounce;
  20.   -webkit-animation-fill-mode: both;
  21.   -moz-animation-fill-mode: both;
  22.   -o-animation-fill-mode: both;
  23.   -ms-animation-fill-mode: both;
  24.   animation-fill-mode: both;
  25.   -webkit-animation-duration: 1s;
  26.   -moz-animation-duration: 1s;
  27.   -o-animation-duration: 1s;
  28.   -ms-animation-duration: 1s;
  29.   animation-duration: 1s;
  30.  
  31. }
  32.  
  33.  
  34.  
  35. #pinargentina {
  36.   width: 15px;
  37.   height: 15px;
  38.   margin-top:80px;
  39.   margin-left:105px;
  40.   -webkit-border-radius: 50% 50% 50% 0;
  41.   border-radius: 50% 50% 50% 0;
  42.   background: #08bfb4;
  43.   -webkit-transform: rotate(-45deg);
  44.   -moz-transform: rotate(-45deg);
  45.   -o-transform: rotate(-45deg);
  46.   -ms-transform: rotate(-45deg);
  47.   transform: rotate(-45deg);
  48.   -webkit-animation-name: bounce;
  49.   -moz-animation-name: bounce;
  50.   -o-animation-name: bounce;
  51.   -ms-animation-name: bounce;
  52.   animation-name: bounce;
  53.   -webkit-animation-fill-mode: both;
  54.   -moz-animation-fill-mode: both;
  55.   -o-animation-fill-mode: both;
  56.   -ms-animation-fill-mode: both;
  57.   animation-fill-mode: both;
  58.   -webkit-animation-duration: 1s;
  59.   -moz-animation-duration: 1s;
  60.   -o-animation-duration: 1s;
  61.   -ms-animation-duration: 1s;
  62.   animation-duration: 1s;
  63. }
  64.  
  65.  
  66. #pinuruguay{
  67.   width: 15px;
  68.   height: 15px;
  69.   -webkit-border-radius: 50% 50% 50% 0;
  70.   border-radius: 50% 50% 50% 0;
  71.   background: #d71f60;
  72.   margin-top:-25px;
  73.   margin-left:135px;
  74.   -webkit-transform: rotate(-45deg);
  75.   -moz-transform: rotate(-45deg);
  76.   -o-transform: rotate(-45deg);
  77.   -ms-transform: rotate(-45deg);
  78.   transform: rotate(-45deg);
  79.   -webkit-animation-name: bounce;
  80.   -moz-animation-name: bounce;
  81.   -o-animation-name: bounce;
  82.   -ms-animation-name: bounce;
  83.   animation-name: bounce;
  84.   -webkit-animation-fill-mode: both;
  85.   -moz-animation-fill-mode: both;
  86.   -o-animation-fill-mode: both;
  87.   -ms-animation-fill-mode: both;
  88.   animation-fill-mode: both;
  89.   -webkit-animation-duration: 1s;
  90.   -moz-animation-duration: 1s;
  91.   -o-animation-duration: 1s;
  92.   -ms-animation-duration: 1s;
  93.   animation-duration: 1s;
  94. }
  95.  
  96. #pinchile{
  97.   width: 15px;
  98.   height: 15px;
  99.   -webkit-border-radius: 50% 50% 50% 0;
  100.   border-radius: 50% 50% 50% 0;
  101.   background: #296fee;
  102.   margin-top:-40px;
  103.   margin-left:83px;
  104.   -webkit-transform: rotate(-45deg);
  105.   -moz-transform: rotate(-45deg);
  106.   -o-transform: rotate(-45deg);
  107.   -ms-transform: rotate(-45deg);
  108.   transform: rotate(-45deg);
  109.   -webkit-animation-name: bounce;
  110.   -moz-animation-name: bounce;
  111.   -o-animation-name: bounce;
  112.   -ms-animation-name: bounce;
  113.   animation-name: bounce;
  114.   -webkit-animation-fill-mode: both;
  115.   -moz-animation-fill-mode: both;
  116.   -o-animation-fill-mode: both;
  117.   -ms-animation-fill-mode: both;
  118.   animation-fill-mode: both;
  119.   -webkit-animation-duration: 1s;
  120.   -moz-animation-duration: 1s;
  121.   -o-animation-duration: 1s;
  122.   -ms-animation-duration: 1s;
  123.   animation-duration: 1s;
  124. }
  125.  
  126. #pinparaguay{
  127.   width: 15px;
  128.   height: 15px;
  129.   -webkit-border-radius: 50% 50% 50% 0;
  130.   border-radius: 50% 50% 50% 0;
  131.   background: #d6d80f;
  132.   margin-top:-28px;
  133.   margin-left:126px;
  134.   -webkit-transform: rotate(-45deg);
  135.   -moz-transform: rotate(-45deg);
  136.   -o-transform: rotate(-45deg);
  137.   -ms-transform: rotate(-45deg);
  138.   transform: rotate(-45deg);
  139.   -webkit-animation-name: bounce;
  140.   -moz-animation-name: bounce;
  141.   -o-animation-name: bounce;
  142.   -ms-animation-name: bounce;
  143.   animation-name: bounce;
  144.   -webkit-animation-fill-mode: both;
  145.   -moz-animation-fill-mode: both;
  146.   -o-animation-fill-mode: both;
  147.   -ms-animation-fill-mode: both;
  148.   animation-fill-mode: both;
  149.   -webkit-animation-duration: 1s;
  150.   -moz-animation-duration: 1s;
  151.   -o-animation-duration: 1s;
  152.   -ms-animation-duration: 1s;
  153.   animation-duration: 1s;
  154. }
  155.  
  156.  
  157. #pinbolivia{
  158.   width: 15px;
  159.   height: 15px;
  160.   -webkit-border-radius: 50% 50% 50% 0;
  161.   border-radius: 50% 50% 50% 0;
  162.   background: #ef730f;
  163.   margin-top:-42px;
  164.   margin-left:100px;
  165.   -webkit-transform: rotate(-45deg);
  166.   -moz-transform: rotate(-45deg);
  167.   -o-transform: rotate(-45deg);
  168.   -ms-transform: rotate(-45deg);
  169.   transform: rotate(-45deg);
  170.   -webkit-animation-name: bounce;
  171.   -moz-animation-name: bounce;
  172.   -o-animation-name: bounce;
  173.   -ms-animation-name: bounce;
  174.   animation-name: bounce;
  175.   -webkit-animation-fill-mode: both;
  176.   -moz-animation-fill-mode: both;
  177.   -o-animation-fill-mode: both;
  178.   -ms-animation-fill-mode: both;
  179.   animation-fill-mode: both;
  180.   -webkit-animation-duration: 1s;
  181.   -moz-animation-duration: 1s;
  182.   -o-animation-duration: 1s;
  183.   -ms-animation-duration: 1s;
  184.   animation-duration: 1s;
  185. }
  186.  
  187. #pinperu{
  188.   width: 15px;
  189.   height: 15px;
  190.   -webkit-border-radius: 50% 50% 50% 0;
  191.   border-radius: 50% 50% 50% 0;
  192.   background: #abbe0c;
  193.   margin-top:-45px;
  194.   margin-left:55px;
  195.   -webkit-transform: rotate(-45deg);
  196.   -moz-transform: rotate(-45deg);
  197.   -o-transform: rotate(-45deg);
  198.   -ms-transform: rotate(-45deg);
  199.   transform: rotate(-45deg);
  200.   -webkit-animation-name: bounce;
  201.   -moz-animation-name: bounce;
  202.   -o-animation-name: bounce;
  203.   -ms-animation-name: bounce;
  204.   animation-name: bounce;
  205.   -webkit-animation-fill-mode: both;
  206.   -moz-animation-fill-mode: both;
  207.   -o-animation-fill-mode: both;
  208.   -ms-animation-fill-mode: both;
  209.   animation-fill-mode: both;
  210.   -webkit-animation-duration: 1s;
  211.   -moz-animation-duration: 1s;
  212.   -o-animation-duration: 1s;
  213.   -ms-animation-duration: 1s;
  214.   animation-duration: 1s;
  215. }
  216.  
  217. #pinecuador{
  218.   width: 15px;
  219.   height: 15px;
  220.   -webkit-border-radius: 50% 50% 50% 0;
  221.   border-radius: 50% 50% 50% 0;
  222.   background: #681189;
  223.   margin-top:-45px;
  224.   margin-left:42px;
  225.   -webkit-transform: rotate(-45deg);
  226.   -moz-transform: rotate(-45deg);
  227.   -o-transform: rotate(-45deg);
  228.   -ms-transform: rotate(-45deg);
  229.   transform: rotate(-45deg);
  230.   -webkit-animation-name: bounce;
  231.   -moz-animation-name: bounce;
  232.   -o-animation-name: bounce;
  233.   -ms-animation-name: bounce;
  234.   animation-name: bounce;
  235.   -webkit-animation-fill-mode: both;
  236.   -moz-animation-fill-mode: both;
  237.   -o-animation-fill-mode: both;
  238.   -ms-animation-fill-mode: both;
  239.   animation-fill-mode: both;
  240.   -webkit-animation-duration: 1s;
  241.   -moz-animation-duration: 1s;
  242.   -o-animation-duration: 1s;
  243.   -ms-animation-duration: 1s;
  244.   animation-duration: 1s;
  245. }
  246.  
  247. #pincolombia{
  248.   width: 15px;
  249.   height: 15px;
  250.   -webkit-border-radius: 50% 50% 50% 0;
  251.   border-radius: 50% 50% 50% 0;
  252.   background: #c8290a;
  253.   margin-top:-40px;
  254.   margin-left:65px;
  255.   -webkit-transform: rotate(-45deg);
  256.   -moz-transform: rotate(-45deg);
  257.   -o-transform: rotate(-45deg);
  258.   -ms-transform: rotate(-45deg);
  259.   transform: rotate(-45deg);
  260.   -webkit-animation-name: bounce;
  261.   -moz-animation-name: bounce;
  262.   -o-animation-name: bounce;
  263.   -ms-animation-name: bounce;
  264.   animation-name: bounce;
  265.   -webkit-animation-fill-mode: both;
  266.   -moz-animation-fill-mode: both;
  267.   -o-animation-fill-mode: both;
  268.   -ms-animation-fill-mode: both;
  269.   animation-fill-mode: both;
  270.   -webkit-animation-duration: 1s;
  271.   -moz-animation-duration: 1s;
  272.   -o-animation-duration: 1s;
  273.   -ms-animation-duration: 1s;
  274.   animation-duration: 1s;
  275. }
  276.  
  277. #pinvenezuela{
  278.   width: 15px;
  279.   height: 15px;
  280.   -webkit-border-radius: 50% 50% 50% 0;
  281.   border-radius: 50% 50% 50% 0;
  282.   background: #21ead9;
  283.   margin-top:-30px;
  284.   margin-left:95px;
  285.   -webkit-transform: rotate(-45deg);
  286.   -moz-transform: rotate(-45deg);
  287.   -o-transform: rotate(-45deg);
  288.   -ms-transform: rotate(-45deg);
  289.   transform: rotate(-45deg);
  290.   -webkit-animation-name: bounce;
  291.   -moz-animation-name: bounce;
  292.   -o-animation-name: bounce;
  293.   -ms-animation-name: bounce;
  294.   animation-name: bounce;
  295.   -webkit-animation-fill-mode: both;
  296.   -moz-animation-fill-mode: both;
  297.   -o-animation-fill-mode: both;
  298.   -ms-animation-fill-mode: both;
  299.   animation-fill-mode: both;
  300.   -webkit-animation-duration: 1s;
  301.   -moz-animation-duration: 1s;
  302.   -o-animation-duration: 1s;
  303.   -ms-animation-duration: 1s;
  304.   animation-duration: 1s;
  305. }
  306. /*Fin de Mapa Interactivo*/
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!