首页 > 其他分享 >纯CSS+单个div实现抖音LOGO

纯CSS+单个div实现抖音LOGO

时间:2024-06-08 12:21:58浏览次数:30  
标签:drop transform 10px 抖音 skewX LOGO div border shadow

纯CSS+单个div就能绘制抖音LOGO

关键点:

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

预览结果如下:

在线预览 - 纯CSS+单个div标签实现抖音LOGO

实现代码:

html:

<div></div>

scss:

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;
    top: -60px;
    
    &::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);
    }
}

参考自 github https://github.com/andygoo/CSS-Inspiration/blob/master/shadow/douyin-logo.md

  

标签:drop,transform,10px,抖音,skewX,LOGO,div,border,shadow
From: https://www.cnblogs.com/liuhangui/p/18238518/css-douyin-logo

相关文章

  • 抖音小红书淘宝拼多多商家订单对接ERP|获取电商平台订单信息(商家授权)
     custom-自定义API操作 支持抖音拼多多淘宝小红书公共参数名称类型必须描述keyString是调用key(必须以GET方式拼接在URL中)secretString是调用密钥api_nameString是API接口名称(包括在请求地址中)[item_search,item_get,item_search_shop等]cacheString否[yes,no]默认yes,将......
  • Codeforces Round 950 (Div. 3)G. Yasya and the Mysterious Tree(字典树处理区间异或
    Problem-G-Codeforces存个字典树板子。1#include<bits/stdc++.h>23usingi64=longlong;45constexprintN=1E7;67inttrie[N][2];8intcnt[N][2];910inttot=0;11intnewNode(){12intx=++tot;13trie......
  • Codeforces Round 949 (Div. 2)D. Turtle and Multiplication(欧拉路径、线性筛、思维
    Problem-D-Codeforces  按照官方正解做即可,顺带存个jiangly板子。1#include<bits/stdc++.h>23usingi64=longlong;4std::vector<int>minp,primes;56voidsieve(intn){7minp.assign(n+1,0);8primes.clear();910......
  • 抖音外卖区域代理需要多少钱?入局成本如何计算?
    随着抖音外卖的日益火爆和抖音外卖平台全国代理的退场,想要申请抖音外卖平台区域代理的人数不断上涨。但是,创业毕竟不是儿戏,每一个决定都需要经过权衡利弊。而就做抖音外卖区域代理这一项目而言,抖音外卖平台区域代理需要多少钱才能成功入局便是创业者们需要考虑的首要问题。而......
  • Codeforces Round 950 (Div. 3) A B C D E
    A.ProblemGeneratortimelimitpertest:1secondmemorylimitpertest:256megabytesinput:standardinputoutput:standardoutputVladisplanningtoholdm......
  • Codeforces Round 951 (Div. 2)
    A.GuesstheMaximum题意:给定一个数组,求一个k值,k满足对于任意的这个数组的区间的最大值max,k<max。求满足条件的最大k。思路:只考虑长度为2的区间即可。参与到比较中的数值一定是两个数中的大数,从所有大数中选出最小的一个即可。总结:赛时很快就A掉了,但是思考的不够细节,思维太......
  • CodeForces Round #951(Div. 2) 补题记录(A~D)
    A容易发现对于任意一个长度为\(n\),下标从\(1\)开始的序列\(a\),若\(1\lel\ler<n\),则必然有\(\max\limits_{i=l}^ra_i\le\max\limits_{i=l}^{r+1}a_i\)。若\(1<l\ler\len\),则必然有\(\max\limits_{i=l}^ra_i\le\max\limits_{i=l-1}^ra_i\)。很显然Bob希望......
  • LOGO!的S7通信应用
    建立连接都以网络视图为平台,当然电路图模式也可以配置通讯,各人使用喜好而已。1.两台LOGO之间的S7添加两个新设备如果想要默认连接的话,直接把两个PLC拖拽连线,左侧CPU是客户机,右侧CPU是服务器,如果需要调整服务器和客户端选项的话拖拽更换CPU位置即可。双击蓝色连接线,设置详......
  • codeforces 1442 D Codeforces Round 681 (Div. 1, based on VK Cup 2019-2020 - Fina
    链接大意就是给你n组物品,这n组物品里面每组有\(t_i\)个,且他们是按照价值不降的顺序排列的。现在允许取k个物品,每个物品必须取在数组的开头处,每个物品在被取用后就会消失。问你最大能够拿到多少价值的物品。其中\(n,k\leq1500,\sumt_i\leq1e6,a_i\leq1e8\)很背包吧。可......
  • 抖音账号永久封号后强制注销释放实名!一分钟教程方法公开
    在当今的数字化社会中,各式各样的社交媒体平台如雨后春笋般崭露头角。其中,抖音以其独特的短视频分享功能,已经成功吸引了亿万用户的关注。然而,随着用户数量的增长,平台的管理规定也日益严格,一些抖音账号因为违反规定而被永久封号。那么,这些被封的抖音账号是如何被强制注销并释......