使用CSS3怎么制作一个抖音的标志

  介绍

今天就跟大家聊聊有关使用CSS3怎么制作一个抖音标志,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。

完成单个“J”

& lt; div 类=癹itter"比;   ,,,& lt; div 类=發ogo"祝辞& lt;/div>   & lt;/div>

添加样式

.jitter  {   位置:,才能相对;   ,,宽度:200 px;   ,,保证金:100 px 汽车;   }//,第一部分   .logo  {   位置:才能,绝对;   ,,:0;   ,,左:0;   ,,宽度:47 px;   ,,身高:218 px;   ,,z - index: 1;   背景:才能,# 24 f6f0;   }//,第二部分   .logo: after  {   内容:,“才能”;   位置:才能,绝对;   ,,宽度:140 px;   ,,身高:140 px;   边境才能:40 px  solid  # 24 f6f0;   边境才能:40 px  solid 透明;   ,,border-top: 40 px  solid 透明;   ,,border-left: 40 px  solid 透明;   ,,:-110 px;   ,,右:-183 px;   ,,这个特性:100%;   变换才能:旋转(45度);   ,,z - index: -10;   }//,第三部分   .logo: before  {   内容:,“才能”;   位置:才能,绝对;   ,,宽度:100 px;   ,,身高:100 px;   边境才能:47 px  solid  # 24 f6f0;   ,,border-top: 47 px  solid 透明;   ,,这个特性:50%;   ,,:121 px;   ,,左:-147 px;   变换才能:旋转(45度);   }

第一部分,就是个矩形

第二部分,是圆环的1/4

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

使用CSS3怎么制作一个抖音标志

有句话叫做“方法不对,努力白费”所有的前端大神都有自己的学习方法,而学网络前端的学习也基本一致,而对于一个什么都不懂的初学者,根本不会知道该怎么学,这也是造成失败的最直接原因,所以学网络前端一定要有人指点。如果你处在迷茫期,找不到方向。可以加入我们的前端学习交流群:784783012。有任何不明白的东西随时来问我。点击:前端学习圈

添加另外一个“J”

& lt; div 类=癹itter"比;   ,,,& lt; div 类=發ogo"祝辞& lt;/div>   ,,,& lt; div 类=發ogo"祝辞& lt;/div>   & lt;/div>

样式只需要添加

…//,省略上面的样式   …//,和第一个J错开10 px   .logo: last-child  {   ,,左:10 px;   ,,:10 px;   ,,背景:# fe2d52;   ,,z - index: 100;   }//,填充红色   .logo:胎::before  {   边境才能:47 px  solid  # fe2d52;   ,,border-top: 47 px  solid 透明;   }   .logo:胎::after  {   边境才能:40 px  solid  # fe2d52;   边境才能:40 px  solid 透明;   ,,border-top: 40 px  solid 透明;   ,,border-left: 40 px  solid 透明;   }

使用CSS3怎么制作一个抖音标志”>,</p> <p> <强>主角登场——mix-blend-mode </强> </p> <p> CSS3新增了一个很有意思的属性,mdash;<代码> mix-blend-mode> </代码,其中混合和混合的中文意译均为混合,那么这个属性的作用直译过来就是混合混合模式,当然,我们我们通常称之为混合模式。</p> <p>混合模式最常见于photoshop中,是PS中十分强大的功能之一。下面来看看<代码> mix-blend-mode> </代码有哪些属性可以设置:</p> <pre类= mix-blend-mode:,正常的,,,,,,,,,,//,正常   mix-blend-mode:用,,,,,,,,//,正片叠底   mix-blend-mode:屏幕,,,,,,,,,,//,滤色   mix-blend-mode:叠加,,,,,,,,,//,叠加   mix-blend-mode:变黑,,,,,,,,,,//,变暗   mix-blend-mode:减轻,,,,,,,,,//,变亮   mix-blend-mode:颜色减淡,,,,,//,颜色减淡   mix-blend-mode:颜色加深,,,,,,//,颜色加深   mix-blend-mode:强光,,,,,,//,强的光   mix-blend-mode:柔和的光,,,,,,//,柔光   mix-blend-mode:不同,,,,,,//,差值   mix-blend-mode:排斥,,,,,,,//,排除   mix-blend-mode:色相,,,,,,,,,,,,,//,色相   mix-blend-mode:饱和,,,,,,//,饱和度   mix-blend-mode:颜色,,,,,,,,,,,//,颜色   mix-blend-mode:光度;,,,,,//,亮度      mix-blend-mode:初始;   mix-blend-mode:继承;   mix-blend-mode:设置;

然后我们添加<代码> mix-blend-mode:减轻

.logo: last-child  {   ,,…   mix-blend-mode:,才能减轻;   null   null   null   null   null   null   null   null   null   null   null   null   null   null   null

使用CSS3怎么制作一个抖音的标志