纯CSS实现抖音Logo
时间:2022-06-18
本文章向大家介绍纯CSS实现抖音Logo,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
本文源码自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
- Google用来处理海量文本去重的simhash算法原理及实现
- Open vSwitch系列之openflow版本兼容
- R预设配色系统及自定义色板
- SDN实战团分享(十二):Service Function Chain
- Open vSwitch系列之数据结构解析深入分析ofpbuf
- 前端自动化测试探索
- OpenStack Neutron之持续测试
- 决策树算法之----C4.5
- 趣味理解朴素贝叶斯
- 碎片化 | 第七阶段-11-小明的故事之集群、负载、并发-视频
- 碎片化 | 第五阶段-05-需求变更如何处理-视频
- 浏览器的UI线程
- 碎片化 | 第五阶段-06-BUG如何去处理-视频
- 碎片化 | 第六阶段-04-搭建nginx和Tomcat集群环境-视频
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例
- 进程池Pool
- 进程间通信-Queue
- 多任务版udp聊天器
- redis系列:通过日志案例学习string命令
- 协程实现tcp两个客户端的通讯
- java多线程系列:Executors框架
- python中上双互斥锁的线程执行流程
- 微软超融合私有云测试06-StorageSpaceDirect(S2D)分布式存储配置
- tcp回显客户端发送的数据
- Hibernate java.lang.String cannot be cast to Customer
- 解决java发送邮件没有主题且乱码
- 个人电脑做服务器(二)
- SSH转连接Redhat通过scp下载文件
- java使用正则表达式抓取网页内容存为txt
- android和javaEE通信的代码片