Advertisement
Guest User

Transition Delays Ex 3

a guest
Mar 27th, 2014
104
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.60 KB | None | 0 0
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  3. <head>
  4. <title>{Title}</title>
  5. <link rel="shortcut icon" href="{Favicon}">
  6. <link rel="alternate" type="application/rss+xml" href="{RSS}">
  7.  
  8. <!---
  9.  
  10.  
  11. 888 8888888 888b d888 8888888888 .d8888b.
  12. 888 888 8888b d8888 888 d88P Y88b
  13. 888 888 88888b.d88888 888 Y88b.
  14. 888 888 888Y88888P888 8888888 "Y888b.
  15. 888 888 888 Y888P 888 888 "Y88b.
  16. 888 888 888 Y8P 888 888 "888
  17. 888 888 888 " 888 888 Y88b d88P
  18. 88888888 8888888 888 888 8888888888 "Y8888P"
  19.  
  20. --->
  21.  
  22.  
  23. <style type="text/css">
  24.  
  25.  
  26.  
  27.  
  28.  
  29. #credit {
  30. bottom:3px;
  31. position:fixed;
  32. right:10px;
  33. float:right;
  34. font-family:calibri;
  35. color:black;
  36. font-size:9px;
  37. letter-spacing:1px;
  38. text-transform:uppercase;
  39. padding:5px;
  40.  
  41. }
  42.  
  43. #credit a {
  44. color:black;
  45. background-color:white;
  46. padding:5px;
  47. -webkit-transition-duration:.8s;
  48. -moz-transition-duration:.8s;
  49. -o-transition-duration:.8s;
  50. -ms-transition-duration:.8s;
  51. }
  52.  
  53. #credit a:hover {
  54. color:white;
  55. background-color:#00bdb3;
  56. }
  57.  
  58.  
  59. #content {
  60. width:250px;
  61. left:50%;
  62. margin-left:-165px;
  63. position:fixed;
  64. height:140px;
  65. padding:15px;
  66. background-color:black;
  67. font-family:Helvetica;
  68. text-transform:uppercase;
  69. letter-spacing:10px;
  70. color:white;
  71. font-size:25px;
  72. padding-top:100px;
  73. font-weight:100;
  74. text-align:center;
  75. top:50%;
  76. margin-top:-150px;
  77. transition-delay:2s;
  78. -webkit-transition-delay:2s;
  79. transition-duration:1s;
  80. -webkit-transition-duration:1s;
  81. -moz-transition-duration:1s;
  82. -o-transition-duration:1s;
  83. -ms-transition-duration:1s;
  84. }
  85.  
  86. #content:hover {
  87. transition-delay:0s;
  88. -webkit-transition-delay:0s;
  89. background-color:#00b3bd;
  90. -webkit-transform:scale(2) rotate(360deg);
  91. -moz-transform:scale(2) rotate(360deg);
  92. -ms-transform:scale(2) rotate(360deg);
  93. -o-transform:scale(2) rotate(360deg);
  94. }
  95.  
  96.  
  97. </style>
  98.  
  99. </head>
  100. <body>
  101.  
  102. <div id="content">Example</div>
  103.  
  104. <div id="credit"><a href="http://ofcuteboys.tumblr.com/">ofcuteboys</a></div>
  105.  
  106.  
  107. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement