CSS技巧：单标签实现抖音LOGO。

关键点

主要借助了两个伪元素实现了整体结构，借助了 drop-shadow 生成一层整体阴影
drop-shadow 只能是单层阴影，所以另一层阴影需要多尝试
contrast(150%) brightness(110%) 则可以增强图像的对比度和亮度，更贴近抖音LOGO的效果

<div></div>

body {background: #000;overflow: hidden;
}div {position: relative;width: 37px;height: 218px;margin: 100px auto;z-index: 1;background: #fff;filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(110%);box-shadow: 11.6px 10px 0 0 #fe2d52;z-index: 10;// transform: skewX(-5deg);animation: move 5s infinite ease-in;&::before {content: "";position: absolute;width: 100px;height: 100px;border: 37px solid #fff;border-top: 37px solid transparent;border-radius: 50%;top: 123px;left: -137px;transform: rotate(45deg);filter: drop-shadow(16px 0px 0 #fe2d52);// mix-blend-mode: overlay;}&::after {content: "";position: absolute;width: 140px;height: 140px;border: 30px solid #fff;border-right: 30px solid transparent;border-top: 30px solid transparent;border-left: 30px solid transparent;top: -100px;right: -172px;border-radius: 100%;transform: rotate(45deg);z-index: -10;filter:drop-shadow(14px 0 0 #fe2d52);}
}@keyframes move {4% {transform: skewX(7deg) translate(-30px);}7% {transform: skewX(-6deg) translate(18px);}9% {transform: skewX(5deg) translate(-8px);}10% {transform: skewX(-4deg)translate(6px);}11% {transform: skewX(3deg)translate(-4px);}12% {transform: skewX(-2deg) translate(2px);}13% {transform: skewX(1deg) translate(0px);filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(120%) brightness(110%) blur(3px);}30% {filter:drop-shadow(-10px -10px 0 #24f6f0) contrast(150%) brightness(120%) blur(0px);}
}

CSS技巧：单标签实现抖音LOGO。相关推荐

仅用一个HTML标签，实现带动画的抖音LOGO
大家好,我是零一,今天给大家表演仅用一个HTML标签实现带动画的抖音LOGO,涉及了很多知识点,欢迎交流讨论先上结果,最终实现效果如下: 还原度应该还可以吧? 抖音Logo结构想要用CSS来画抖 ...
仅用一个 HTML 标签，实现带动画的抖音 Logo
作者 | 零一来源 | 前端印象今天给大家表演仅用一个HTML标签实现带动画的抖音LOGO,涉及了很多知识点,欢迎交流讨论先上结果,最终实现效果如下: 成品图还原度应该还可以吧? 抖音Log ...
css制作类抖音logo
欢迎访问我的博客地址 : 博客地址 css制作类抖音logo 源码如下: //html<div class="wrapperMain"><div class=&q ...
InkScape绘制抖音LOGO的教程
InkScape绘制抖音LOGO的教程班级:计科1713班学号:02210171326 姓名:王艺皓步骤: 1.将文件->文档属性中的网格单位改为px,关闭显示页面边界.将视图中改为自定义 ...
CSS3动画解析抖音 LOGO制作
为什么80%的码农都做不了架构师?>>> 前言 "字节跳动"现今也是如日中天,旗下产品,除头条外,还有短视频平台"抖音",人气也是非常高 ...
CSS3解析抖音 LOGO制作
"抖音",人气也是非常高,据说拥有7亿用户. 今天我们就来研究研究抖音的logo,蹭蹭热度. 效果预览: 主要用css3新增属性mix-blend-mode,"组成,然后 ...
有趣的歌单昵称_抖音最火的10大神曲你的歌单里面有几首
抖音可以说是现在最流行的视频软件了,上面会分享各种有趣的事情,不少好听的音乐都是从这里被发掘的,那么在又有哪些动人心弦的歌曲呢?今天小编就来为大家列出抖音最火的10大神曲. 抖音最火的10大神曲: 1 ...
3个小技巧，轻松提高抖音视频的播放量
抖音发的视频播放量很低,有什么方法可以提高一下吗? 估计有同学一点会说dou+,其实除了花钱去提高曝光量,还有一些免费提高视频播放量的方法. 你说,大家拍视频的目的都一样,就是希望有人关注,有人观看, ...
售后单导出（抖音、快手）
下载地址 webcrawl最新版本安装教程用途与功能当前只支持售后单导出所见即所得的导出自由选择导出项自由排序Excel导出列顺序导出过程中有进度提示,用户可以随时提前中止软件首页当 ...

CSS技巧：单标签实现抖音LOGO。

关键点

CSS技巧：单标签实现抖音LOGO。相关推荐

最新文章

热门文章