-1
画像からボックスシャドウボタンを強調表示しようとしています。TweenMaxは画像の一部をアニメーション化します（GSAP）
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>
は私がボタン今次々と購入を強調したい - たとえば、私はこのイメージを持っています。ボタンを上に移動してサイズを大きくし、影を適用するだけで何も強調表示しない。
可能ですか？
「はい」の場合はどうすればよいですか？助けて。