清风细雨楼

CSS3解析抖音LOGO制作的方法步骤
网页制作 2024/12/27 佚名
3 1
清风细雨楼 Design By www.eepep.com

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

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

效果预览：

CSS3解析抖音LOGO制作的方法步骤

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

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

CSS3解析抖音LOGO制作的方法步骤

下面我们来分步骤实现。

完成单个“J”

<div class="jitter">
    <div class="logo"></div>
</div>

添加样式

.jitter {
  position: relative;
  width: 200px;
  margin: 100px auto;
}

// 第一部分
.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 47px;
  height: 218px;
  z-index: 1;
  background: #24f6f0;
}
// 第二部分
.logo::after {
  content: "";
  position: absolute;
  width: 140px;
  height: 140px;
  border: 40px solid #24f6f0;
  border-right: 40px solid transparent;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
  top: -110px;
  right: -183px;
  border-radius: 100%;
  transform: rotate(45deg);
  z-index: -10;
}
// 第三部分
.logo::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 47px solid #24f6f0;
  border-top: 47px solid transparent;
  border-radius: 50%;
  top: 121px;
  left: -147px;
  transform: rotate(45deg);
}

第一部分，就是个矩形

第二部分，是圆环的1/4

第三部分，是圆环的3/4

CSS3解析抖音LOGO制作的方法步骤

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

添加另外一个“J”

<div class="jitter">
    <div class="logo"></div>
    <div class="logo"></div>
</div>

样式只需要添加

...
// 省略上面的样式
...
// 和第一个J错开10px
.logo:last-child {
  left: 10px;
  top: 10px;
  background: #fe2d52;
  z-index: 100;
}
// 填充红色
.logo:last-child::before {
  border: 47px solid #fe2d52;
  border-top: 47px solid transparent;
}
.logo:last-child::after {
  border: 40px solid #fe2d52;
  border-right: 40px solid transparent;
  border-top: 40px solid transparent;
  border-left: 40px solid transparent;
}

CSS3解析抖音LOGO制作的方法步骤 

主角登场 - mix-blend-mode

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

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

mix-blend-mode: normal;         // 正常
mix-blend-mode: multiply;       // 正片叠底
mix-blend-mode: screen;         // 滤色
mix-blend-mode: overlay;        // 叠加
mix-blend-mode: darken;         // 变暗
mix-blend-mode: lighten;        // 变亮
mix-blend-mode: color-dodge;    // 颜色减淡
mix-blend-mode: color-burn;     // 颜色加深
mix-blend-mode: hard-light;     // 强光
mix-blend-mode: soft-light;     // 柔光
mix-blend-mode: difference;     // 差值
mix-blend-mode: exclusion;      // 排除
mix-blend-mode: hue;            // 色相
mix-blend-mode: saturation;     // 饱和度
mix-blend-mode: color;          // 颜色
mix-blend-mode: luminosity;     // 亮度

mix-blend-mode: initial;
mix-blend-mode: inherit;
mix-blend-mode: unset;

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

.logo:last-child {
  ...
  mix-blend-mode: lighten;
}

看看效果：

CSS3解析抖音LOGO制作的方法步骤

是不是很Ok了？

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

动画融合

.logo:last-child {
  ...
  animation: move 10s infinite;
}
@keyframes move {
  0% {
    transform: translate(200px);
  }
  50% {
    transform: translate(0px);
  }
  100% {
    transform: translate(0px);
  }
}

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

清风细雨楼 Design By www.eepep.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
清风细雨楼 Design By www.eepep.com
www.eepep.com 清风细雨楼
120,135影音资源
344,641技术资源
22,817软件资源
435,032站长资源

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
清风细雨楼 Design By www.eepep.com