Gif анимация слова надпись или текст с электрической обводкой эффект разрядов тока

Содержание:

Готовые шаблоны
Вариант 4:
Конструктор Неоновых надписей и текстов с анимацией красивым шрифтом
Конструктор 3Д надписей и текстов с анимацией тени красивым шрифтом
Конструктор надписей из неновых светящихся букв с анимацией
Конструктор Градиент надписей и текстов с анимацией красивым шрифтом
Конструктор Shattering надписей и текстов с анимацией разрушения красивым шрифтом
Вариант 3:
Best Neon Text Generators

Готовые шаблоны

Вариант 4:

3d градиент текст надпись с обводной тенью высотой 3д эффекта

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

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

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;

}

Конструктор Неоновых надписей и текстов с анимацией красивым шрифтом

Красивый яркий текст надпись

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Текст
Текст:

Шрифт:
HelveticaNeueCyrBloggerSansArcadia-BoldHelveticaNeueCyrNicknameDKBlackBambooCTCSplashRoundedKuraleBoughLirussTYGRADrinaPlanetN2ArciformSansMonplesirMarshStencilPlainotDublonCColumnSimpleMullerThinRomeoRUSBedrockCCAdamKubertMorningGloryBatmanForeverEnchantedLandPH100CondCapsRibbonHeartVALStencilcyrCitricaCyrillicReginaKursivItalicZettaPapyrusSlotCyrillicAstakhovSkinPirouCyrillicSnowForSantaOrbitronWerfusPFHandbookProThinIcekingdomElevatePERSONALAstakhovDishedSevillaDecorCellblockNBPBudmoJigglerCyrCricketNormalAtibaCyrillicFreakomixbyAvdoManProHarryPotterAmericanTextCJazzBallVoxRegularAstakhovDishedGlamourPanforteProProbaNav2RegularLDSlenderNEXTART-LightAstakhovFirstABRegularOldKingC-BoldMerkurVEGeorgianBrushAlbertusMediumEskalFont4YouAstrocyrWarfaceRedisTYGRAOldComedyBuccaneerMunchkinCyrChocolatesovietfontCocaColaBrandbePhenomenaaMavickFontMarkerFeltWideAlabamaEurotypeClobberinTimeBadaBoomBBAmericanCaptainCyberfallPixelDigivolveCgFiorelloPacmaniaRoddenberryVideopacAmphiWoWSlFKGUpheavalProRealizeMyPassionOldRosaNormalGagalinGTAPricedownVAGWorldBoldkrestikPFHellenicaSerifProSnowstormSnowstormInlineKramolaSmesharikiCOLORADOIIICOLORADOIOICOLORADOXGOSTtypeAAstakhovvitrageAstakhovpastelMonsterHighKomikaAxisPeaceSansSporedomRUSMartAWXRotondaKarminaWidefaceAWXssdrebedenCassandraElzevirLobsterKittyKatJuraLightMarmeladRegularBIPFuturaRoundTiProunNormalLCDNOVAAnnabelleStudioScriptCTTSTRTBicubikTagirCTTNormalBirchCTTinformKursivcArchangelskZionTrainAeroMaticsStencilMetroModernzopaPlayDictDsjapancyrMetroloxRunicDSCopticDSSupervixenCyrBreezeScriptoramaScriptSSKPorscheFloydianCyrLCChalkOLGACDsBrushesAnfisaGroteskMasonDisneyParkAmericanRetroPudelinaMolotNiseSegaNFSJLtvNeuropolDeusExHarryPotterFriendsDSRabbitKonkordRetroLCBlowzyTopazSeedsCyrMediumWenatcheeKBVectroidZhiznVogueCyrUnderdogGlideSketchCitricaCompoShadowBeastVsButtercrumbEtudeBMspiralProunxAWithSerifsArtemisDecoToscaniaIntruderArianGrqiAuctionArroTerminalNeuchaComicSansMSCaviarDreamsHauptbahnhofChaLimousinesAdLibWin95BTDSStamperChinaCyrGOSTtypeACalligraphCampanellaSladkoeshkaMartadecoronePteroqueMinecraftChocogirlKBBandRoundScriptTaurusParsekFuroreFlowObelixProCorinthiaRosaMarenaACampusTECHDTangoDiMBThinkTwiceBedrockCHondaCAlbionicTitulInflMachinaNovaBrkDarthEmilArctikascriptBistrocTokioFedericoLarisaScriptB52TeddyBearRupsterScriptGoosePoddCyrSirCliveACampusGravBoldMoonlightFlowerchildKonstruktoDecoMatterhorncttMontblancSTALKERARCH2DitedHardpixelLegendeCTechno28AmericanCaptainResagokrZnikomitNo24ZnikomitNo24ThinTexgyreAdventorWolgastTwoArtDecorinaMedievalEnglishAmoreMBDemonicAliceComfortaaParizhelPompadurChibolaSeminariaStradivariMoyenageProletariatHermannGotischBalloonXBdBalloonOlympiaDecoVarieteBirusaReginaKursivConkordiaNewRecordMayaEpsilXiomaraPasadenaDecoRomanaScriptJuliaScriptConnieRegularRepivmanuscSochi2014RegularGramoclerictonTetraclerictonInkyLeokadiaDecoMatreshkaEuroferenceProtoSansUndergradUltrathinAvdiraRGrishenkoBangWhackPowInfinityPaintItDarkSangBleuSumkinTypefaceEyelevation6AAHigherupAlfavitaPoiretOneRegularIronRussianAleksandraCDurazkyCaptchaCodeOwnHandNiseSegaAAHaymakerAANeonOOSTROVKARDONboldIOCONDIOSMovieLettersFabryka4FRUSCHEAPSTEAngryBirdsAAMagnumRUSwolfensteinTamilaParanoiaMLikesBoomboomVelesRKobzarKSNEON1NeonDLNeonOLNeonGFTOdlNickainleyCyberpunkSGMLIIAppetiteNewLavanderiaC
Размер шрифта (px):

