@for $i from 1 through 3 {
@keyframes rotate-left-#{$i} {
0% { transform: rotate(0deg); }
50% { transform: rotate(#{$i * 60}deg); }
100% { transform: rotate(#{$i * 60}deg); }
}
}
// не забудь заменить на rotate-right-1,2,3
@for $i from 1 through 3 {
@keyframes rotate-right-#{$i} {
0% { transform: rotate(0deg); }
50% { transform: rotate(0deg); }
100% { transform: rotate(#{$i * 60}deg); }
}
}@for $i from 1 through 6 {
$stage_0: 0;
$stage_1: 0;
$stage_2: $i * 60;
@if $i <= 3 {
$stage_1: $i * 60;
}
@else {
$stage_2: $stage_2 - 180;
}
@keyframes rotate-#{$i} {
0% { transform: rotate(#{$stage_0}deg); }
50% { transform: rotate(#{$stage_1}deg); }
100% { transform: rotate(#{$stage_2}deg); }
}
}str_padecho str_pad("Super label 1", 60, ".") . "\n";
echo str_pad("Super blabla label", 60, ".") . "\n";
echo str_pad("Ololo label", 60, ".") . "\n";
echo str_pad("Trololo label", 60, ".") . "\n";@mixin scrollbar {
&::-webkit-scrollbar {
/* 1 - скроллбар */
}
&::-webkit-scrollbar-button {
/* 2 - кнопка */
}
&::-webkit-scrollbar-track {
/* 3 - трек */
}
&::-webkit-scrollbar-track-piece {
/* 4 - видимая часть трека */
}
&::-webkit-scrollbar-thumb {
/* 5 - ползунок */
}
&::-webkit-scrollbar-corner {
/* 6 - уголок */
}
&::-webkit-resizer {
/* 7 - изменение размеров */
}
}grid-template-columns в @media
body навешивается класс .modal-open, при этом, его стили отключают прокрутку. Проверь наличие всех стилей, всех скриптов. Если у тебя прокрутка внутри другого элемента реализована, то отключи ее:.modal-open .scroll-elem {
overflow: hidden;
}(seconds * 6) % 360const sec = document.getElementById("sec");
const min = document.getElementById("min");
let lastTime = Date.now();
let seconds = (new Date()).getSeconds();
let minutes = (new Date()).getMinutes() + seconds / 60;
function animate() {
const now = Date.now();
const deltaTime = now - lastTime;
lastTime = now;
seconds += deltaTime / 1000;
minutes += deltaTime / 1000 / 60;
sec.style.transform = `rotate(${seconds * 6}deg)`;
min.style.transform = `rotate(${minutes * 6}deg)`;
requestAnimationFrame(animate);
}
animate();const sec = document.getElementById("sec");
const min = document.getElementById("min");
function animate() {
const date = new Date();
const seconds = date.getSeconds() + (date.getTime() % 1000) / 1000;
const minutes = date.getMinutes() + seconds / 60;
sec.style.transform = `rotate(${seconds * 6}deg)`;
min.style.transform = `rotate(${minutes * 6}deg)`;
requestAnimationFrame(animate);
}
animate();precision highp float;
float mirrored(float v) {
float m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
vec2 mirrored(vec2 v) {
vec2 m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
vec3 mirrored(vec3 v) {
vec3 m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
vec4 mirrored(vec4 v) {
vec4 m = mod(v, 2.0);
return mix(m, 2.0 - m, step(1.0, m));
}
float tri(float v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec2 tri(vec2 v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec3 tri(vec3 v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
vec4 tri(vec4 v) {
return mix(v, 1.0 - v, step(0.5, v)) * 2.0;
}
#define PI_2 6.283185307179586
#define PI_H 1.5707963267948966
varying vec2 vUv;
varying vec2 vUv1;
varying vec2 vUv2;
uniform vec4 time;
uniform float progress;
uniform vec3 mask;
uniform float rotation;
uniform vec4 translateDelay;
uniform vec2 accel;
uniform vec4 waveAmpFreq;
uniform vec4 waveSpeedBlend;
uniform vec4 pixels;
uniform sampler2D texture1;
uniform sampler2D texture2;
void main(void) {
vec2 uv = gl_FragCoord.xy / pixels.xy;
float p = fract(progress + mask.z);
float delayValue = p * (1.0 + translateDelay.z + translateDelay.w) - uv.y * translateDelay.w - (1.0 - uv.x) * translateDelay.z;
delayValue = clamp(delayValue, 0.0, 1.0);
vec2 translateValue = p + delayValue * accel;
vec2 translateValue1 = translateDelay.xy * translateValue;
vec2 translateValue2 = translateDelay.xy * (translateValue - 1.0 - accel);
vec2 w = sin(time.y * waveSpeedBlend.xy + vUv.yx * waveAmpFreq.zw) * waveAmpFreq.xy;
vec2 xy = (tri(p) * waveSpeedBlend.z + tri(delayValue) * waveSpeedBlend.w) * w;
vec2 uv1 = vUv1 + translateValue1 + xy;
vec2 uv2 = vUv2 + translateValue2 + xy;
vec4 rgba1 = texture2D(texture1, mirrored(uv1));
vec4 rgba2 = texture2D(texture2, mirrored(uv2));
vec4 rgba = mix(rgba1, rgba2, delayValue);
rgba = mix(vec4(0.0, 0.0, 0.0, 1.0), rgba, mask.y);
rgba = mix(vec4(0.0), rgba, float(abs(uv.y * 2.0 - 1.0) <= mask.x));
rgba.rgb *= 0.7;
gl_FragColor = rgba;
}text-align: justify;, но для короткой фразы не поможет. Распредели слова по отдельным тегам и задай контейнеру display: flex, justify-content: space-between