Объявления о событиях на форуме

Страница: 1

Тема закрыта

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

Поделиться12025-06-19 02:17:30

Автор: Раш Николас
Аврор
Рашель, 26
Аврор
Сообщений: 1659
Уважение: +276

[hideprofile][html]
<body>
<h1>Все что происходит на форуме</h1>
<div class="text-container">
<div class="text bounce">Время</div>
<div class="text spin">Скоротечно</div>
<div class="text fade">Ностальгия</div>
<div class="text slide">Шалости</div>
<div class="text pulse">Прошлое</div>
<div class="text flip">Настоящее</div>
<div class="text rotate">Что-то</div>
<div class="text wobble">Меняется</div>
<div class="text glow">но</div>
<div class="text animate-shadow">наши</div>
<div class="text animate-typewriter">сердца</div>
<div class="text flicker">будут</div>
<div class="text slide-up">помнить</div>
<div class="text breathe">всегда</div>
<div class="text zoom">наш</div>
<div class="text swing">любимый</div>
<div class="text shake">дом</div>
<div class="text pop">под</div>
<div class="text rotate-scale">названием</div>
<div class="text skew">Хогвартс</div>
<div class="text fade-slide">на</div>
<div class="text ripple">связи</div>
<div class="text flash">Рашик</div>
<div class="text heartbeat">Буду</div>
<div class="text stretch">писать</div>
<div class="text wave">что</div>
<div class="text flip-horizontal">добавила</div>
<div class="text flip-vertical">нового</div>
</div>
</body>
</html>
<style><!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animazioni CSS Keyframe</title>
<style>
/* Stili generali */
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
background-color: #000;
color: white;
margin: 0;
padding: 0;
}

/* Stili contenitore testo */
.text-container {
display: flex;
flex-wrap: wrap;
gap: 10px;
justify-content: center;
margin-top: 20px;
}

.text {
padding: 10px;
text-align: center;
font-size: 16px;
background-color: #1a1a1a;
color: white;
border-radius: 4px;
margin: 5px;
}

/* Animazioni */
.bounce { animation: bounce 2s infinite; } /*basta cambiare "infinite" e le animazioni si riproducono x volte - animation: bounce 2s 1; /* Esegui l'animazione una sola volta */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-30px); }
}

.spin { animation: spin 3s infinite linear; }
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

.fade { animation: fade 5s infinite; }
@keyframes fade {
0% { opacity: 1; }
50% { opacity: 0; }
100% { opacity: 1; }
}

.slide { animation: slide 4s infinite; }
@keyframes slide {
0% { transform: translateX(0); }
50% { transform: translateX(100px); }
100% { transform: translateX(0); }
}

.pulse { animation: pulse 2s infinite; }
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.flip { animation: flip 3s infinite; }
@keyframes flip {
0% { transform: rotateY(0); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}

.rotate { animation: rotate 4s infinite; }
@keyframes rotate {
0% { transform: rotateX(0deg); }
50% { transform: rotateX(180deg); }
100% { transform: rotateX(360deg); }
}

.wobble { animation: wobble 3s infinite; }
@keyframes wobble {
0% { transform: translateX(0); }
25% { transform: translateX(-25px) rotate(-5deg); }
50% { transform: translateX(25px) rotate(5deg); }
75% { transform: translateX(-10px) rotate(-3deg); }
100% { transform: translateX(0); }
}

.glow { animation: glow 1.5s infinite alternate; }
@keyframes glow {
0% { text-shadow: 0 0 5px #fff, 0 0 10px #ff00ff, 0 0 20px #ff00ff; }
100% { text-shadow: 0 0 20px #fff, 0 0 30px #ff00ff, 0 0 40px #ff00ff; }
}

.animate-shadow { animation: shadow 2s ease-in-out infinite; }
@keyframes shadow {
0% { text-shadow: 0 0 0 rgba(0, 0, 0, 0); }
100% { text-shadow: 3px 3px 5px #fff; }
}

.animate-typewriter {
font-family: 'Courier New', Courier, monospace;
overflow: hidden;
border-right: 3px solid white;
white-space: nowrap;
width: 0;
animation: typing 5s steps(10) forwards, blink 1s step-end infinite;
}
@keyframes typing {
0% { width: 0; }
100% { width: 150px; }
}
@keyframes blink {
from { border-color: transparent; }
to { border-color: white; }
}

.flicker { animation: flicker 3s infinite; }
@keyframes flicker {
0% { opacity: 1; }
50% { opacity: 0.6; }
100% { opacity: 1; }
}

.slide-up { animation: slideUp 3s infinite; }
@keyframes slideUp {
0% { transform: translateY(30px); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}

.breathe { animation: breathe 3s infinite; }
@keyframes breathe {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.05); }
}

.zoom { animation: zoom 4s infinite; }
@keyframes zoom {
0% { transform: scale(1); }
50% { transform: scale(1.5); }
100% { transform: scale(1); }
}

.swing { animation: swing 2s infinite; }
@keyframes swing {
20% { transform: rotate(15deg); }
40% { transform: rotate(-10deg); }
60% { transform: rotate(5deg); }
80% { transform: rotate(-5deg); }
100% { transform: rotate(0deg); }
}

.shake { animation: shake 0.5s infinite; }
@keyframes shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-10px); }
20%, 40%, 60%, 80% { transform: translateX(10px); }
}

.pop { animation: pop 1s infinite; }
@keyframes pop {
0% { transform: scale(1); }
50% { transform: scale(1.3); }
100% { transform: scale(1); }
}

