1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
      <output id="hzk7v"></output>
    2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
    3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

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

        发布时间2019-04-11 15:33:28   作者IT智云编程   我要评论

      这篇文章主要介绍了CSS3解析抖音LOGO制作的方法步骤的相关资料文中通过示例代码介绍的非常详细对大家的学习或者工作具有一定的参考学习价值需要的朋友们下面随着小编来一起学习学习吧

      “抖音”人气也是非常高据说拥有7亿用户

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

      效果预览

      主要用css3新增属性 mix-blend-mode ”组成然后有3种颜色白色红色和天蓝色

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

      下面我们来分步骤实现

      完成单个“J”

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

      添?#21451;?#24335;

      .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

      有句话叫做“方法不对努力白费”所有的前端大神都有自己的学习方法而学web前端的学习也基本一致而对于一个什么都不懂的初学者根本不会知?#26639;?#24590;么学这也是造成失败的最直接原因所以学web前端一定要有人指点如果你处在迷茫期?#20063;?#21040;方向可以加入我们的前端学习交流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;
      }

       

      主角登场 - mix-blend-mode

      CSS3 新增了一个很有意思的属性 – mix-blend-mode 其中 mix 和 blend 的中文意译均为混合那么这个属性的作用直译过来就是混合混合模式当然我们我们通常称之为混合模式

      混合模式最常见于 photoshop 中是 PS 中十?#26234;?#22823;的功能之一下面来看看 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;     // 饱?#25237;?
      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;
      }

      看看效果

      是不是很Ok了

      然后我们添加动画让第二个J缓慢和一个J融合

      动画融合

      .logo:last-child {
        ...
        animation: move 10s infinite;
      }
      @keyframes move {
        0% {
          transform: translate(200px);
        }
        50% {
          transform: translate(0px);
        }
        100% {
          transform: translate(0px);
        }
      }
      

      最?#31449;?#21487;以实?#20540;?#19968;张?#35745;?#30340;预览效果了

      以上就是本文的全部内容希望对大家的学习有所帮助也希望大家多多支持脚本之家

      相关文章

      • 用CSS3打造HTML5的Logo(实现代码)

        下面小编就为大家带来一篇用CSS3打造HTML5的Logo(实现代码)小编觉得挺不错的现在就分享给大家也给大家做个参考一起跟随小编过来看看吧
        2016-06-16
      • CSS3 绘制BMW logo实的现代码

        下面是我用CSS3绘制的一个BMW的标志浏览器支持chrome safari firefox---------------版本越高越支持
        2013-04-25
      • css3简单练习实现遨游浏览器logo的绘制

        本文将对css3做一下简单的练习主要是实现遨游浏览器logo的绘制将会使用到css3的各种方法就当巩固一下css3知识了感兴趣的朋友可以了解下啊或许对你们有所帮助
        2013-01-30
      • 纯css3无js实现的Android Logo(有简单动画)

        用纯css3无js实现的Android Logo带有简单的动画主要运用css3的transform,transition,结构与样式写的很清晰一目了然有这方面需求的朋友可以了解下哦希望本文对你
        2013-01-21
      • css3绘制天猫logo实现代码

        用css3实现的模拟tmalll的logo效果代码?#19981;?#30340;朋友可以参考下
        2012-11-06

      最新评论

      3dԻв

        1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
          <output id="hzk7v"></output>
        2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
        3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>

            1. <output id="hzk7v"><pre id="hzk7v"><address id="hzk7v"></address></pre></output>
              <output id="hzk7v"></output>
            2. <nav id="hzk7v"><i id="hzk7v"><em id="hzk7v"></em></i></nav>
            3. <listing id="hzk7v"><delect id="hzk7v"><em id="hzk7v"></em></delect></listing>