Инь Ян ☯︎ символика

Коллекции
Apc
Apc
21 / 19✓✕21896


Белое и Чёрное, День и Ночь, Свет и Тьма, Солнце и Луна, Мужское и Женское... Равновесие, Гармония, Баланс... Бла-бла-бла... Клёвый символ кароч :cool:
Нет, и навряд ли когда-то появятся в базе shikimori


Кунг-фу Панда:
1044x15631280x19201280x19201280x1920

Тайцзи Панда:
852x480
и
852x480852x480

Ещё одна Панда
Создательница ☯︎-сфер —
1920x18181920x10801920x1080
( англ. Tamatsukuri Misumaru, яп. 玉造 魅須丸 )
Юань Лун:
1920x10801920x1080 (правда использовал шкатулку один из его телохранителей)
и
1920x10801920x1080


Бессмертие: Величественные горы и реки:
693x10781920x10801920x1080


Wuthering Waves:
225x350
youtube
( w i k i )


My Disciples Are All Big Villains:
1300x1762 ( w i k i )
и его ученики

Его Преподобие ( англ. Metropolitan Reverence, кит. 都市至尊 ):
400x533


Honkai: Star Rail | Myriad Celestia Trailers:
1536x864


Yao Shen Ji:
1920x1080
( w i k i )

Новая легенда о Момотаро:
640x480


Saiyuuki Gaiden: остальные члены Western Army First Unit

Фантазия о Троецарствии | Духовность небес: Rashokujo

The King of Fighters:
650x11131058x1920


Cyberbots | Fullmetal Madness:
312x5191920x1398
( w i k i )

Странная клетка:
250x300


DOLLS ANTIQUE ~Ningyou-tachi no Yakata~:
256x300640x480


Kegareta Eiyuu:
1024x768
( w i k i )

Metamor Fantasy ( яп. メタモルファンタジー ):
180x2701200x900


Yokoshima!! Pandemic ( яп. 邪!! ぱんでみっく ):
1600x1200800x600800x600


Idle Angels:
800x6251920x1080


Божественная машина Демонбэйн:
150x300
( w i k i )

Shining Blade (общая вселенная с Shining Tears X Wind):
643x1000
( w i k i )


Возможно, кого-то смутит, что в названии чёрная женская пассивная Инь впереди белого мужского активного Ян. Полагаю, тут дело может быть в том, что у нас читается слева направо, а в китайском — наоборот, справа налево. И видимо из-за того, что мужской Ян встал в конце, весь "инь-ян" стал мужского рода. Однако само написание "инь-ян" не совсем верное. Мы ведь пишем "добро и зло", а не "добро-зло". Так что Инь и Ян — это не оно, она или он, а они. Вместе у них вообще рода нет, только множественное число.
[ИНТЕРАКТИВ]
Испытаем фэншуй на Шикимори. Ваша задача — удерживать равновесие между Добром и Злом. Если, на рубеже весны и лета, лайки👍 и дизлайки👎🏽 у этой коллекции окажутся в идеальном балансе, то в награду Я выложу здесь украшение для профиля — ☯︎-анимацию из чистейшего CSS, без bb-примесей!
РЕЗУЛЬТАТЫ ИНТЕРАКТИВА
⠀
Попытка №1: с результатом 16+ / 16- испытание пройдено! 1898x924 Надеюсь, никто не перенервничал из-за приза, на создание которого у меня ушёл +/- час)

