基于Anime.js和CSS3的炫酷文字动画特效

所属分类:其他-动画效果

 1646  24  查看评论 (0)
基于Anime.js和CSS3的炫酷文字动画特效 ie兼容11

实现的主要思想如下:我们为每个字母创建一个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'}
		]
	}
})
相关插件-动画效果

炫酷css3登录界面

带CSS3动画特效的时尚登录界面UI设计
  动画效果
 26577  302

css动画库Mimic.css

Mimic.css是一个css动画库,可以通过简单的调用,得到您想要的动画效果
  动画效果
 4073  44

彩色火焰球弹跳动

彩色火焰球弹跳动
  动画效果
 13569  127

水滴特效插件弹力实足

jquery加html5实现水滴特效插件
  动画效果
 10653  78

讨论这个项目(0)回答他人问题或分享插件使用方法奖励jQ币

取消回复