pastebin - collaborative debugging

pastebin is a collaborative debugging tool allowing you to share and modify code snippets while chatting on IRC, IM or a message board.

This site is developed to XHTML and CSS2 W3C standards. If you see this paragraph, your browser does not support those standards and you need to upgrade. Visit WaSP for a variety of options.

HTML jpowermacg4 - paste collaborative debugging tool

Posted by jpowermacg4 on Thu 4th Apr 17:09 (modification of post by view diff)
view | download | new post

  1. <div class="container">
  2.   <div class="red-dot"></div>
  3.   <div class="shockwave"></div>
  4. </div>
  5.  
  6.  
  7. .container {
  8.   position: relative;
  9.   width: 200px;
  10.   height: 200px;
  11. }
  12.  
  13. .red-dot {
  14.   position: absolute;
  15.   width: 20px;
  16.   height: 20px;
  17.   background-color: red;
  18.   border-radius: 50%;
  19.   top: 50%;
  20.   left: 50%;
  21.   transform: translate(-50%, -50%);
  22. }
  23.  
  24. .shockwave {
  25.   position: absolute;
  26.   width: 20px;
  27.   height: 20px;
  28.   border: 2px solid rgba(255, 0, 0, 0.5);
  29.   border-radius: 50%;
  30.   top: 50%;
  31.   left: 50%;
  32.   transform: translate(-50%, -50%);
  33.   animation: shockwave-animation 2s linear infinite;
  34. }
  35.  
  36. @keyframes shockwave-animation {
  37.   0% {
  38.     width: 20px;
  39.     height: 20px;
  40.     opacity: 1;
  41.   }
  42.   100% {
  43.     width: 200px;
  44.     height: 200px;
  45.     opacity: 0;
  46.   }
  47. }

Submit a correction or amendment below (click here to make a fresh posting)
After submitting an amendment, you'll be able to view the differences between the old and new posts easily.

Syntax highlighting:

To highlight particular lines, prefix each line with @@


Remember me