Постепенное появление надписи

Постепенное появление надписи с помощью css

  1. Next
    Совместимость с XenForo:
    • XenForo 1.2
    • XenForo 1.3
    • XenForo 1.4
    • XenForo 1.5
    В шаблон EXTRA.CSS добавляем:

    Код:
    .WidgetFramework_WidgetRenderer_Users h3 {
      width: 16.5em;
      width: 25ch;
      display: inline-block;
      white-space: nowrap;
      overflow: hidden;
    -moz-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate;
    -webkit-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate;
    -ms-animation: typing 20s steps(30, end), blink-caret .5s step-end infinite alternate;
    }
    
    @-moz-keyframes typing { from { width: 0; } }
    @-moz-keyframes blink-caret { 50% { border-color: transparent; } }
    
    @-webkit-keyframes typing { from { width: 0; } }
    @-webkit-keyframes blink-caret { 50% { border-color: transparent; } }
    
    @-ms-keyframes typing { from { width: 0; } }
    @-ms-keyframes blink-caret { 50% { border-color: transparent; } }
    .WidgetFramework_WidgetRenderer_Stats h3 {
      background: rgba(0, 0, 0, 0) linear-gradient(to left, #FFE4E1 50%, #f0f7fc 50%) repeat scroll left bottom / 200% 100%;
      transition: all 1s ease 0s;
    }
    .WidgetFramework_WidgetRenderer_Stats h3:hover {
      background-position: right bottom;
    }
    Класс .WidgetFramework_WidgetRenderer_Users h3 можно заменить на любой другой.

    best.gif
Поделиться этой страницей в