微信是目前最流行的社交软件,每逢节假日,很多人都会在朋友圈分享自己的照片,有的人更是把照片做成了相册,图片的切换还伴随有音乐,这个就是微信场景。
接下来就带领大家做一个微信场景。
备注:通过本套教程的学习,能够学到触摸事件的使用,多点触摸技术,手势事件滑动方向判断的算法,CSS3动画调用,文字动画(动画全部自定义),音乐的播放和控制,CSS3动画的控制,网络字体的使用,js操作DOM等知识。大家学习过程中遇到任何问题可以加我QQ:1416759661.
大致步骤如下:
001、效果预览
002、创建项目
003、mete属性和径向渐变
004、添加图片
005、定位图片
006、监听触摸开始事件
007、监听触摸结束事件
008、滑动方向判断
009、上滑切换图片
010、添加过渡动画效果
011、调用动画和重置属性
012、下滑切换图片
013、添加3d旋转效果
014、添加文字效果
015、文字移动移动
016、文字样式重置
017、文字旋转效果
018、下滑文字效果
019、圆形音乐控制按钮
020、按钮旋转动画
021、停止旋转动画
022、控制音乐的播放与停止
023、自动调用动画切换效果
先体验下制作好的效果,使用微信扫描下面的二维码就可以看到效果。
也可以点击下面的链接查看效果,由于是国外的服务器,可能比较慢。
https://1416759661.github.io/changjing/





详细代码:
加载中

两情若是久长时,
又岂在朝朝暮暮!

当你老了,
头白了,
睡思昏沉,
依然爱慕你的美丽!
思念直到永远

两情若是久长时,
又岂在朝朝暮暮!

轻轻的我走了,
正如我轻轻的来!
我挥一挥衣袖,
不带走一片云彩!

CSS3教程上线啦
QQ:1416759661!

当你老了,
头白了,
睡思昏沉,
依然爱慕你的美丽!
思念直到永远

两情若是久长时,
又岂在朝朝暮暮!

轻轻的我走了,
正如我轻轻的来!
我挥一挥衣袖,
不带走一片云彩!

CSS3教程上线啦
QQ:1416759661!












