I Bet My Life On You

Страница: 1

Сообщений 1 страница 2 из 2

Поделиться12023-08-21 22:52:18

Автор: Raphael
Гость

[html]<style>
@property --hue {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --rotate {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --bg-y {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --bg-x {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --glow-translate-y {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --bg-size {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --glow-opacity {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --glow-blur {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
@property --glow-scale {
syntax: "<number>";
inherits: true;
initial-value: 2;
}
@property --glow-radius {
syntax: "<number>";
inherits: true;
initial-value: 2;
}
@property --white-shadow {
syntax: "<number>";
inherits: true;
initial-value: 0;
}
:root {
--debug: 0;
--supported: 0;
--not-supported: 0;
--card-color: hsl(260deg 100% 3%);
--text-color: hsl(260deg 10% 55%);
--card-radius: 3.6vw;
--card-width: 35vw;
--border-width: 3px;
--bg-size: 1;
--hue: 0;
--hue-speed: 1;
--rotate: 0;
--animation-speed: 4s;
--interaction-speed: 0.55s;
--glow-scale: 1.5;
--scale-factor: 1;
--glow-blur: 6;
--glow-opacity: 1;
--glow-radius: 100;
--glow-rotate-unit: 1deg;
}

html,
body {
height: 400px;
width: 100%!important;
padding: 0;
margin: 0;
}

*,
*:before,
*:after {
outline: calc(var(--debug) * 1px) red dashed;
}

body {
display: flex!important;
align-items: center;
justify-content: center;
}

body > div {
width: 450px;
aspect-ratio: 1.5/1;
color: white;
margin: auto;
display: flex;
align-items: center;
justify-content: center;
position: relative;
z-index: 2;
border-radius: var(--card-radius);
cursor: pointer;
}
body > div:hover > div {
mix-blend-mode: darken;
--text-color: white;
box-shadow: 0 0 calc(var(--white-shadow) * 1vw) calc(var(--white-shadow) * 0.15vw) rgba(255, 255, 255, 0.2);
animation: shadow-pulse calc(var(--animation-speed) * 2) linear infinite;
}
body > div:hover > div:before {
--bg-size: 15;
animation-play-state: paused;
transition: --bg-size var(--interaction-speed) ease;
}
body > div:hover .glow {
--glow-blur: 1.5;
--glow-opacity: 0.6;
--glow-scale: 2.5;
--glow-radius: 0;
--rotate: 900;
--glow-rotate-unit: 0;
--scale-factor: 1.25;
animation-play-state: paused;
}
body > div:hover .glow:after {
--glow-translate-y: 0;
animation-play-state: paused;
transition: --glow-translate-y 0s ease, --glow-blur 0.05s ease, --glow-opacity 0.05s ease, --glow-scale 0.05s ease, --glow-radius 0.05s ease;
}
body > div:before, body > div:after {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: var(--card-radius);
}
body > div > div {
position: absolute;
width: 100%;
height: 100%;
background: url(https://www.worldanvil.com/uploads/imag … 7bfa64.jpg);
background-size: cover;
border-radius: calc(calc(var(--card-radius) * 0.9));
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
text-transform: uppercase;
font-stretch: 150%;
font-size: 18px!important;
font-size: clamp(1.5vw, 1.5vmin, 32px);
color: var(--text-color);
padding: calc(var(--card-width) / 8);
}
body > div > div span {
display: inline-block;
padding: 0.25em;
border-radius: 4px;
background: var(--text-color);
color: black;
margin-right: 8px;
font-weight: 900;
}
body > div > div:before {
content: "";
display: block;
position: absolute;
width: 100%;
height: 100%;
border-radius: calc(calc(var(--card-radius) * 0.9));
box-shadow: 0 0 20px black;
mix-blend-mode: color-burn;
z-index: -1;
background: #292929 radial-gradient(30% 30% at calc(var(--bg-x) * 1%) calc(var(--bg-y) * 1%), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 90%) calc(0% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 80%) calc(20% * var(--bg-size)), hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%) calc(40% * var(--bg-size)), transparent 100%);
width: calc(100% + var(--border-width));
height: calc(100% + var(--border-width));
animation: hue-animation var(--animation-speed) linear infinite, rotate-bg var(--animation-speed) linear infinite;
transition: --bg-size var(--interaction-speed) ease;
}
body > div .glow {
--glow-translate-y: 0;
display: block;
position: absolute;
width: calc(var(--card-width) / 5);
height: calc(var(--card-width) / 5);
animation: rotate var(--animation-speed) linear infinite;
transform: rotateZ(calc(var(--rotate) * var(--glow-rotate-unit)));
transform-origin: center;
border-radius: calc(var(--glow-radius) * 10vw);
}
body > div .glow:after {
content: "";
display: block;
z-index: -2;
filter: blur(calc(var(--glow-blur) * 10px));
width: 130%;
height: 130%;
left: -15%;
top: -15%;
background: hsl(calc(calc(var(--hue) * var(--hue-speed)) * 1deg), 100%, 60%);
position: relative;
border-radius: calc(var(--glow-radius) * 10vw);
animation: hue-animation var(--animation-speed) linear infinite;
transform: scaleY(calc(var(--glow-scale) * var(--scale-factor) / 1.1)) scaleX(calc(var(--glow-scale) * var(--scale-factor) * 1.2)) translateY(calc(var(--glow-translate-y) * 1%));
opacity: var(--glow-opacity);
}

@keyframes shadow-pulse {
0%, 24%, 46%, 73%, 96% {
--white-shadow: 0.5;
}
12%, 28%, 41%, 63%, 75%, 82%, 98% {
--white-shadow: 2.5;
}
6%, 32%, 57% {
--white-shadow: 1.3;
}
18%, 52%, 88% {
--white-shadow: 3.5;
}
}
@keyframes rotate-bg {
0% {
--bg-x: 0;
--bg-y: 0;
}
25% {
--bg-x: 100;
--bg-y: 0;
}
50% {
--bg-x: 100;
--bg-y: 100;
}
75% {
--bg-x: 0;
--bg-y: 100;
}
100% {
--bg-x: 0;
--bg-y: 0;
}
}
@keyframes rotate {
from {
--rotate: -70;
--glow-translate-y: -65;
}
25% {
--glow-translate-y: -65;
}
50% {
--glow-translate-y: -65;
}
60%, 75% {
--glow-translate-y: -65;
}
85% {
--glow-translate-y: -65;
}
to {
--rotate: calc(360 - 70);
--glow-translate-y: -65;
}
}
@keyframes hue-animation {
0% {
--hue: 0;
}
100% {
--hue: 360;
}
}
</style>
<div role="button">
<span class="glow"></span>
<div>
<span>Baldur's Gate</span>  I Bet My Life On You
</div>
</div>[/html]

Поделиться22023-08-21 22:52:34

Автор: Raphael
Гость

У смертных есть выражение: “если жизнь дала тебе лимон, выжми из него кислоту и плесни ею врагу в лицо”. Или что-то вроде того. Может быть, Рафаэль провел слишком много времени среде смертных, но он усвоил смысл этой нехитрой мудрости. Триста лет назад он видел своими глазами крах великой империи Незерил, и вместе с ее падением расстроились многие планы камбьона, но пусть его обсыпят ангельскими перьями и обваляют в пыльце фей, если он позволит этому недоразумению остановить его!
Лет десять Рафаэль позволил себе порычать от ярости в красные адские небеса и истребил пару племен в Фэйруне, но затем он взял себя в руки и начал изобретать новый план. Он понял, в чем был его просчет: когда империя Карсуса пала, он оказался не готов. У него не было ни верных дьяволов, ни нужной магии, ни надежного места, куда он мог бы утащить заветные незерилские трофеи, когда они остались лежать бесхозными среди обломков некогда летающих городов. И у него самого не было достаточно сил. Итак, если обобщить все вышесказанное, Рафаэлю не хватало статуса в адской иерархии, и он с энтузиазмом принялся это исправлять.
В аду его давно знали все или почти все: Рафаэль появлялся тут и там, выступал посредником между магами и дьяволами, обменивал артефакты, был знаком со всеми культистами, периодически помогал Мефистофелю наводить порядок в его хранилище, водил дружбу как со старшими дьяволами так с простыми инкубами, камбьонами и при всем при этом, кажется, никому не служил. Его дражайший отец, Мефистофель, был занят только своими экспериментами, и его ничуть не волновало, чем занимался какой-то камбьон, который формально был у него на службе, пока он не доставлял проблем. Конечно, Рафаэль успел нажить и некоторое количество врагов, но меньше, чем можно было ожидать за тысячи лет, и никто из них не ненавидел его настолько, чтобы всерьёз вставлять ему палки в колеса. А может быть никто просто не воспринимал его всерьез.
Рафаэль очень скоро собирался это изменить.
Кровавые воды Стикса сегодня бежали особенно быстро: похоже, накануне случилась очередная большая битва. Генерал Вархил, верный Дьюк Зариэль, наверное потерял немало солдат. Рафаэль улыбнулся. Однако он прилетел на первый уровень ада не для того, чтобы любоваться кровавой рекой и растерзанными телами. Он кое-кого искал.
Хаарлеп нашелся за очередной извергающей лаву скалой, в уютной маленькой расщелине. Он задумчиво смотрел на воду.
- Если ты нарисуешь пейзаж Стикса, я с удовольствием его куплю, - сообщил Рафаэль, неторопливо подходя ближе.
Хаарлеп действительно хорошо рисовал. И не только рисовал. Он в целом был очень творческой натурой - за это Рафаэль его и ценил и нередко сводил со смертными, которым нужно было что-то… особенное. Их отношения с Хаарлепом давно вышли за границы простого партнерства, хотя так и не дошли до той банальности, которая обычно преследует инкубов. Рафаэля не интересовало его скульптурно выточенное тело, он находил в Хаарлепе совсем другое очарование. Но и упустить возможность подразнить его инстинкты он он мог, особенно сегодня.
- Хаарлеп, - Рафаэль почти проклокотал имя инкуба голосом, отточенным на тысячах смертных. Он подошел практически вплотную и почти коснулся руки инкуба. Почти. - Я тебя не отвлекаю? У меня есть к тебе небольшая просьба. Это не контракт от смертного. Это... личная просьба. Но, разумеется, я заплачу.