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

Коллекции
Apc
Apc
23 / 20✓✕265111


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


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

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

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


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

The King of Fighters:
650x11131058x1920


Tekken:
750x750320x520566x906


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 )

Dr. Rin ni Kiite Mite!:
630x480
,
400x281
,
630x480
,
630x480
,
630x480
,
630x480


Хранители дверей:
1920x800


Триган Максимум:
167x407


Xian Ni:
1920x816
( w i k i )

Дигимоны:
764x708
( w i k i

Soulcalibur IV:
1280x1024



Возможно, кого-то смутит, что в названии чёрная пассивная женская Инь впереди белого активного мужского Ян. Полагаю, тут дело может быть в том, что у нас читается слева направо, а в китайском — наоборот, справа налево. И видимо из-за того, что мужской Ян встал в конце, весь "инь-ян" стал мужского рода. Однако само написание "инь-ян" не совсем верное. Мы ведь, к примеру, пишем "добро и зло", а не "добро-зло". Так что Инь и Ян — это не оно, она или он, а они. Вместе у них вообще рода нет, только множественное число.
[ИНТЕРАКТИВ]
Испытаем фэншуй на Шикимори. Ваша задача — удерживать равновесие между Добром и Злом. Если, на рубеже весны и лета, лайки👍 и дизлайки👎🏽 у этой коллекции окажутся в идеальном балансе, то в награду Я выложу здесь украшение для профиля — ☯︎-анимацию из чистейшего 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» придётся поменять пару координат — Я оставил в коде пометки, где и на какие именно.
Тем же из вас, у кого стоят свои собственные примочки, должно быть не хуже меня известно о конфликте повторяющихся свойств у одинаковых селекторов.

⠀⠀⠀
Соавтор:
тихия_покоятихия_покоя
 
аниме/манга 🇯🇵 Япония
дунхуа/маньхуа 🇨🇳 Китай
манхва 🇰🇷 Южная Корея
Эта коллекция полезна или интересна?
Да
Нет
Комментарии
Скрыть 91 комментарий
Показать 91 комментарий
Загрузить ещё 20 из 91 комментариев
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:
Apc
Apc#
Двух дизов нехватает:Cry4:
Borzaya
Borzaya#
Держи один, хотя я так не считаю
@Apc
Apc
Apc#
BorzayaBorzaya
хотя я так не считаю
Ну тогда можешь компенсировать лайком в какой-нить другой моей коллекции:oh2:
Мне как раз в Неординарном использовании груди не хватает одного юбилейного:angry4:
siverko19
siverko19#
@Apc, у NezhaНэчжа и Ao BingАобин символы на лбу образуют инь ян
спойлер
@Apc
Borzaya
Borzaya#
@Apc, Lei LinЛэй Линь
@Apc
Borzaya
Borzaya#
@Apc, LoЛо и YunЮнь
@Apc
Apc
Apc#
@Borzaya, Спасибо :lol:
@Borzaya
Borzaya
Borzaya#
@Apc, их добавили - надо было маякнуть
mjq
mjq#
@Apc,
MusubiМусуби / UzumeУзумэ
ну они там все с такими
1920x10801920x1080
@Apc
Apc
Apc#
@mjq, bruh. как же неохота всех их там выискивать :Cry3:
@mjq
mjq
mjq#
@Apc,
остановимся на главных
TsukiumiЦукиуми
1920x1080
@Apc
Apc
Apc#
@mjq, Я в таких случаях просто сериал смотрю, если там нет чего-то отталкивающего для меня :dunno: но это может нескоро случиться
@Borzaya
Borzaya
Borzaya#
@Apc, что быть может отталкивающие в такой теме?!:oh: Инь-ян.. Символ...
Коллекцию про "мочеиспускание в манге" ты не ведешь
Всё норм. Пристойно
@Apc
Apc
Apc#
@Borzaya, Я ж про аниме говорил. Например исекай с очередным мэри сью Я б смотреть не стал. А боевой эччи-гаремник в принципе сойдёт.
назад
Твой комментарий
Вернуться к редактированию
Предпросмотр
Скрыть
примеры BBCode