本文源码自Github开源项目CSS inspiration——CSS灵感,大家可以通过文章底部的阅读原来来访问原文地址
抖音logo
抖音我们每天都在刷,抖音的logo大家也再熟悉不过,今天跟大家分享一下如何用纯CSS实现抖音的logo
拆分抖音logo
第一步,抖音logo是两个音符♪叠加、混合而成的
第二步,这个音符可以按照下面的图形拆分三个部分。
根据上面的图片,我们可以把抖音logo拆分成三个部分:
关键技术点
第一步中的叠加混合部分可以利用CSS3中的 mix-blend-mode: lighten 混合模式来实现,即将两个图层重叠的部分变为白色。
第二步的圆环可以利用 border-radius 和 transform 旋转来实现。
代码
html代码
<div class="g-container">
<div class="j"></div>
<div class="j"></div>
</div>
css代码
body {
background: #000;
overflow: hidden;
}
.g-container {
position: relative;
width: 200px;
margin: 100px auto;
filter: contrast(150%) brightness(110%);
}
.j {
position: absolute;
top: 0;
left: 0;
width: 47px;
height: 218px;
z-index: 1;
background: #24f6f0;
&::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);
}
&::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;
}
}
.j:last-child {
left: 10px;
top: 10px;
background: #fe2d52;
z-index: 100;
mix-blend-mode: lighten;
animation: moveLeft 10s infinite;
&::before {
border: 47px solid #fe2d52;
border-top: 47px solid transparent;
}
&::after {
border: 40px solid #fe2d52;
border-right: 40px solid transparent;
border-top: 40px solid transparent;
border-left: 40px solid transparent;
}
}
@keyframes moveLeft {
0% {
transform: translate(200px);
}
50% {
transform: translate(0px);
}
100% {
transform: translate(0px);
}
}
如果你觉得代码太多,不方便看,可以在 codepen 上查看。codepen链接地址如下:
https://codepen.io/Chokcoco/pen/oQxQyw