За последние 24 часа нас посетили 21606 программистов и 1020 роботов. Сейчас ищут 802 программиста ...

Анимация ШИМ сигнала

Тема в разделе "HTML и CSS", создана пользователем Dimon2x, 2 июл 2024.

  1. Dimon2x

    Dimon2x Старожил

    С нами с:
    26 фев 2012
    Сообщения:
    2.204
    Симпатии:
    184
    Сделал анимацию, есть ли способ по лучше?

    https://codepen.io/DivMan/pen/pomMLbv

    HTML:
    1. <div class="block">
    2.     <div class="line"></div>
    3.     <div class="line2"></div>
    4.     <div class="line3"></div>
    5.     <div class="line4"></div>
    6.     <div class="line5"></div>
    7. </div>
    8.  
    9.  
    10. <div class="block block2">
    11.     <div class="line"></div>
    12.     <div class="line2"></div>
    13.     <div class="line3"></div>
    14.     <div class="line4"></div>
    15.     <div class="line5"></div>
    16. </div>
    17.  
    18. <div class="block block3">
    19.     <div class="line"></div>
    20.     <div class="line2"></div>
    21.     <div class="line3"></div>
    22.     <div class="line4"></div>
    23.     <div class="line5"></div>
    24. </div>
    25.  
    26. <div class="block block4">
    27.     <div class="line"></div>
    28.     <div class="line2"></div>
    29.     <div class="line3"></div>
    30.     <div class="line4"></div>
    31.     <div class="line5"></div>
    32. </div>
    33.  
    34. <div class="block block5">
    35.     <div class="line"></div>
    36.     <div class="line2"></div>
    37.     <div class="line3"></div>
    38.     <div class="line4"></div>
    39.     <div class="line5"></div>
    40. </div>
    Код (CSS):
    1. .block, block2, block3, block4, block5  {
    2.     position: relative;
    3.     top: 10;
    4.     left: 10px;
    5. }
    6.  
    7. .block2 {left: 130px;}
    8. .block3 {left: 250px;}
    9. .block4 {left: 370px;}
    10. .block5 {left: 490px;}
    11.  
    12. .line {
    13.     position: absolute;
    14.     top: 20px;
    15.     bottom: 0;
    16.     border-top: 2px solid green;
    17.     left: 20px;
    18.     width: 20px;
    19.     transform-origin: left;
    20.     animation: center-animate 2s ease infinite alternate;  
    21. }
    22.    
    23. .line2 {
    24.     position: absolute;
    25.     top: 20px;
    26.     bottom: 0;
    27.     border-left: 2px solid green;
    28.     left: 40px;
    29.     height:80px;  
    30.     transform-origin: left;
    31.     animation: center-animate2 2s ease infinite alternate;  
    32. }
    33.    
    34. .line3{
    35.     position: absolute;
    36.     top: 100px;
    37.     bottom: 0;
    38.     border-top: 2px solid green;
    39.     left: 40px;
    40.     width: 100px;  
    41. }
    42.    
    43. .line4 {
    44.     position: absolute;
    45.     top: 20px;
    46.     bottom: 0;
    47.     border-left: 2px solid green;
    48.     left: 138px;
    49.     height:80px;
    50. }
    51.    
    52. /*жёсткий костыль*/
    53. .line5{
    54.     position: absolute;
    55.     top: 100px;
    56.     bottom: 0;
    57.     border-top: 2px solid white;
    58.     left: 35px;
    59.     width: 5px;
    60.     transform-origin: 0 0;
    61.     animation: center-animate5 2s ease infinite alternate;  
    62. }
    63.  
    64. @keyframes center-animate {
    65.     0% {
    66.         transform: scaleX(5);
    67.     }
    68.     100% {
    69.         transform: scaleX(1);
    70.     }
    71. }
    72.    
    73. @keyframes center-animate2 {
    74.     0% {
    75.         transform: translateX(80px);
    76.     }
    77.     100% {
    78.         transform: translateX(0);
    79.     }
    80. }
    81.    
    82. @keyframes center-animate5 {
    83.     0% {
    84.         transform: scaleX(17);
    85.     }
    86.     100% {
    87.         transform: scaleX(1);
    88.     }
    89. }    
     
  2. Vladimir Kheifets

    Vladimir Kheifets Новичок

    С нами с:
    23 сен 2023
    Сообщения:
    319
    Симпатии:
    64
    Адрес:
    Бавария, Германия
    caiwinhn нравится это.
  3. [vs]

    [vs] Суперстар
    Команда форума Модератор

    С нами с:
    27 сен 2007
    Сообщения:
    10.555
    Симпатии:
    630
    Есть. Думаю, для начала нужно упросить верстку - разделять интервалы на блоки не нужно, проще работать с непрерывной последовательностью горизонтальных и вертикальных линий. В общем поигрался и получил следующее:

    HTML:
    1. <div class="container">
    2.   <div class="display">
    3.     <div class="line high"></div>
    4.     <div class="line swing"></div>
    5.     <div class="line low"></div>
    6.     <div class="line swing"></div>
    7.     <div class="line high"></div>
    8.     <div class="line swing"></div>
    9.     <div class="line low"></div>
    10.     <div class="line swing"></div>
    11.     <div class="line high"></div>
    12.     <div class="line swing"></div>
    13.     <div class="line low"></div>
    14.     <div class="line swing"></div>
    15.     <div class="line high"></div>
    16.     <div class="line swing"></div>
    17.     <div class="line low"></div>
    18.     <div class="line swing"></div>
    19.     <div class="line high"></div>
    20.     <div class="line swing"></div>
    21.     <div class="line low"></div>
    22.     <div class="line swing"></div>
    23.     <div class="line high"></div>
    24.     <div class="line swing"></div>
    25.     <div class="line low"></div>
    26.     <div class="line swing"></div>
    27.     <div class="line high"></div>
    28.     <div class="line swing"></div>
    29.     <div class="line low"></div>
    30.     <div class="line swing"></div>
    31.     <div class="line high"></div>
    32.     <div class="line swing"></div>
    33.     <div class="line low"></div>
    34.     <div class="line swing"></div>
    35.     <div class="line high"></div>
    36.     <div class="line swing"></div>
    37.   </div>
    38. </div>
    Код (CSS):
    1. .container {
    2.   background-color: black;
    3.   width: 600px;
    4.   height: 100px;
    5.   border: 1px blue solid;
    6.   overflow: hidden;
    7.   padding: 8px 0px;
    8. }
    9. .display {
    10.   background-color: #333;
    11.   height: 100px;
    12.   width: 2000px;
    13.   position: relative;
    14.   animation: drag 8s linear infinite;
    15. }
    16. .line {
    17.   background-color: #0A0;
    18.   float: left;
    19. }
    20. .high {
    21.   width: 98px;
    22.   height: 2px;
    23.   animation: high 4s linear alternate infinite;
    24. }
    25. .low {
    26.   margin-top: 98px;
    27.   width: 98px;
    28.   height: 2px;
    29. }
    30. .swing {
    31.   height: 100px;
    32.   width: 2px;
    33. }
    34. @keyframes high {
    35.     0% {
    36.         width: 100px;
    37.     }
    38.     50% {
    39.         width: 100px;
    40.     }
    41.     87.5% {
    42.         width: 50px;
    43.     }
    44.     100% {
    45.         width: 50px;
    46.     }
    47. }
    48. @keyframes drag {
    49.     0% {
    50.         left: 0px;
    51.     }
    52.     25% {
    53.         left: -200px;
    54.     }
    55.     56% {
    56.         left: -200px;
    57.     }
    58.     75% {
    59.         left: -600px;
    60.     }
    61.   100% {
    62.     left: -808px;
    63.   }
    64. }
    https://codepen.io/Vasil-Shpilchin/pen/WNqvOZJ

    В зацикленной анимации очень важно рассчитать время и движение так, чтобы к концу анимации общий вид возвращался к исходному.

    Еще вариант https://codepen.io/Vasil-Shpilchin/pen/gONpxKZ
     
    #3 [vs], 12 июл 2024 в 21:19
    Последнее редактирование: 12 июл 2024 в 22:35