为了账号安全,请及时绑定邮箱和手机立即绑定

抖音故障风,3秒搞不定的教程我都不要!

标签:
Html/CSS

故障风大家应该蛮熟悉了~

不过被大众所熟知的还是因为抖音的流行

https://img1.sycdn.imooc.com//5d2d6d710001cf5106400427.jpg

image

最近抖音的负面新闻虽然蛮多的,

https://img1.sycdn.imooc.com//5d2d6d7900011c9001490113.jpg

image

不过我们今天只聊故障风设计哈~

https://img1.sycdn.imooc.com//5d2d6d81000145ea09231217.jpg

image

这种风格其实不太好把握

要达到那种让人一看就“哇,好厉害”的感觉其实有点难度的~

https://img1.sycdn.imooc.com//5d2d6dad0001b89907250423.jpg

image

https://img1.sycdn.imooc.com//5d2d6db0000121ca07330414.jpg

image

https://img1.sycdn.imooc.com//5d2d6dbb0001a5b906580761.jpg

image

你还记得吗?

不过现在大家时间都这么紧张,

用Ps搞效率不高又费时间

(其实我知道最关键的还是因为~)

https://img1.sycdn.imooc.com//5d2d6dc50001c5bf04000228.jpg

image

那~有没有几秒钟就出效果,

还能做的非常炫酷

还要效果多多不带重样的呢?

“喂醒醒做梦呢!”

NONONO、今天要说的这个法子,你的要求,统统能满足~!

很简单,

打开一个网站

https://photomosh.com/

https://img1.sycdn.imooc.com//5d2d6e090001957d07240501.jpg

image

上传一个文件

(图片、视频都OK哟~)

https://img1.sycdn.imooc.com//5d2d6e0d0001383706030344.jpg

image

然后选择一个/多个特效

PS:特效可以叠加,参数可以微调

https://img1.sycdn.imooc.com//5d2d6e130001a5d102460590.jpg

image

于是你就得到了以下效果~

https://img1.sycdn.imooc.com//5d2d6e210001f9e204000226.jpg

image

https://img1.sycdn.imooc.com//5d2d6e300001df6803600203.jpg

image

https://img1.sycdn.imooc.com//5d2d6e3b0001f9fa02400240.jpg

image

哈?这么快?

秒秒钟搞定了?~

还是动态的?!

。。。

没错。。。前端大佬的就是这么NB

原理是WEBGL和JS特效等前端技术~

so技术好真的可以为所欲为

https://img1.sycdn.imooc.com//5d2d6e460001421202000112.jpg

image

接着你可以继续尝试更多效果

https://img1.sycdn.imooc.com//5d2d6e740001316506020343.jpg

image

https://img1.sycdn.imooc.com//5d2d6e780001c6d806150353.jpg

image

https://img1.sycdn.imooc.com//5d2d6e7d00015d3106050344.jpg

image

https://img1.sycdn.imooc.com//5d2d6ea90001b2d105990348.jpg

image

如果嫌烦不想选,你也可以点击

https://img1.sycdn.imooc.com//5d2d6eac00015dde01820100.jpg

image

随机生成。直到你满意为止!

OK,确定好自己喜欢的效果之后就可以保存and发朋友圈装bi啦~

https://img1.sycdn.imooc.com//5d2d6eb1000156c102510072.jpg

image

可以在右上方选择三种文件格式

分别是静态图片、动态gif图片、webm格式视频

PS:WEBM这种格式大家见的少,可以通过视频软件转换为MP4

然后点击RECORD开始录制(jpg格式是直接save下载)

https://img1.sycdn.imooc.com//5d2d6ed40001b8da06540585.jpg

image

几秒钟生成完毕自动下载

然后就可以愉快的装bi啦~

https://img1.sycdn.imooc.com//5d2d6edf0001708703000300.jpg

image

PS:如果玩的开心记得感谢开发这个工具的前端工程师



作者:一个敲代码的前端妹子
链接:https://www.jianshu.com/p/4f97b9f43c18


点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消