js特效文字【js特效代码下载】 收藏 0

10个惊人的文字动画特效「值得收藏」

作者：semlinker

转发链接：https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw

本文小编将给大家介绍十个 「“惊人\”」 的文字动画效果，希望阿宝哥精心录制的十个 Gif 动画能让大家感到 「”惊艳“」，当然更希望这些特效能给大家实现文字动画效果时带来一些 「”灵感“」。

前段时间小编也发布了几篇：

更多的干货资源请见本篇文章底部！

❝

示例说明：该示例会基于页面的设置的文字，产生文字破碎动画。

示例来源：Arsen Zbidniakov

在线地址：https://codepen.io/ARS/pen/pjypwd

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的文字，产生文字效果。

示例来源：Mateus Generoso

在线地址：https://codepen.io/mtsgeneroso/pen/mdJRpxX

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的文字，产生描边动画效果。

示例来源：Claire Larsen

在线地址：https://codepen.io/ClaireLarsen/pen/XmVyVX

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的文字，产生呼吸动画效果。

示例来源：Tee Diang

在线地址：https://codepen.io/cybercountess/pen/RwNXxyq

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的字母，产生 「7」 种不同的字母扭曲动画效果。

示例来源：Mamun Khandaker

在线地址：https://codepen.io/kh-mamun/pen/NdwZdW

❞

「静态效果图」

「Gif 动态效果图（只展示其中 2 种效果）」

❝

示例说明：该示例会基于页面中的文字，产生路径动画效果。

示例来源：LegoMushroom

在线地址：https://codepen.io/sol0mka/pen/dFypl

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的文字，产生文字外框线条动画及文字滑动消失效果。

示例来源：Short

在线地址：https://codepen.io/short/pen/VyNqPa

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的文字，产生文字阴影动画效果。

示例来源：carpe numidium

在线地址：https://codepen.io/carpenumidium/pen/hHjEJ/

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的文字，产生激光手写粒子效果。

示例来源：Johan Karlsson

在线地址：https://codepen.io/DonKarlssonSan/pen/VazvQx

❞

「静态效果图」

「Gif 动态效果图」

❝

示例说明：该示例会基于页面中的文字，产生粒子散开动画效果。

示例来源：Hendry Sadrak

在线地址：https://codepen.io/hendrysadrak/pen/BNvrMm

❞

「静态效果图」

「Gif 动态效果图」

在日常工作中，如果小伙伴们也想实现文字动画特效，阿宝哥推荐一个用于实现 CSS3 文本动画的插件 —— textillate.js。该插件建立在简单但功能强大的 animate.css 和 lettering.js 库之上，并且提供了简单易用的 API，让你轻松地将 CSS3 动画应用在任何文本上。

作者：semlinker

转发链接：https://mp.weixin.qq.com/s/3bY8LqOB9_6_3UctQOdAhw

如何做出一个香消玉殒的网页文字特效

最近，迷上了CSS3特效，空闲时间学一些小案例，非专业，爱好。不断学习也能掌握一些更为全面的html，css，JavaScript的知识，以小博大，从兴趣出发再掌握更多网页开发知识。闲言少叙，直接开怼。

特效展示效果

第一步：

建两个文件，一个为index.html，一个为style.css。把style.css绑定到index.html文件头部进行关联。

第二步：

1、index.html文件输入简单代码。

<section>

<p class=\”text\”>

大家好，我就是玉树临风、高大威猛、人称山崩地裂水倒流、鬼见愁、美貌与智慧结合、英雄与侠义化身，人见人爱、花见花开、车见车爆胎、为朋友可以两肋插刀、为女朋友可以插朋友两刀的二哥。今天分享一个香消玉殒的文字效果。

</p>

</section>

其中文字可自行调整，当然要直接复制这段二哥也不介意。

2、style.css写全局样式和text样式

*{

margin: 0;

padding: 0;

box-sizing: border-box;

}

section{

position: relative;

min-height: 100vh;

display: flex;

align-items: center;

justify-content: center;

overflow:hidden;

background: #111;

}

section .text{

color: #fafafa;

max-width: 750px;

text-align: justify;

font-size: 20px;

line-height: 48px;

user-select: none;

letter-spacing: 1px;

}

第三步：

通过javascrip把text样式中的文字炸成一个一个的<span></span>标签。

在index.html写入JavaScript代码。

<script type=\”text/javascript\”>

// 把text文字大爆炸

const text = document.querySelector(\”.text\”);

text.innerHTML = text.textContent.replace(/\\S/g, \”<span></span>\”);// 正则中的s为大写，不然炸不动

</script>

炸完之后的效果

第四步：

在style.css文件中写入span样式

section .text span{

position: relative;

cursor: pointer;

display: inline-block;

}

第五步：

在index.html中通过JavaScript在span中增加active样式

<script type=\”text/javascript\”>

// 把text文字大爆炸

const text = document.querySelector(\”.text\”);

text.innerHTML = text.textContent.replace(/\\S/g, \”<span></span>\”);

const letters = document.querySelectorAll(\”span\”);

for (let i=0; i<letters.length; i++) {

letters[i].addEventListener(\”mouseover\”, function(){

letters[i].classList.add(\’active\’)

})

}

</script>

第六步：

这是见证奇迹的一步，在style.css样式中写入active样式和香消玉殒动画。

section .text span.active{

animation: smoker 4s linear forwards;

}

@keyframes smoker{

0%{

opacity: 1;

filter: blur(0);

transform: scale(1) translateX(0) translateY(0) rotate(0);

}

50%{

opacity: 1;

pointer-events: none;

}

100%{

opacity: 0;

filter: blur(20px);

transform: scale(8) translateX(300px) translateY(-300px) rotate(720deg);

}

}

总结：这里代码没有标注，如果初学者遇到了看不懂的属性或事件。可以复制搜索引擎查看相应的知识点，一次也许记不住，操作得多了就知道了。到最后还能举一反三，好多以前不理解的知识就会恍然大悟。

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com