Содержание
Вариант 2:
Вариант, похожий на первый, только с более медленным миганием
Неоновый текст
<div class=»sign-wrap-2″> <span class=»sign_word»>Неоновый текст</span> </div>
1 2 3 |
<div class=»sign-wrap-2″> <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:
Вариант, похожий на предыдущий, только загораются и тухнут определенные буквы
Неоновый текст
<div class=»sign-wrap-4″> <div class=»sign_word»>Не<span>он</span>овы<span>й</span> тек<span>ст</span></div> </div>
1 2 3 |
<div class=»sign-wrap-4″> <div class=»sign_word»>Не<span>он</span>овы<span>й</span> тек<span>ст</span></div> </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 |
<div class=»sign-wrap-1″> <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 |
<div class=»sign-wrap-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; } } |
С этим читают