Текст с эффектом воды надписи для шапки youtube канала

Содержание

1 Вариант 2:
2 Вариант 4:
3 Конструктор надписей из неновых светящихся букв с анимацией
4 Вариант 1:
5 Вариант 3:

Вариант 2:

Вариант, похожий на первый, только с более медленным миганием

Неоновый текст

<div class=»sign-wrap-2″> <span class=»sign_word»>Неоновый текст</span> </div>

1 2 3

<span class=»sign_word»>Неоновый текст</span>

</div>

.sign-wrap-2 { background: #337AB7; text-align: center; padding: 60px 20px; } .sign-wrap-2 .sign_word { font-size: 40px; font-weight: bold; line-height: 50px; color: #FFF; font-family: ‘Roboto Condensed’, sans-serif; text-transform: uppercase; animation: 2s neon-2 alternate-reverse infinite; } @keyframes neon-2 { from { text-shadow: 0 0 5px #FFF, 0 0 10px #FFF, 0 0 15px #FFF, 0 0 20px #BFE2FF; } to { text-shadow: 0 0 20px #BFE2FF, 0 0 35px #BFE2FF, 0 0 40px #BFE2FF, 0 0 50px #BFE2FF, 0 0 800px #BFE2FF; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29

.sign-wrap-2 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-2 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

animation2sneon-2alternate-reverseinfinite;

}

