“抖音”，人气也是是非非常高，听说有着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张照片的预览实际效果了。
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 制作小程序_小程序商城_扫码点餐小程序_微信小程序开店的步骤_牛刀小程序 版权所有 （网站地图） 粤ICP备10235580号