简洁视频播放器UI动效组件
简洁风的视频播放器界面,带边框进度条、全屏切换、音量调节这些常见功能,配合上TweenMax的动画,体验感还挺不错的。
用的是JavaScript配合CSS3来交互和样式,代码结构也清晰,逻辑都写在js
文件里,样式则归在css
目录下,挺好上手。
像播放按钮动画、进度条的填充这些动态效果,TweenMax搞定起来相当顺滑。你想做点交互动效的 UI,这套资源可以拿来参考,或者直接魔改。
主页面是index.html
,结构就视频元素、按钮、控制条啥的,一目了然。用video
标签嵌的视频,兼容性还不错,配合 JS 一套逻辑跑下来,响应也快。
对动画感兴趣的前端可以重点看看player.js
里是怎么调用TweenMax.to()
这些函数的,写法挺实用的。
如果你平时喜欢搞些有细节动效的前端 UI,这个资源可以省不少力,尤其是动画和交互结合那块,做得蛮干净的。
78.99KB
文件大小:
评论区