@keyframes neon-2 {

from {

text-shadow5px#FFF,

10px#FFF,

15px#FFF,

20px#BFE2FF;

}

to {

text-shadow20px#BFE2FF,

35px#BFE2FF,

40px#BFE2FF,

50px#BFE2FF,

800px#BFE2FF;

}

Вариант 4:

Вариант, похожий на предыдущий, только загораются и тухнут определенные буквы

Неоновый текст

1 2 3

</div>

.sign-wrap-4 { background: #337AB7; text-align: center; padding: 60px 20px; } .sign-wrap-4 .sign_word { font-size: 40px; font-weight: bold; line-height: 50px; color: #FFF; font-family: ‘Roboto Condensed’, sans-serif; text-transform: uppercase; text-shadow: 0 -40px 100px, 0 0 2px, 0 0 1em #BFE2FF, 0 0 0.5em #BFE2FF, 0 0 0.1em #BFE2FF; } .sign-wrap-4 .sign_word span { animation: neon-4 linear infinite 2s; } @keyframes neon-4 { 78% { color: inherit; text-shadow: inherit; } 79%{ color: #0b3960; } 80% { text-shadow: none; } 81% { color: inherit; text-shadow: inherit; } 82% { color: #0b3960; text-shadow: none; } 83% { color: inherit; text-shadow: inherit; } 92% { color: #0b3960; text-shadow: none; } 92.5% { color: inherit; text-shadow: inherit; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

.sign-wrap-4 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-4 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

text-shadow-40px100px,2px,1em#BFE2FF,0.5em#BFE2FF,0.1em#BFE2FF;

}

.sign-wrap-4 .sign_word span {

animationneon-4linearinfinite2s;

}

@keyframes neon-4 {

78% {

colorinherit;

text-shadowinherit;

}

79%{

color#0b3960;

}

80% {

text-shadownone;

}

81% {

colorinherit;

text-shadowinherit;

}

82% {

color#0b3960;

text-shadownone;

}

83% {

colorinherit;

text-shadowinherit;

}

92% {

color#0b3960;

text-shadownone;

}

92.5% {

colorinherit;

text-shadowinherit;

}

Конструктор надписей из неновых светящихся букв с анимацией

Сохранить Размер области Ширина области (px):

Высота области (px): Параметры анимации Время анимации (с):

Парамерты анимации мерцания букв: Номера букв через запятую, время от начала анимации до мерцания (с), кол-во мерцаний,не горит в течении (мс), горит в течении (мс)

+ —

Фон Цвет фона: Изображение: Удалить изображение Текст Текст: Шрифт: HelveticaNeueCyrBloggerSansArcadia-BoldHelveticaNeueCyrNicknameDKBlackBambooCTCSplashRoundedKuraleBoughLirussTYGRADrinaPlanetN2ArciformSansMonplesirMarshStencilPlainotDublonCColumnSimpleMullerThinRomeoRUSBedrockCCAdamKubertMorningGloryBatmanForeverEnchantedLandPH100CondCapsRibbonHeartVALStencilcyrCitricaCyrillicReginaKursivItalicZettaPapyrusSlotCyrillicAstakhovSkinPirouCyrillicSnowForSantaOrbitronWerfusPFHandbookProThinIcekingdomElevatePERSONALAstakhovDishedSevillaDecorCellblockNBPBudmoJigglerCyrCricketNormalAtibaCyrillicFreakomixbyAvdoManProHarryPotterAmericanTextCJazzBallVoxRegularAstakhovDishedGlamourPanforteProProbaNav2RegularLDSlenderNEXTART-LightAstakhovFirstABRegularOldKingC-BoldMerkurVEGeorgianBrushAlbertusMediumEskalFont4YouAstrocyrWarfaceRedisTYGRAOldComedyBuccaneerMunchkinCyrChocolatesovietfontCocaColaBrandbePhenomenaaMavickFontMarkerFeltWideAlabamaEurotypeClobberinTimeBadaBoomBBAmericanCaptainCyberfallPixelDigivolveCgFiorelloPacmaniaRoddenberryVideopacAmphiWoWSlFKGUpheavalProRealizeMyPassionOldRosaNormalGagalinGTAPricedownVAGWorldBoldkrestikPFHellenicaSerifProSnowstormSnowstormInlineKramolaSmesharikiCOLORADOIIICOLORADOIOICOLORADOXGOSTtypeAAstakhovvitrageAstakhovpastelMonsterHighKomikaAxisPeaceSansSporedomRUSMartAWXRotondaKarminaWidefaceAWXssdrebedenCassandraElzevirLobsterKittyKatJuraLightMarmeladRegularBIPFuturaRoundTiProunNormalLCDNOVAAnnabelleStudioScriptCTTSTRTBicubikTagirCTTNormalBirchCTTinformKursivcArchangelskZionTrainAeroMaticsStencilMetroModernzopaPlayDictDsjapancyrMetroloxRunicDSCopticDSSupervixenCyrBreezeScriptoramaScriptSSKPorscheFloydianCyrLCChalkOLGACDsBrushesAnfisaGroteskMasonDisneyParkAmericanRetroPudelinaMolotNiseSegaNFSJLtvNeuropolDeusExHarryPotterFriendsDSRabbitKonkordRetroLCBlowzyTopazSeedsCyrMediumWenatcheeKBVectroidZhiznVogueCyrUnderdogGlideSketchCitricaCompoShadowBeastVsButtercrumbEtudeBMspiralProunxAWithSerifsArtemisDecoToscaniaIntruderArianGrqiAuctionArroTerminalNeuchaComicSansMSCaviarDreamsHauptbahnhofChaLimousinesAdLibWin95BTDSStamperChinaCyrGOSTtypeACalligraphCampanellaSladkoeshkaMartadecoronePteroqueMinecraftChocogirlKBBandRoundScriptTaurusParsekFuroreFlowObelixProCorinthiaRosaMarenaACampusTECHDTangoDiMBThinkTwiceBedrockCHondaCAlbionicTitulInflMachinaNovaBrkDarthEmilArctikascriptBistrocTokioFedericoLarisaScriptB52TeddyBearRupsterScriptGoosePoddCyrSirCliveACampusGravBoldMoonlightFlowerchildKonstruktoDecoMatterhorncttMontblancSTALKERARCH2DitedHardpixelLegendeCTechno28AmericanCaptainResagokrZnikomitNo24ZnikomitNo24ThinTexgyreAdventorWolgastTwoArtDecorinaMedievalEnglishAmoreMBDemonicAliceComfortaaParizhelPompadurChibolaSeminariaStradivariMoyenageProletariatHermannGotischBalloonXBdBalloonOlympiaDecoVarieteBirusaReginaKursivConkordiaNewRecordMayaEpsilXiomaraPasadenaDecoRomanaScriptJuliaScriptConnieRegularRepivmanuscSochi2014RegularGramoclerictonTetraclerictonInkyLeokadiaDecoMatreshkaEuroferenceProtoSansUndergradUltrathinAvdiraRGrishenkoBangWhackPowInfinityPaintItDarkSangBleuSumkinTypefaceEyelevation6AAHigherupAlfavitaPoiretOneRegularIronRussianAleksandraCDurazkyCaptchaCodeOwnHandNiseSegaAAHaymakerAANeonOOSTROVKARDONboldIOCONDIOSMovieLettersFabryka4FRUSCHEAPSTEAngryBirdsAAMagnumRUSwolfensteinTamilaParanoiaMLikesBoomboomVelesRKobzarKSNEON1NeonDLNeonOLNeonGFTOdlNickainleyCyberpunkSGMLIIAppetiteNewLavanderiaC Размер шрифта (px):

Стиль текста: NormalBoldItalicItalic Bold Цвета и свечение Цвет букв Цвет выкл. букв

Свечение 1цвет, радиус (px), размытие (px), интенсивность (%)

Свечение 2цвет, радиус (px), размытие (px), интенсивность (%)

Теньцвет, радиус (px), размытие (px), интенсивность (%) Тень: смещение X (px), смещение Y (px)

34%

Вариант 1:

Простой вариант с мигающим текстом

Неоновый текст

<div class=»sign-wrap-1″> <span class=»sign_word»>Неоновый текст</span> </div>

1 2 3

<span class=»sign_word»>Неоновый текст</span>

</div>

.sign-wrap-1 { background: #337AB7; text-align: center; padding: 60px 20px; } .sign-wrap-1 .sign_word { font-size: 40px; font-weight: bold; line-height: 50px; color: #FFF; font-family: ‘Roboto Condensed’, sans-serif; text-transform: uppercase; animation: neon-1 .1s ease-in-out infinite alternate; } @keyframes neon-1 { from { text-shadow: 0 0 6px rgba(202, 228, 225, 0.92), 0 0 30px rgba(202, 228, 225, 0.34), 0 0 12px rgba(191, 226, 255, 0.52), 0 0 21px rgba(191, 226, 255, 0.92), 0 0 34px rgba(191, 226, 255, 0.78), 0 0 54px rgba(191, 226, 255, 0.92); } to { text-shadow: 0 0 6px rgba(202, 228, 225, 0.98), 0 0 30px rgba(202, 228, 225, 0.42), 0 0 12px rgba(191, 226, 255, 0.58), 0 0 22px rgba(191, 226, 255, 0.84), 0 0 38px rgba(191, 226, 255, 0.88), 0 0 60px #FFF; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

.sign-wrap-1 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-1 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

animationneon-1.1sease-in-outinfinitealternate;

}

@keyframes neon-1 {

from {

text-shadow6pxrgba(202,228,225,0.92),30pxrgba(202,228,225,0.34),12pxrgba(191,226,255,0.52),21pxrgba(191,226,255,0.92),34pxrgba(191,226,255,0.78),54pxrgba(191,226,255,0.92);

}

to {

text-shadow6pxrgba(202,228,225,0.98),30pxrgba(202,228,225,0.42),12pxrgba(191,226,255,0.58),22pxrgba(191,226,255,0.84),38pxrgba(191,226,255,0.88),60px#FFF;

}

Вариант 3:

Загорающийся и потухающий текст

Неоновый текст

<div class=»sign-wrap-3″> <span class=»sign_word»>Неоновый текст</span> </div>

1 2 3

<span class=»sign_word»>Неоновый текст</span>

</div>

.sign-wrap-3 { background: #337AB7; text-align: center; padding: 60px 20px; } .sign-wrap-3 .sign_word { font-size: 40px; font-weight: bold; line-height: 50px; color: #FFF; font-family: ‘Roboto Condensed’, sans-serif; text-transform: uppercase; animation: neon-3 5s steps(1, start) infinite reverse; } @keyframes neon-3 { 0%{ color: #0b3960; text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960; } 80%{ color: #fff; text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc; } 81%{ color: #E1F5FE; text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc; } 82%{color: #0b3960; text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960; } 83%{ color: #E1F5FE; text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc; } 84%{ color: #0b3960; text-shadow: 0 0 7px #0b3960, 0 0 8px #0b3960; } 85%{ color: #E1F5FE; text-shadow: 0 0 6px #fff,0 0 10px #fff,0 0 50px #79a7fc; } 100%{ color: #0b3960; text-shadow: 0 0 7px #0b3960,0 0 8px #0b3960; } }

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

.sign-wrap-3 {

background#337AB7;

text-aligncenter;

padding60px20px;

}

.sign-wrap-3 .sign_word {

font-size40px;

font-weightbold;

line-height50px;

color#FFF;

font-family’Roboto Condensed’,sans-serif;

text-transformuppercase;

animationneon-35ssteps(1,start)infinitereverse;

}

@keyframes neon-3 {

0%{

color#0b3960;

text-shadow7px#0b3960,8px#0b3960;

}

80%{

color#fff;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

81%{

color#E1F5FE;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

82%{color#0b3960;

text-shadow7px#0b3960,8px#0b3960;

}

83%{

color#E1F5FE;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

84%{

color#0b3960;

text-shadow7px#0b3960,8px#0b3960;

}

85%{

color#E1F5FE;

text-shadow6px#fff,010px#fff,050px#79a7fc;

}

100%{

color#0b3960;

text-shadow7px#0b3960,08px#0b3960;

}

С этим читают

Красивая надпись эффект воды

Вариант 2:

Вариант 4:

Конструктор надписей из неновых светящихся букв с анимацией

Вариант 1:

Вариант 3: