-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>
내가 버튼 이제 잇달아 주문을 강조 할 - 예를 들어 나는이 이미지를 가지고있다. 아무 것도 강조하지 않고 버튼을 위로 이동하고 크기를 늘리고 그림자를 적용하십시오.
가능합니까?
예, 그렇다면 어떻게해야합니까? 도와주세요.