UZFOR
developer 
  1. <!DOCTYPE html>
  4. <meta charset="utf-8">
  5. <title>TO'P</title>
  6. <style type="text/css">
  7. .phdr{
  8. border: 1px solid red;
  9. width: 90%;
  10. height: 600px;
  11. background-color: #a2f688;
  12. margin: 5px auto;
  13. position: relative;
  14. }
  15. /*.top{
  16. border: 0px solid red;
  17. background-color: black;
  18. width: 40px;
  19. height: 40px;
  20. border-radius: 100%;
  21. position: absolute;
  22. left: 10px;
  23. bottom: 5px;
  24. }*/
  25. .ustun{
  26. border: 0px solid black;
  27. width: 30px;
  28. height: 400px;
  29. background-color: black;
  30. position: absolute;
  31. right: 0px;
  32. bottom: 0px;
  33. }
  34. .qosqon{
  35. border: 0px solid black;
  36. width: 100px;
  37. height: 100px;
  38. background-color: black;
  39. position: absolute;
  40. right: 30px;
  41. bottom: 300px;
  42. }
  43. .shit{
  44. border: 2px solid red;
  45. width: 100px;
  46. height: 50px;
  47. border-radius: 100%;
  48. position: absolute;
  49. right: 130px;
  50. bottom: 330px; 
  51.  
  52.  
  53. }
  54. .top{
  55. border: 0px solid red;
  56. background-color: black;
  57. width: 40px;
  58. height: 40px;
  59. border-radius: 100%;
  60. position: absolute;
  61. left: 10px;
  62. bottom: 150px;
  63. animation-name: top;
  64. animation-duration: 4s;
  65. animation-delay: 3s;
  66. animation-fill-mode: forwards;
  67. animation-iteration-count: infinite;
  68.  
  69. }
  70.  
  71. @keyframes top{
  72. 0%{left: 10px; bottom: 150px;}
  73. 10%{left: 10px; bottom: 3px;}
  74. 15%{left: 10px; bottom: 150px;}
  75. 20%{left: 10px; bottom: 3px;}
  76. 50%{left: 970px; bottom: 550px;}
  77. 70%{left: 980px; bottom: 3px;}
  78. 80%{left: 980px; bottom: 150px;}
  79. 90%{left: 980px; bottom: 3px;}
  80. 100%{left: 10px; bottom: 3px;}
  81. }
  82. .tag{
  83. border: 3px dotted black;
  84. width: 40px;
  85. height: 15px;
  86. border-radius: 10px;
  87. position: absolute;
  88. left: 10px;
  89. bottom: 135px;
  90. animation: tag 3s ease-in-out 1 0s;
  91. animation-fill-mode: forwards;
  92.  
  93.  
  94. }
  95. @keyframes tag{
  96. from{left: 10px; bottom: 135px;}
  97. to{left: 50px; bottom: 135px;}
  98. }
  99.  
  101. </head>
  103. <div class="phdr">
  104. <div class="top"></div>
  105. <div class="tag"></div>
  106. <div class="ustun"></div>
  107. <div class="qosqon"></div>
  108. <div class="shit"></div>
  109. </div>
  110.  
  111. </body>
  112. </html>
2 Mavzuga qaytish