Ровнял на глаз, качества в других браузерах/разрешениях не гарантирую. У меня нормуль смотрится [ firefox / 1920 x 1080 ]
Инь Ян ☯︎ анимация
/* Инь Ян ☯︎ анимация */
#profiles_show .l-page { margin-top: 100px; }
#profiles_show .profile-head:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9998;
  left: 1173px;/* shiki-theme 1149px */
  top: -28px;/* shiki-theme -44px */
  width: 48px;
  height: 24.5px;
  background: white;
  border-color: black;
  border-style: solid;
  border-width: 3px 3px 26px 3px;
  border-radius: 50%;
  animation: 3s Yin_Yang linear infinite;
}
#profiles_show .l-page:after {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1187.5px;
  top: -13.5px;
  width: 6px;
  height: 6px;
  background: white;
  border: 9px solid black;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yin linear infinite;
}
#profiles_show .l-page:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1187.5px;
  top: -13.5px;
  width: 6px;
  height: 6px;
  background: black;
  border: 9px solid white;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yang linear infinite;
}
@keyframes Yin_Yang {
  to { transform: rotate(360deg); }
}
@keyframes Yin {
from { transform: rotate(0deg)
       translate(-12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(-12px)
       rotate(-360deg);
     }
}
@keyframes Yang {
from { transform: rotate(0deg)
       translate(12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(12px)
       rotate(-360deg);
     }
}
Инь Ян ☯︎ анимация (рамка)
/* Инь Ян ☯︎ анимация */
#profiles_show .l-page {
  margin-top: 100px;
  border: 3px solid black;
}
#profiles_show .profile-head:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9998;
  left: 1170px;/* shiki-theme 1146px */
  top: -25px;/* shiki-theme -42px */
  width: 48px;
  height: 24.5px;
  background: white;
  border-color: black;
  border-style: solid;
  border-width: 3px 3px 26px 3px;
  border-radius: 50%;
  animation: 3s Yin_Yang linear infinite;
}
#profiles_show .l-page:after {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1184.5px;
  top: -11px;
  width: 6px;
  height: 6px;
  background: white;
  border: 9px solid black;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yin linear infinite;
}
#profiles_show .l-page:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1184.5px;
  top: -11px;
  width: 6px;
  height: 6px;
  background: black;
  border: 9px solid white;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yang linear infinite;
}
@keyframes Yin_Yang {
  to { transform: rotate(360deg); }
}
@keyframes Yin {
from { transform: rotate(0deg)
       translate(-12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(-12px)
       rotate(-360deg);
     }
}
@keyframes Yang {
from { transform: rotate(0deg)
       translate(12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(12px)
       rotate(-360deg);
     }
}


Пока ждал результатов, совместил ☯︎-анимацию со своими прошлогодними недоделками.
Инь Ян ☯︎ анимация + Волна Ян
/* Волна Ян */
body {
  background: black;
  color: white;
}
.l-page {
  background: transparent;
  mix-blend-mode: difference;
  box-shadow: 0px 0px 0px 5000px white;
}
.smiley {
  background: white;
  height: 40px;
}
/*img.smiley[title=':roll:'] {
  height: 40px;
  content: url('//fl.litclub.net/u/l/lurical/a/65/predstv.gor9.gif');
  padding: 0 2px 0 2px;
}*/
body:before {
  content: ''; pointer-events: none;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 0;
  background: white;
  animation: Wave_Yang 30s linear infinite;
}
@keyframes Wave_Yang {
from { right: 100vw; }
  to { right: -100vw; }
}
/* Инь Ян ☯︎ анимация */
#profiles_show .l-page { margin-top: 100px; }
#profiles_show .profile-head:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9998;
  left: 1173px;/* shiki-theme 1149px */
  top: -28px;/* shiki-theme -44px */
  width: 48px;
  height: 24.5px;
  background: white;
  border-color: black;
  border-style: solid;
  border-width: 3px 3px 26px 3px;
  border-radius: 50%;
  animation: 3s Yin_Yang linear infinite;
}
#profiles_show .l-page:after {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1187.5px;
  top: -13.5px;
  width: 6px;
  height: 6px;
  background: white;
  border: 9px solid black;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yin linear infinite;
}
#profiles_show .l-page:before {
  content: '';
  position: absolute; z-index: 9999;
  left: 1187.5px;
  top: -13.5px;
  width: 6px;
  height: 6px;
  background: black;
  border: 9px solid white;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yang linear infinite;
}
@keyframes Yin_Yang {
  to { transform: rotate(360deg); }
}
@keyframes Yin {
from { transform: rotate(0deg)
       translate(-12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(-12px)
       rotate(-360deg);
     }
}
@keyframes Yang {
from { transform: rotate(0deg)
       translate(12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(12px)
       rotate(-360deg);
     }
}
Инь Ян ☯︎ анимация (рамка) + Волна Ян
/* Волна Ян */
body {
  background: black;
  color: white;
}
.l-page {
  background: transparent;
  mix-blend-mode: difference;
  box-shadow: 0px 0px 0px 5000px black;
}
.smiley {
  background: white;
  height: 40px;
}
/*img.smiley[title=':roll:'] {
  height: 40px;
  content: url('//fl.litclub.net/u/l/lurical/a/65/predstv.gor9.gif');
  padding: 0 2px 0 2px;
}*/
body:before {
  content: ''; pointer-events: none;
  height: 100vh;
  width: 100vw;
  position: fixed;
  z-index: 0;
  background: white;
  animation: Wave_Yang 30s linear infinite;
}
@keyframes Wave_Yang {
from { right: 100vw; }
  to { right: -100vw; }
}
/* Инь Ян ☯︎ анимация */
.l-page { border: 3px solid white; }
#profiles_show .l-page { margin-top: 100px; }
#profiles_show .profile-head:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9998;
  left: 1170px;/* shiki-theme 1146px */
  top: -25px;/* shiki-theme -42px */
  width: 48px;
  height: 24.5px;
  background: black;
  border-color: white;
  border-style: solid;
  border-width: 3px 3px 26px 3px;
  border-radius: 50%;
  animation: 3s Yin_Yang linear infinite;
}
#profiles_show .l-page:after {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1184.5px;
  top: -11px;
  width: 6px;
  height: 6px;
  background: black;
  border: 9px solid white;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yin linear infinite;
}
#profiles_show .l-page:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1184.5px;
  top: -11px;
  width: 6px;
  height: 6px;
  background: white;
  border: 9px solid black;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yang linear infinite;
}
@keyframes Yin_Yang {
  to { transform: rotate(360deg); }
}
@keyframes Yin {
from { transform: rotate(0deg)
       translate(-12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(-12px)
       rotate(-360deg);
     }
}
@keyframes Yang {
from { transform: rotate(0deg)
       translate(12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(12px)
       rotate(-360deg);
     }
}
Инь Ян ☯︎ анимация (рамка) + Волна Инь
/* Волна Инь */
body { background: white; }
body:before {
content: ''; pointer-events: none;
position: fixed; z-index: 9999;
height: 100vh;
background: white; mix-blend-mode: difference;
animation: Wave_Yin 15s ease-in infinite;
}
@keyframes Wave_Yin {
0% { width: 0%; }
80% { width: 100%; filter: opacity(100%); }
100% { width: 100%; filter: opacity(0%); }
}
/* Инь Ян ☯︎ анимация */
#profiles_show .l-page {
  margin-top: 100px;
  border: 3px solid black;
}
#profiles_show .profile-head:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9998;
  left: 1170px;/* shiki-theme 1146px */
  top: -25px;/* shiki-theme -42px */
  width: 48px;
  height: 24.5px;
  background: white;
  border-color: black;
  border-style: solid;
  border-width: 3px 3px 26px 3px;
  border-radius: 50%;
  animation: 3s Yin_Yang linear infinite;
}
#profiles_show .l-page:after {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1184.5px;
  top: -11px;
  width: 6px;
  height: 6px;
  background: white;
  border: 9px solid black;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yin linear infinite;
}
#profiles_show .l-page:before {
  content: ''; pointer-events: none;
  position: absolute; z-index: 9999;
  left: 1184.5px;
  top: -11px;
  width: 6px;
  height: 6px;
  background: black;
  border: 9px solid white;
  box-sizing: content-box;
  border-radius: 50%;
  animation: 3s Yang linear infinite;
}
@keyframes Yin_Yang {
  to { transform: rotate(360deg); }
}
@keyframes Yin {
from { transform: rotate(0deg)
       translate(-12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(-12px)
       rotate(-360deg);
     }
}
@keyframes Yang {
from { transform: rotate(0deg)
       translate(12px)
       rotate(0deg);
     }
  to { transform: rotate(360deg)
       translate(12px)
       rotate(-360deg);
     }
}


Кто не в курсе, как всё это устанавливается — вот инструкция.

⠀⠀⠀Совместимость со стилями «E-design» и «shiki-theme» (в том виде, как приведено в примере):
На «E-design» легло, как по дефолту; Я аж удивился. А вот пользователям «shiki-theme» придётся поменять пару координат — Я оставил в коде пометки, где и на какие именно.
Тем же из вас, у кого стоят свои собственные примочки, должно быть не хуже меня известно о конфликте повторяющихся свойств у одинаковых селекторов.

⠀⠀⠀
Соавтор:
тихия_покоятихия_покоя
 
аниме/манга 🇯🇵 Япония
дунхуа/маньхуа 🇨🇳 Китай
манхва 🇰🇷 Южная Корея
Эта коллекция полезна или интересна?
Да
Нет
Комментарии
Скрыть 76 комментариев
Показать 76 комментариев
Загрузить ещё 20 из 76 комментариев
тихия_покоя
тихия_покоя#
1304x278А имена-то японские! И мангака японец. И аниме это
@Apc
Apc
Apc#
@тихия_покоя, 1920x1080

Наткнулся на ещё кого-то.
Guonian Zhe Lianmeng: Xun Long JiНовогодний альянс: В поисках дракона
А это вообще кто? Выглядит как Changshou LiЧаншоу Ли, но глаза голубые, а не карие.

Ben Yue Fu YanПолёт на Луну на банкет

тихия_покоятихия_покоя
Так а если сеструха юзает, то она третья, получается?
Так это она и есть 1647x925, получается у неё ☯︎ на одежде есть, так что она в любом случае подходит. И у её деда тоже
@тихия_покоя
тихия_покоя
тихия_покоя#
@Apc, тогда Ходячий замок не аниме. Я уже перекинула их в аниме. Сори. Тогда может все-таки сделать категорию фьюжн кантри, о которой я говорила? И Маринетт туда же уйдет. Она ж француженка вообще.
Альянс и банкеты - это традиционные китайские праздничные поздравления.
@Apc
Apc
Apc#
@тихия_покоя, Да не, это аниме (не дунхуа), но не по манге а по маньхуа. Вот Я их в оба раздела и засунул.
тихия_покоя
тихия_покоя#
@Apc, аааааа, то есть их обратно перекинуть :Cry3: как же я не люблю японцев. Ой, я это вслух сказала
@Apc
тихия_покоя
тихия_покоя#
Да го их в фьюжн запихнем, они эти японские имена.... стоп, а вдруг это ассимилированный в японии китаец сделал?!
@Apc
Apc
Apc#
@тихия_покоя, Давай Я поправлю по быстрому, у меня копия старого Json есть.
@тихия_покоя
тихия_покоя
тихия_покоя#
@Apc, погодииии! Я расследую!
@Apc
Apc
Apc#
@тихия_покоя, Всё, вернул)
тихия_покоятихия_покоя
а вдруг это ассимилированный в японии китаец сделал?!
Ты уже в какие-то дебри лезешь :lol:
@тихия_покоя
тихия_покоя
тихия_покоя#
@Apc, нашла!
Все не так просто! У них двойные имена, для японцев официально адаптировли имена. Изначально они китайские. ru.wikipedia.org/wiki/Reikenzan
:Cry4: Верните красивые имена!
Как это сделать? Я должна лезть на мал?
@Apc
Apc
Apc#
@тихия_покоя, Короче, эти персонажи 1304x278 и из маньхуа и из аниме одновременно. Так что Я их в оба раздела и засунул. Это более элегантный вариант, чем какие-то фьюжны создавать.

