Проекты с открытым исходным кодом > Other Open Source > Books/Manuals/Tutorials &&

В избранное Ответвления

OSCHINA-MIRROR/lhammer-You-need-to-know-css

Присоединиться к Gitlife

Откройте для себя и примите участие в публичных проектах с открытым исходным кодом с участием более 10 миллионов разработчиков. Приватные репозитории также полностью бесплатны :)

Присоединиться бесплатно

Клонировать/Скачать

blink.md 2.3 КБ

# Шебанг эффект

?> Введение: :point_right: [direction-анимации](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-direction)

Значения свойства `animation-direction`, которое принимает четыре значения, демонстрируются ниже с помощью анимации, которая меняется от `#FFFFFF` до `#b4a078` и повторяется трижды.

<div align="center"><img src="static/animation-direction.jpeg" width="60%" align="center"/></div><br />

<vuep template="#blink"></vuep>

<script v-pre type="text/x-template" id="blink">
<style>
  main {
    width: 100%; height: 329px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .main p, .main span {
    width: 388px;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 14px;
  }
  p:nth-of-type(1) {
    background-color: #f4f4f5;
    color: #909399;
    animation: 1s blink-normal infinite step-end;
  }
  p:nth-of-type(2) {
    background-color: #fdf6ec;
    color: #e6a23c;
    animation: .5s blink-alternate infinite;
    animation-direction: alternate;
  }
  p:nth-of-type(3) {
    background: #fef0f0;
    color: #f56c6c;
    animation: .5s blink-alternate infinite;
    animation-direction: alternate-reverse;
  }
  @keyframes blink-normal {
    50% {
      color: transparent;
    }
  }
  @keyframes blink-alternate {
    to {
      color: transparent;
    }
  }
</style>
<template>
  <main class="main">
    <span>animation-direction: По умолчанию <code>normal</code></span><p>info~</p>
    <span>animation-direction: Обратное <code>alternate</code></span><p>warning~ warning~</p>
    <span>animation-direction: Обратное чередование <code>alternate-reverse</code></span><p>error~ error~ error~</p>
  </main>
</template>
<script>
</script>
</script>

> Все переходы должны быть выполнены с использованием анимации

### Поддержка браузерами

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&amp;periods=future_1,current,past_1,past_2,past_3&amp;accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>

Копировать Редактировать Web IDE Исходные данные Просмотреть построчно История

Отправлено 10.03.2025 04:31 b50c8d4

Шебанг эффект

?> Введение: direction-анимации

Значения свойства animation-direction, которое принимает четыре значения, демонстрируются ниже с помощью анимации, которая меняется от #FFFFFF до #b4a078 и повторяется трижды.

<script v-pre type="text/x-template" id="blink"> <style> main { width: 100%; height: 329px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .main p, .main span { width: 388px; padding: 3px 10px; border-radius: 5px; font-size: 14px; } p:nth-of-type(1) { background-color: #f4f4f5; color: #909399; animation: 1s blink-normal infinite step-end; } p:nth-of-type(2) { background-color: #fdf6ec; color: #e6a23c; animation: .5s blink-alternate infinite; animation-direction: alternate; } p:nth-of-type(3) { background: #fef0f0; color: #f56c6c; animation: .5s blink-alternate infinite; animation-direction: alternate-reverse; } @keyframes blink-normal { 50% { color: transparent; } } @keyframes blink-alternate { to { color: transparent; } } </style> animation-direction: По умолчанию normal

info~

animation-direction: Обратное alternate

warning~ warning~

animation-direction: Обратное чередование alternate-reverse

error~ error~ error~

<script> </script> </script>

Все переходы должны быть выполнены с использованием анимации

Поддержка браузерами

<iframe src="https://caniuse.bitsofco.de/embed/index.html?feat=css-animation&periods=future_1,current,past_1,past_2,past_3&accessible-colours=false" frameborder="0" width="100%" height="436px"></iframe>

Опубликовать ( 0 )

Вы можете оставить комментарий после Вход в систему

1

https://api.gitlife.ru/oschina-mirror/lhammer-You-need-to-know-css.git

git@api.gitlife.ru:oschina-mirror/lhammer-You-need-to-know-css.git

oschina-mirror

lhammer-You-need-to-know-css

lhammer-You-need-to-know-css

master