1. <body>
  2. <div id="texture_1" class="section">
  3. <div class="inner">
  4. <h1>texture1</h1>
  5. <p><a href="http://lil-plunkie.deviantart.com/art/Crumpled-Paper-Texture-166956233" target="_blank">Crumpled_Paper_Texture.jpg</a></p>
  6. </div>
  7. </div>
  8. <div id="texture_2" class="section">
  9. <div class="inner">
  10. <h1>texture2</h1>
  11. <p><a href="http://lostandtaken.com/blog/2012/1/4/30-free-seamless-background-textures.html" target="_blank">seamlesstexture1_500.jpg</a></p>
  12. </div>
  13. </div>
  14. <div id="texture_3" class="section">
  15. <div class="inner">
  16. <h1>texture3</h1>
  17. <p><a href="http://lostandtaken.com/blog/2012/1/4/30-free-seamless-background-textures.html" target="_blank">seamlesstexture6_500.jpg</a></p>
  18. </div>
  19. </div>
  20. <div id="texture_4" class="section">
  21. <div class="inner">
  22. <h1>texture4</h1>
  23. <p><a href="http://crazykira-resources.deviantart.com/art/Patterns-36-149418100" target="_blank">crazykira-resources_016.jpg</a></p>
  24. </div>
  25. </div>
  26. <div id="texture_5" class="section">
  27. <div class="inner">
  28. <h1>texture5</h1>
  29. <p><a href="http://crazykira-resources.deviantart.com/art/Patterns-36-149418100" target="_blank">crazykira-resources_017.jpg</a></p>
  30. </div>
  31. </div>
  32. </body>
  1. body {
  2. width: 100%;
  3. height: 100%;
  4. margin: 0;
  5. color: #fff;
  6. font-family: "Heiti SC";
  7. }
  8. h1 {
  9. margin: 0;
  10. padding: 1em 0 0;
  11. }
  12. p {
  13. margin: 10px 0;
  14. font-size: 10px;
  15. }
  16. a {
  17. color: #fff;
  18. }
  19. a:hover {
  20. text-decoration: none;
  21. }
  22. .section {
  23. float: left;
  24. width: 20%;
  25. -webkit-animation: gradation 20s linear infinite;
  26. animation: gradation 20s linear infinite;
  27. }
  28. #texture_1 {
  29. background: #348b41 url(../img/wrinkled_paper.png) center center;
  30. -webkit-animation-delay: -20s;
  31. animation-delay: -20s;
  32. }
  33. #texture_2 {
  34. background: #744180 url(../img/seamlesstexture1.png) center center;
  35. -webkit-animation-delay: -16s;
  36. animation-delay: -16s;
  37. }
  38. #texture_3 {
  39. background: #ea4141 url(../img/seamlesstexture6.png) center center;
  40. -webkit-animation-delay: -12s;
  41. animation-delay: -12s;
  42. }
  43. #texture_4 {
  44. background: #ff8b41 url(../img/crazykira-resources_016.png) center center;
  45. -webkit-animation-delay: -8s;
  46. animation-delay: -8s;
  47. }
  48. #texture_5 {
  49. background: #1b5f97 url(../img/crazykira-resources_017.png) center center;
  50. -webkit-animation-delay: -4s;
  51. animation-delay: -4s;
  52. }
  53. .inner {
  54. height: 100vh;
  55. border-right: 1px rgba(255,255,255,.3) dashed;
  56. text-align: center;
  57. }
  58. #texture_5 .inner {
  59. border-right: 0;
  60. }
  61. @-webkit-keyframes gradation {
  62. 0% { background-color: #348b41; }
  63. 18% { background-color: #348b41; }
  64. 20% { background-color: #744180; }
  65. 38% { background-color: #744180; }
  66. 40% { background-color: #ea4141; }
  67. 58% { background-color: #ea4141; }
  68. 60% { background-color: #ff8b41; }
  69. 78% { background-color: #ff8b41; }
  70. 80% { background-color: #1b5f97; }
  71. 98% { background-color: #1b5f97; }
  72. 100% { background-color: #348b41; }
  73. }
  74. @keyframes gradation {
  75. 0% { background-color: #348b41; }
  76. 18% { background-color: #348b41; }
  77. 20% { background-color: #744180; }
  78. 38% { background-color: #744180; }
  79. 40% { background-color: #ea4141; }
  80. 58% { background-color: #ea4141; }
  81. 60% { background-color: #ff8b41; }
  82. 78% { background-color: #ff8b41; }
  83. 80% { background-color: #1b5f97; }
  84. 98% { background-color: #1b5f97; }
  85. 100% { background-color: #348b41; }
  86. }