Стиль текста:
NormalBoldItalicItalic Bold

Цвета и свечение

Цвет букв
Цвет выкл. букв

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

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

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

Тень: смещение X (px), смещение Y (px)

Фон

Цвет фона:

Изображение:
Удалить изображение

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

№ Б

↻

▌▌

►

+
—

Параметры анимации

Время анимации (с):

Размер области

Ширина области (px):

Высота области (px):

34%

Конструктор 3Д надписей и текстов с анимацией тени красивым шрифтом

3д gif текст надпись с анимацией вращения по осям вертикали, горизонтали

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Текст
Текст:
Шрифт:
HelveticaNeueCyrBloggerSansArcadia-BoldHelveticaNeueCyrNicknameDKBlackBambooCTCSplashRoundedKuraleBoughLirussTYGRADrinaPlanetN2ArciformSansMonplesirMarshStencilPlainotDublonCColumnSimpleMullerThinRomeoRUSBedrockCCAdamKubertMorningGloryBatmanForeverEnchantedLandPH100CondCapsRibbonHeartVALStencilcyrCitricaCyrillicReginaKursivItalicZettaPapyrusSlotCyrillicAstakhovSkinPirouCyrillicSnowForSantaOrbitronWerfusPFHandbookProThinIcekingdomElevatePERSONALAstakhovDishedSevillaDecorCellblockNBPBudmoJigglerCyrCricketNormalAtibaCyrillicFreakomixbyAvdoManProHarryPotterAmericanTextCJazzBallVoxRegularAstakhovDishedGlamourPanforteProProbaNav2RegularLDSlenderNEXTART-LightAstakhovFirstABRegularOldKingC-BoldMerkurVEGeorgianBrushAlbertusMediumEskalFont4YouAstrocyrWarfaceRedisTYGRAOldComedyBuccaneerMunchkinCyrChocolatesovietfontCocaColaBrandbePhenomenaaMavickFontMarkerFeltWideAlabamaEurotypeClobberinTimeBadaBoomBBAmericanCaptainCyberfallPixelDigivolveCgFiorelloPacmaniaRoddenberryVideopacAmphiWoWSlFKGUpheavalProRealizeMyPassionOldRosaNormalGagalinGTAPricedownVAGWorldBoldkrestikPFHellenicaSerifProSnowstormSnowstormInlineKramolaSmesharikiCOLORADOIIICOLORADOIOICOLORADOXGOSTtypeAAstakhovvitrageAstakhovpastelMonsterHighKomikaAxisPeaceSansSporedomRUSMartAWXRotondaKarminaWidefaceAWXssdrebedenCassandraElzevirLobsterKittyKatJuraLightMarmeladRegularBIPFuturaRoundTiProunNormalLCDNOVAAnnabelleStudioScriptCTTSTRTBicubikTagirCTTNormalBirchCTTinformKursivcArchangelskZionTrainAeroMaticsStencilMetroModernzopaPlayDictDsjapancyrMetroloxRunicDSCopticDSSupervixenCyrBreezeScriptoramaScriptSSKPorscheFloydianCyrLCChalkOLGACDsBrushesAnfisaGroteskMasonDisneyParkAmericanRetroPudelinaMolotNiseSegaNFSJLtvNeuropolDeusExHarryPotterFriendsDSRabbitKonkordRetroLCBlowzyTopazSeedsCyrMediumWenatcheeKBVectroidZhiznVogueCyrUnderdogGlideSketchCitricaCompoShadowBeastVsButtercrumbEtudeBMspiralProunxAWithSerifsArtemisDecoToscaniaIntruderArianGrqiAuctionArroTerminalNeuchaComicSansMSCaviarDreamsHauptbahnhofChaLimousinesAdLibWin95BTDSStamperChinaCyrGOSTtypeACalligraphCampanellaSladkoeshkaMartadecoronePteroqueMinecraftChocogirlKBBandRoundScriptTaurusParsekFuroreFlowObelixProCorinthiaRosaMarenaACampusTECHDTangoDiMBThinkTwiceBedrockCHondaCAlbionicTitulInflMachinaNovaBrkDarthEmilArctikascriptBistrocTokioFedericoLarisaScriptB52TeddyBearRupsterScriptGoosePoddCyrSirCliveACampusGravBoldMoonlightFlowerchildKonstruktoDecoMatterhorncttMontblancSTALKERARCH2DitedHardpixelLegendeCTechno28AmericanCaptainResagokrZnikomitNo24ZnikomitNo24ThinTexgyreAdventorWolgastTwoArtDecorinaMedievalEnglishAmoreMBDemonicAliceComfortaaParizhelPompadurChibolaSeminariaStradivariMoyenageProletariatHermannGotischBalloonXBdBalloonOlympiaDecoVarieteBirusaReginaKursivConkordiaNewRecordMayaEpsilXiomaraPasadenaDecoRomanaScriptJuliaScriptConnieRegularRepivmanuscSochi2014RegularGramoclerictonTetraclerictonInkyLeokadiaDecoMatreshkaEuroferenceProtoSansUndergradUltrathinAvdiraRGrishenkoBangWhackPowInfinityPaintItDarkSangBleuSumkinTypefaceEyelevation6AAHigherupAlfavitaPoiretOneRegularIronRussianAleksandraCDurazkyCaptchaCodeOwnHandNiseSegaAAHaymakerAANeonOOSTROVKARDONboldIOCONDIOSMovieLettersFabryka4FRUSCHEAPSTEAngryBirdsAAMagnumRUSwolfensteinTamilaParanoiaMLikesBoomboomVelesRKobzarKSNEON1NeonDLNeonOLNeonGFTOdlNickainleyCyberpunkSGMLIIAppetiteNewLavanderiaC
Размер шрифта (px):