тихия_покоятихия_покоя
Верните красивые имена!
Как это сделать? Я должна лезть на мал?
Ну вообще там в прочих именах должны были БЫ быть китайские варианты. Не знаю, почему их не добавили.
@тихия_покоя
тихия_покоя
тихия_покоя#
@Apc, ну ты прям маркетолог!
Я напишу их красивые имена! В заметках. Завтра
ApcApc
Ну вообще там в прочих именах должны были БЫ быть китайские варианты
Изначальные, надо вообще их менять - писать Кит_имя(яп_псевдоним). Пфф... Тяжело
@Apc
Renion
Renion#
@Apc, "Закусив удела"
Удила́ — приспособление для обуздания лошади, деталь узды (уздечки). К удилам относятся тре́нзель, мундшту́к и пеля́м. Является средством для управления лошадью.
В самой той коллекции комментирование почему-то запрещено, поэтому пишу здесь
@Apc
Swyzen
Swyzen#
ApcApc
Совместимость со стилями «E-design» и «shiki-theme»
Что это?
@Apc
Apc
Apc#
@тихия_покоя, Yuhao HuoЮйхао Хо уберу, пока он без картинок
Laplaces demon
Laplaces demon#
@Apc, ObocchamaОботтяма (разовое появление в этой одежде Obocchama-kunОботтяма эп.269 08:11)
640x480
@Apc
Apc
Apc#
@Laplaces demon, Как раз хотел спросить, когда в Окаменение и кристаллизация твой коммент увидел;
Птичка Ахо в этом Оботтяме есть? Кажется, что это аниме как раз в таком духе.
@Laplaces demon
Laplaces demon
Laplaces demon#
@Apc, да, я подумывал отнести в ту коллекциию, но тут неоднозначно. Собственно, летящей птицы не показывают, однако есть похожий гэг. Каждый эпизод заканчивается какой-нибудь незамысловатой шутеечкой с звуковым спецэффектом. Вот пример, решайте, подходит или нет:
drive.google.com
@Apc
Apc
Apc#
@Laplaces demon, Не, без птички не прокатит, жаль-жаль:cry:
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode