CSS3分析抖音LOGO制做的方式流程

日期:2020-10-15 类型:科技新闻 

关键词:html网页制作,php网页制作,网页设计稿,网页编辑工具,学生网页设计模板

“抖音”,人气也是是非非常高,听说有着7亿客户。

今日大家就来科学研究科学研究抖音的logo,蹭蹭热度。

实际效果预览:

关键用css3新增特性 mix-blend-mode ,”构成,随后有3种色调,白色、鲜红色、和天蓝色。

ok,大家先来进行1个“J”。依据过去的工作经验,大家把它拆分为3一部分。

下面大家来分流程完成。

进行单独“J”

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

加上款式

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

// 第1一部分
.logo {
  position: absolute;
  top: 0;
  left: 0;
  width: 47px;
  height: 218px;
  z-index: 1;
  background: #24f6f0;
}
// 第2一部分
.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: ⑴10px;
  right: ⑴83px;
  border-radius: 100%;
  transform: rotate(45deg);
  z-index: ⑴0;
}
// 第3一部分
.logo::before {
  content: "";
  position: absolute;
  width: 100px;
  height: 100px;
  border: 47px solid #24f6f0;
  border-top: 47px solid transparent;
  border-radius: 50%;
  top: 121px;
  left: ⑴47px;
  transform: rotate(45deg);
}

第1一部分,便是个矩形框

第2一部分,是圆环的1/4

第3一部分,是圆环的3/4

有句话叫做“方式不对,勤奋徒劳”全部的前端开发高手都有自身的学习培训方式,而学web前端开发的学习培训也基础1致,而针对1个甚么都不懂的初学者,压根不容易了解该如何学,这也是导致不成功的最立即缘故。因此学web前端开发1定要有人指导。假如你处在迷茫期,找不到方位。能够添加大家的前端开发学习培训沟通交流qun: 784783012 。有任为何不搞清楚的物品随时来问我。点一下:前端开发学习培训圈

加上此外1个“J”

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

款式只必须加上

...
// 省略上面的款式
...
// 和第1个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;
}

 

主角出场 - mix-blend-mode

CSS3 新增了1个很成心思的特性 – mix-blend-mode ,在其中 mix 和 blend 的汉语意译均为混和,那末这个特性的功效直译过来便是混和混和方式,自然,大家大家一般称之为混和方式。

混和方式最多见于 photoshop 中,是 PS 中10分强劲的作用之1。下面看来看 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;
}

看看实际效果:

是否很Ok了?

随后大家加上动漫,让第2个J迟缓和1个J结合。

动漫结合

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

最后便可以完成第1张照片的预览实际效果了。

以上便是本文的所有內容,期待对大伙儿的学习培训有一定的协助,也期待大伙儿多多适用脚本制作之家。