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


Posted in HTML / CSS onApril 11, 2019

“抖音”,人气也是非常高,据说拥有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);
  }
}

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
css3 给背景设置渐变色的方法
Sep 12 HTML / CSS
CSS3教程(8):CSS3透明度指南
Apr 02 HTML / CSS
css3实现wifi信号逐渐增强效果实例
Aug 09 HTML / CSS
移动web模拟客户端实现多方框输入密码效果【附代码】
Mar 25 HTML / CSS
基于HTML5 Canvas 实现弹出框效果
Jun 05 HTML / CSS
如何使用localstorage代替cookie实现跨域共享数据问题
Apr 18 HTML / CSS
HTML5 本地存储和内容按需加载的思路和方法
Apr 07 HTML / CSS
html5简单示例_动力节点Java学院整理
Jul 07 HTML / CSS
五分钟学会HTML5的WebSocket协议
Nov 22 HTML / CSS
HTML5逐步分析实现拖放功能的方法
Sep 30 HTML / CSS
html table呈现个人简历以及单元格宽度失效的问题解决
Jan 22 HTML / CSS
background-position百分比原理详解
May 08 HTML / CSS
浅谈CSS3 box-sizing 属性 有趣的盒模型
Apr 02 #HTML / CSS
CSS3 3D酷炫立方体变换动画的实现
Mar 26 #HTML / CSS
CSS3之2D与3D变换的实现方法
Jan 28 #HTML / CSS
CSS3移动端vw+rem不依赖JS实现响应式布局的方法
Jan 23 #HTML / CSS
用CSS3和table标签实现一个圆形轨迹的动画的示例代码
Jan 17 #HTML / CSS
简单几步用纯CSS3实现3D翻转效果
Jan 17 #HTML / CSS
css3实现3D文本悬停改变效果的示例代码
Jan 16 #HTML / CSS
You might like
ajax+php打造进度条代码[readyState各状态说明]
2010/04/12 PHP
php 根据url自动生成缩略图并处理高并发问题
2014/01/23 PHP
yii2中dropDownList实现二级和三级联动写法
2017/04/26 PHP
Highslide.js是一款基于js实现的网页中图片展示插件
2020/03/30 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
JQuery 表单中textarea字数限制实现代码
2009/12/07 Javascript
10个实用的脚本代码工具
2010/05/04 Javascript
js的2种继承方式详解
2014/03/04 Javascript
jquery实现的一个简单进度条效果实例
2014/05/12 Javascript
jquery实现在光标位置插入内容的方法
2015/02/05 Javascript
JQuery页面地址处理插件jqURL详解
2015/05/03 Javascript
JS组件系列之Bootstrap table表格组件神器【终结篇】
2016/05/10 Javascript
浅析JavaScript 箭头函数 generator Date JSON
2016/05/23 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
小程序实现人脸识别功能(百度ai)
2018/12/23 Javascript
简单了解JavaScript中常见的反模式
2019/06/21 Javascript
解决idea开发遇到javascript动态添加html元素时中文乱码的问题
2020/09/29 Javascript
关于better-scroll插件的无法滑动bug(2021通过插件解决)
2021/03/01 Javascript
[01:09:20]NB vs NAVI Supermajor小组赛A组 BO3 第二场 6.2
2018/06/03 DOTA
详解python如何在django中为用户模型添加自定义权限
2018/10/15 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python OpenCV利用笔记本摄像头实现人脸检测
2020/08/20 Python
Django的性能优化实现解析
2019/07/30 Python
Python 统计位数为偶数的数字代码详解
2020/03/15 Python
matplotlib制作雷达图报错ValueError的实现
2021/01/05 Python
印尼旅游网站:via
2017/11/12 全球购物
JAVA程序设计笔试题面试题一套
2015/07/28 面试题
计算机个人求职信范例
2014/01/24 职场文书
幼儿园数学教学反思
2014/02/02 职场文书
老公给老婆的保证书
2014/04/28 职场文书
2014学习优秀共产党员先进事迹思想汇报
2014/09/14 职场文书
关于对大人不礼貌的检讨书
2014/09/29 职场文书
社区三八妇女节活动总结
2015/02/06 职场文书
离婚起诉书范文2016
2015/11/26 职场文书
2016年优秀教师先进事迹材料
2016/02/26 职场文书
python playwright 自动等待和断言详解
2021/11/27 Python