Стиль текста:
NormalBoldItalicItalic Bold

Цвета

Тень объёма 1(%):
Тень объёма 2(%):
Цвет фона
Прозрачный цвет

Фоновое изображение:
Удалить изображение

Параметры анимации

Скорость анимации:
Мин. длина линий:
Толщина обводки:
Объём 2:
Радиус тени 1:
Радиус тени 2:

Начало через (с):
Макс. длина разрыва:
Объём 1:
Тень 1 (%):
Тень 2 (%):

Размер области

Ширина области (px):

Высота области (px):

34%

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

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Текст
Текст:

Стиль текста:
NormalBoldItalicItalic Bold

Цвета и свечение

Цвет букв
Цвет выкл. букв

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

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

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

Тень: смещение X (px), смещение Y (px)

Фон

Цвет фона:

Изображение:
Удалить изображение

№ Б

↻

▌▌

►

+
—

Параметры анимации

Время анимации (с):

Размер области

Ширина области (px):

Высота области (px):

34%

Конструктор Градиент надписей и текстов с анимацией красивым шрифтом

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Стиль текста:
NormalBoldItalicItalic Bold

Цвета, позиция (%):
+
—

Фон

Цвет фона:

Прозрачный цвет

Градиент и анимация

Наклон (°):

Растянуть (%):

