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

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

 3625  49  查看评论 (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'}
		]
	}
})
相关插件-动画效果

3D签到墙 threejs(使用元素周期表修改)

采用threejs官方demo的元素周期更改的,展示为图片,可自动更换或手动更换,目前为旋转状态;模拟推送用户可以优化随机更改图片应该会更好点。
  动画效果
 12164  140

超炫背景粒子效果

超炫背景粒子效果
  动画效果
 20475  254

html5 水波扩散效果

HTML5实现点击水波扩散效果
  动画效果
 16384  144

jQuery飘落的枫叶

枫叶一片一片又一片,此时最相思,代码简单方便调用
  动画效果
 7590  44

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

取消回复