.rotate-scale { animation: rotate-scale 3s infinite; }
@keyframes rotate-scale {
0% { transform: rotate(0deg) scale(1); }
50% { transform: rotate(180deg) scale(1.5); }
100% { transform: rotate(360deg) scale(1); }
}

.skew { animation: skew 3s infinite; }
@keyframes skew {
0% { transform: skew(0deg); }
50% { transform: skew(20deg); }
100% { transform: skew(0deg); }
}

.fade-slide { animation: fade-slide 4s infinite; }
@keyframes fade-slide {
0% { opacity: 0; transform: translateX(-100%); }
50% { opacity: 1; transform: translateX(0); }
100% { opacity: 0; transform: translateX(100%); }
}

.ripple { animation: ripple 2s infinite; }
@keyframes ripple {
0%, 100% { transform: scale(1); }
50% { transform: scale(1.1); }
}

.flash { animation: flash 1.5s infinite; }
@keyframes flash {
0%, 50%, 100% { opacity: 1; }
25%, 75% { opacity: 0; }
}

.heartbeat { animation: heartbeat 1.5s infinite; }
@keyframes heartbeat {
0% { transform: scale(1); }
25% { transform: scale(1.1); }
50% { transform: scale(1); }
75% { transform: scale(1.1); }
100% { transform: scale(1); }
}

.stretch { animation: stretch 2s infinite; }
@keyframes stretch {
0%, 100% { transform: scaleX(1); }
50% { transform: scaleX(1.5); }
}

.wave { animation: wave 1.5s infinite ease-in-out; }
@keyframes wave {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}

.flip-horizontal { animation: flip-horizontal 2s infinite; }
@keyframes flip-horizontal {
0% { transform: rotateY(0deg); }
50% { transform: rotateY(180deg); }
100% { transform: rotateY(360deg); }
}

.flip-vertical { animation: flip-vertical 2s infinite; }
@keyframes flip-vertical {
0% { transform: rotateX(0deg); }
50% { transform: rotateX(180deg); }
100% { transform: rotateX(360deg); }
}
</style>
</head>
</style>
<script>
</script>

[/html]

Поделиться22025-06-19 02:25:08

Автор: Раш Николас
Аврор
Рашель, 26
Аврор
Сообщений: 1659
Уважение: +276

[hideprofile][html]<div class="aaTRECE"><img class="imTRECE" src="https://i.pinimg.com/736x/8b/0f/52/8b0f5250501a45775c55d0dc1def5176.jpg"><div class="coTRECE"><div class="ttTRECE">Всем кто вернулся</div><div class="ssTRECE">и тем, кто не забывал</div><div class="xxTRECE">

<p>Привет, на связи админ Рашик. Не так давно, путь вновь привел на просторы форумов. Многое изменилось, многое думаю поменялось не только в самом движке мубб, но и в целом у всех.
<p>Хотелось стряхнуть с форума пыль, привести в порядок, дел тут не мало. /обводит взглядом/ В целом задача по плечу, не скажу что смогу многое, но сделать немного все же в силах. Как минимум привычный тем кто играл на новых форумах - комфорт все же могу пригнать.
<p>Вы заметили таблицу я сменила, сделала ее компактнее даже интерактивной - но не сильно. Хотя будь моя воля я бы верстанула новый диз /хмыкает/ Но оставляем тот самый, стандартный что у нас был и многие привыкли. Будем верстать то, что работает на платформе. Но, моя любовь к скриптам. /брови брови/ Тут я разгуляюсь, есть у меня красивые, надеюсь вполне рабочие.
<p>В целом - сделала сворачивание категорий - форум у нас очень длинный - я когда этот код нашла - опробовала - поняла - нам тоже надо. Не стала сильно морочиться - на треугольники - тык тык и сворачивается и разворачивается. Очень комфортно.
<p>Потом - с футерром я так и не смогла разобраться, новую ссылку добавить никак не могу- там нужен глав.акк.
<p>Но. Добавлено - добавление в сообщения хтмл - ну это вы заметили. /хэхэкает/ Тут простите я уже привыкла безумно к этому - сложно отказаться.
<p>Так же - обтекание картинок справа слева - пока так - потом поищу одинаковые картинки и подгружу. Абзацы - мне этого не хватало. С маской я потом разберусь - там сложно с этими категориями - если учесть сколько их у нас - я подумаю как бы нам это тоже добавить.
<p>Смена регистра. Кверти с русского на англ и обратно. Восстановить последний пост. Потом - для гостевой - выделение имени гостя. Потом копирование с выделением сразу.
<p>Подшаманила сам профиль наш - лучше уже сделать не смогу. Плюсик тот так пока и будет - но выровняла, возможно получиться добавить плашку - для организаций и курсов. Но это точно потом.
<p>Самое главное - кнопки вверх вниз - причем самые комфортные. Но не уверена что с мобильной версии пока комфортно - но я потом добавлю этот кусок кода, надеюсь встанет как надо.
<p>Скрытие профиля в теме- тоже удобно при различных ситуациях.
<p>Индикатор активности пользователя - ну тут понятно.
<p>Оформила гостевую в обычный сейчас шаблон, он почти на всех форумах. Немного с цветом под нас стилизировала.
<p>Так же для гостей добавила - что они могут по никам тоже кликать - обращаться.
<p>Ссылка на авторский пост в цитате - тоже порой удобная штука.
<p>Выравнивание текста по ширине в постах.
<p>Счетчик символов в сообщениях.
</div></div></div>

</div>

Тема закрыта

Страница: 1

Школа

Меню навигации

Пользовательские ссылки

Информация о пользователе

Объявления о событиях на форуме

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

Поделиться12025-06-19 02:17:30

Поделиться22025-06-19 02:25:08