CSS - CSS3动画解析抖音 LOGO制作

  • 文章介绍
  • 评价建议
  • 温馨提示:
    本站为源代码分享站,源码多为网友投稿 我们没有对源码进行测试,不保证可用性、安全性以及版权归属。 因源码具有可复制性,一经购买 ,不得以任何形式退款。
    如需商业用途 请点击商业源码栏目,购买商业源码.
    客服QQ:977439673

    前言

    “字节跳动”现今也是如日中天,旗下产品,除头条外,还有短视频平台“抖音”,人气也是非常高,据说拥有7亿用户。

    今天我们就来研究研究抖音的logo,蹭蹭热度。

    效果预览:

    CSS - CSS3动画解析抖音 LOGO制作
    CSS3动画解析抖音 LOGO制作

    主要用css3新增属性mix-blend-mode混合模式来实现。

    分解

    我们先来看看它的组成,由大写的“J”组成,然后有3种颜色,白色、红色、和天蓝色。

    ok,我们先来完成一个“J”。根据以往的经验,我们把它拆分成3部分。

    CSS - CSS3动画解析抖音 LOGO制作
    CSS3动画解析抖音 LOGO制作

    下面我们来分步骤实现。

    完成单个“J”

    <div class="jitter">
        <div class="logo"></div>
    </div>
    
    HTML

    添加样式

    .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);
    }
    
    CSS

    第一部分,就是个矩形
    第二部分,是圆环的1/4
    第三部分,是圆环的3/4

    CSS - CSS3动画解析抖音 LOGO制作
    CSS3动画解析抖音 LOGO制作

    添加另外一个“J”

    <div class="jitter">
        <div class="logo"></div>
        <div class="logo"></div>
    </div>
    
    HTML

    样式只需要添加

    ...
    // 省略上面的样式
    ...
    // 和第一个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;
    }
    
    CSS
    CSS - CSS3动画解析抖音 LOGO制作
    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;
    
    
    CSS

    然后我们添加mix-blend-mode:lighten

    .logo:last-child {
      ...
      mix-blend-mode: lighten;
    }
    
    CSS

    看看效果:

    CSS - CSS3动画解析抖音 LOGO制作
    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);
      }
    }
    
    CSS

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

    http://demo.javanx.cn/longyao/loading.html

    在线演示地址

    演示地址: CSS3动画解析抖音 LOGO制作

    Leave a Reply

  • 如本资源侵犯了您的权益,[email protected]!我们将在收到邮件的1个小时内处理完毕。

  • 本站仅为平台,发布的资源均为用户投稿或转载!所有资源仅供参考学习使用,请在下载后的24小时内删除,禁止商用!

  • OKMG(芒果源码)助力正版,如您有自己的原创产品,可以联系客服投稿,代理出售!

  • OKMG(芒果源码)客服QQ:29139260

  • OKMG(芒果源码)商务电话(仅对企业客户/个人用户请联系QQ客服):010-86463891

  • 请注意:本站不提供任何免费的技术咨询服务,为了节约时间,下载前 请确认自己会技术
  • 免责声明 芒果源码,一个精品商业网站源码分享平台 WWW.OKMG.CN 1. 本站所有资源来源于用户上传和网络,均不允许转载,如有侵权请邮件联系站长! 2. 分享目的仅供大家学习和交流,您必须在下载后24小时内删除! 3. 如发现会员转载本站资源文章,本站有权封禁会员账号! 4. 不得使用于非法商业用途,不得违反国家法律。否则后果自负! 5. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解! 6. 如有链接无法下载、失效或广告,请联系管理员处理! 7. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需! 8. 如遇到加密压缩包,默认解压密码为"www.okmg.cn",如遇到无法解压的请联系管理员! 9.本站客服:29139260

    售后服务:

    • 售后服务范围 1、商业模板使用范围内问题免费咨询
      2、源码安装、模板安装(一般 ¥50-300)服务答疑仅限SVIP用户
      3、单价超过200元的模板免费一次安装,需提供服务器信息。
      付费增值服务 1、提供dedecms模板、WordPress主题、discuz模板优化等服务请详询在线客服
      2、承接 WordPress、DedeCMS、Discuz 等系统建站、仿站、开发、定制等服务
      3、服务器环境配置(一般 ¥50-300)
      4、网站中毒处理(需额外付费,500元/次/质保三个月)
      售后服务时间 周一至周日(法定节假日除外) 9:00-23:00
      免责声明 本站所提供的模板(主题/插件)等资源仅供学习交流,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担,有部分资源为网上收集或仿制而来,若模板侵犯了您的合法权益,请来信通知我们(Email: [email protected]),我们会及时删除,给您带来的不便,我们深表歉意!

    Hi, 如果你对这款模板有疑问,可以跟我联系哦!

    联系客服
    开通VIP 享更多特权,建议使用 QQ 登录
    /** * 项目名称:用户离开标题切换 */