CSS3解析抖音 LOGO制作

原创 智云编程 随笔 前端 73阅读 10 天前 举报

“抖音”,人气也是非常高,据说拥有7亿用户。

今天我们就来研究研究抖音的logo,蹭蹭热度。

效果预览:

主要用css3新增属性mix-blend-mode,”组成,然后有3种颜色,白色、红色、和天蓝色。

ok,我们先来完成一个“J”。根据以往的经验,我们把它拆分成3部分。

下面我们来分步骤实现。

完成单个“J”

添加样式

第一部分,就是个矩形
第二部分,是圆环的1/4
第三部分,是圆环的3/4

有句话叫做“方法不对,努力白费”所有的前端大神都有自己的学习方法,而学web前端的学习也基本一致,而对于一个什么都不懂的初学者,根本不会知道该怎么学,这也是造成失败的最直接原因。所以学web前端一定要有人指点。如果你处在迷茫期,找不到方向。可以加入我们的前端学习交流qun: 784783012 。有任何不明白的东西随时来问我。点击:前端学习圈

添加另外一个“J”

样式只需要添加

主角登场 - mix-blend-mode

CSS3 新增了一个很有意思的属性 – mix-blend-mode ,其中 mix 和 blend 的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。

混合模式最常见于 photoshop 中,是 PS 中十分强大的功能之一。下面来看看mix-blend-mode有哪些属性可以设置:

然后我们添加mix-blend-mode:lighten

看看效果:

是不是很Ok了?

然后我们添加动画,让第二个J缓慢和一个J融合。

动画融合

最终就可以实现第一张图片的预览效果了。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复