Question

我正在尝试从图像突出显示/框阴影按钮。例如，我有这个图像 -

https://static.gosquared.com/images/liquidicity/17_08_18_cta_03.png

<!doctype html>
<html lang="en">
<head>
  <title></title>
  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" crossorigin="anonymous">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.3/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/js/bootstrap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <style>
    .no-gutter{
      margin-left: 0;
      margin-right: 0;
    }
    .demo {
      position:relative;
    }
    .line-white
    {
      position: absolute;
      background-color:#fc9e04;
      width: 420px;
      height:1px;
      z-index: 1;
    }
    .analytics_img {
      width: 900px;
    }
  </style>
  <script>
    $(document).ready(function(){
     var tl = new TimelineLite({delay:0.5})
     TweenMax.set('#lineRight', {marginTop:270, left:400});
     tl.addLabel("start");
     tl.from("#lineRight", 1, {scaleX:0, transformOrigin:"left"}, "start");
    });

  </script>
</head>
<body>
  <div class="revenue_section">
    <div class="row no-gutter">
      <div class="col">
        <div class="demo">
          <div class="line-white" id="lineRight"></div>
        </div>
      </div>
      <div class="col">
        <img class="analytics_img" src="https://static.gosquared.com/images/liquidicity/17_08_18_cta_03.png"
          alt="">
      </div>
    </div>
  </div>
</body>
</html>

我想一个接一个地突出“立即购买”按钮。高亮显示任何内容，只需向上移动按钮并增加大小并应用阴影。

有可能吗？

如果是，该怎么做？帮助我。

Answer 1

尝试使用svg而不是png。我知道有一些在线工具可以用来将png转换成svgs，但我不确定它们有多好。你也可以使用photoshop和gimp创建svgs，我也使用这个方便的在线编辑器制作简单的... http://www.drawsvg.org/

希望有所帮助！

TweenMax动画部分图像（GSAP）

1 个答案: