html5文字动态切换效果,html5 css3全屏酷炫的文字动画切换特效

【温馨提示】源码包解压密码：www.youhutong.com

效果图：

描述说明：

该文字动画特效使用anime.js来制作动画特效，字母的处理使用ming插件，共有10种非常炫酷的文字动画效果。不支持IE

实现的主要思想如下：我们为每个字母创建一个SVG，然后将图形点缀到每个字母的附近。

初始化：const word = new Word(element, options);

options: {

shapesOnTop: false, // 图形分布在字母的上方，否则在下方

totalShapes: 10, // 字母附近图形的数量

shapeTypes: ['circle', 'rect', 'polygon'], // 图形的类型

shapeColors: ['#e07272', '#0805b5', '#49c6ff', '#8bc34a', '#1e1e21'], // 随机选取颜色的种类

shapeFill: true, // 图形填充颜色，否则仅描边

shapeStrokeWidth: 1 // 描边宽度

}

显示和隐藏字母：word.show(options)

word.hide(options)

定义字母和图形展显的效果：word.show({

lettersAnimationOpts: {

duration: 400,

delay: (t,i) => i*60,

easing: 'easeInExpo',

opacity: [0,1],

scale: [0,1]

},

shapesAnimationOpts: {

duration: 700,

delay: (t,i) => i*40,

easing: 'easeOutExpo',

translateX: () => [0,anime.random(-20,20)],

translateY: () => [0,anime.random(-400,400)],

scale: () => [randomBetween(0.2,0.6),randomBetween(0.2,0.6)],

rotate: () => [0,anime.random(-16,16)],

opacity: [

{value: 1, duration: 1, easing: 'linear'},

{value: 0, duration: 700, easing: 'easeOutQuad'}

]

}

})

浏览器启用弹出窗口过滤功能，将无法跳转到下载页。在浏览器地址栏右边符号提示处点击允许就可以了！

【温馨提示】源码包解压密码：www.youhutong.com

郑重声明：

1、本站源码仅供个人学习研究和交流使用，请于下载后二十四小时内删除

2、本站大多资源来源于互联网、用户分享，仅供学习交流使用，本站不提供任何技术支持

3、本站联系方式Email：admin@youhutong.com ，收到邮件会第一时间处理。

4、如侵犯到任何版权问题，请立即告知本站(立即在线告知)，本站将及时删除并致以最深的歉意