Продолжительность анимации (с):

Размер области

Ширина области (px):

Высота области (px):

34%

Конструктор Shattering надписей и текстов с анимацией разрушения красивым шрифтом

Сохранить

Текст, шрифт

Цвета,Фон

Анимация

Экран

Стиль текста:
NormalBoldItalicItalic Bold

Цвет текста

Изображение:
Удалить изображение

Цвет фона

Фоновое изображение:
Удалить изображение

Параметры анимации

Время анимации (с):
Пауза до разделения(с):
Мин прозрачность частиц (%):
Разброс (0% — 500%):

Задержка (с):
Пауза после разделения(с):
Размер частиц (%):
Мин. разброс (0% — 500%):

Размер области

Ширина области (px):

Высота области (px):

34%

Вариант 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;

}

Best Neon Text Generators

In this part of the article, we are going to explain about 8 effective neon text generators that you can use for your videos and activity pages. They are listed in no particular order:

1. Flaming Text

Flaming text is a popular neon sign maker online. You can get a wide range of options here for customizing the text. Apart from adding neon effects, you can even alter the background, shadow etc. The page contains Ads.

Features:

It has a 4 step process to create neon text.
The interface is simple and easy to navigate.
You get different logos and fonts on this page to decorate your text.
You can even add an image to the text using this neon text generator.

2. Cool Text

Though, Cool Text is a nice online neon text generator, the excessive Ads make it difficult to track the desired tools on the page.

Features:

You can add logo, text, image and shadow to create neon texts for your video.
You can create composite logos here.
You can customize the shadow, text and logos as you desire.
You can download, edit, get HTML or email the created logo to someone right from the site.

3. Poster Gen

PosterGen has a wide range of products apart from neon texts. You can create chalkboard posters, photography prints, canvas art, gym posters, quote posters, quote generator, graffiti creator etc. It is a paid neon text generator and hence you need to pay for the created art work to be yours.

Features:

The generated neon text can be printed and shipped to you.
A good amount of options like stroke color, shadow color etc. are available.
The site doesn’t contain any Ads.
It has a simple interface.

4. Glow txt

Using this site, you can not only create neon texts for videos, but also for social media posts and comments. Moreover, school projects, blog headings, forum signatures, YouTube thumbnails, posters can also be done using Glowtxt.

Features:

By using the ‘Make Comment’ button you can create a graphic fit for a social media post.
You can pick various text styles to create the neon text by picking the style and tapping ‘Make text’.
The free font styles help you create awesome graphic art.

5. Flash Vortex

This site contains menus, texts, buttons, banners, clocks that you can customize from the available options there. On the ‘Home’ page, you can see what other people are up to. You need flash to view the page contents properly.

Features:

This online platform helps you to quickly and easily create glow text.
Using this neon text generator, you can even create beautiful banners with the default templates for text, banners etc.
Attractive button templates are there to feature your neon text.

6. Picture to People

This neon text generator can produce glow neon text effects online. You can control the light colors fully. For proper outputs, you must wait till the page loads completely.

Features:

You can create awesome rainbow light effects using the default color configuration.
When you use transparent PNG files, choosing a dark background would help you properly see the lights.
Creating colorful light text effects with this page is a cake walk.
For transparent PNGs, the background colors take a backseat.

7. Sygns

Though, this site comes with a neat interface, it takes time to load. It might annoy people who are new to the page. The effects are very lucrative to the eyes. The site is a paid one and you need to get the edited text shipped to you in printed format.

Features:

The site interface is easy to use.
You can pick the text styles, font styles, colors etc. very easily.

8. Engfto

This glow text maker page can produce GIFs with neon texts. They look really cool, if you want to include them on a blog or social media post. You can save the output as a GIF and enjoy.

Features:

You can change the text color, background, back light and so on.
You can even add the background picture’s link to include it in the GIF.
Image height, width and shadow width or height can be customized as you desire.