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

Белое и Чёрное, День и Ночь, Свет и Тьма, Солнце и Луна, Мужское и Женское... Равновесие, Гармония, Баланс... Бла-бла-бла... Клёвый символ кароч Нет, и навряд ли когда-то появятся в базе shikimoriКунг-фу Панда: По1044x15631280x19201280x19201280x1920Тайцзи Панда: Панда852x480 и Старец852x480852x480Ещё одна ПандаСоздательница ☯︎-сфер — Тамацукури Мисумару1920x18181920x10801920x1080 ( англ. Tamatsukuri Misumaru, яп. 玉造 魅須丸 )Юань Лун: Дай Гуань (шкатулка)1920x10801920x1080 (правда использовал шкатулку один из его телохранителей) и Наёмник1920x10801920x1080Wuthering Waves: Jianxin225x350 youtube ( w i k i )My Disciples Are All Big Villains: Lu Zhou1300x1762 ( w i k i ) и его ученикиЕго Преподобие ( англ. Metropolitan Reverence, кит. 都市至尊 ): Фан Хун400x533Honkai: Star Rail | Myriad Celestia Trailers: Шоулин и Циррус1536x864Yao Shen Ji: Director Yang Xin1920x1080 ( w i k i )Новая легенда о Момотаро: ???640x480Saiyuuki Gaiden: остальные члены Western Army First UnitThe King of Fighters: May Lee650x11131058x1920Tekken: Baek Doo San750x750320x520566x906Cyberbots | Fullmetal Madness: Chiyomaru & Tessan312x5191920x1398 ( w i k i )Странная клетка: Miyashita Tamami250x300DOLLS ANTIQUE ~Ningyou-tachi no Yakata~: Reiran256x300640x480Kegareta Eiyuu: Enju1024x768 ( w i k i )Metamor Fantasy ( яп. メタモルファンタジー ): Rinrei Chou180x2701200x900Yokoshima!! Pandemic ( яп. 邪!! ぱんでみっく ): Yuge Otoha1600x1200800x600800x600Idle Angels: Fuxi800x6251920x1080Божественная машина Демонбэйн: Francis Morgan150x300 ( w i k i )Shining Blade (общая вселенная с Shining Tears X Wind): Fenrir643x1000 ( w i k i )Dr. Rin ni Kiite Mite!: Kanzaki Geppei630x480, Zhang Rinrin400x281, Tsukioka Eddy630x480, Shijou Banri630x480, Tokiwa Takashi630x480, Kurosawa Azusa630x480Хранители дверей: Какой-то мужик1920x800Триган Максимум: Инни и Янни167x407Xian Ni: Ван Чжо1920x816 ( w i k i )Дигимоны: Ouranosmon764x708 ( w i k i Soulcalibur IV: Yun-Seong1280x1024Возможно, кого-то смутит, что в названии чёрная пассивная женская Инь впереди белого активного мужского Ян. Полагаю, тут дело может быть в том, что у нас читается слева направо, а в китайском — наоборот, справа налево. И видимо из-за того, что мужской Ян встал в конце, весь "инь-ян" стал мужского рода. Однако само написание "инь-ян" не совсем верное. Мы ведь, к примеру, пишем "добро и зло", а не "добро-зло". Так что Инь и Ян — это не оно, она или он, а они. Вместе у них вообще рода нет, только множественное число.[ИНТЕРАКТИВ]Испытаем фэншуй на Шикимори. Ваша задача — удерживать равновесие между Добром и Злом. Если, на рубеже весны и лета, лайки👍 и дизлайки👎🏽 у этой коллекции окажутся в идеальном балансе, то в награду Я выложу здесь украшение для профиля — ☯︎-анимацию из чистейшего 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=''] { 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=''] { 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); } }Кто не в курсе, как всё это устанавливается — вот 10331278инструкция.⠀⠀⠀Совместимость со стилями «E-design» и «shiki-theme» (в том виде, как приведено в примере):На «E-design» легло, как по дефолту; Я аж удивился. А вот пользователям «shiki-theme» придётся поменять пару координат — Я оставил в коде пометки, где и на какие именно.Тем же из вас, у кого стоят свои собственные примочки, должно быть не хуже меня известно о конфликте повторяющихся свойств у одинаковых селекторов.853x480⠀⠀⠀