Question

我想创建一个用HTML绘制一条线（带画布）的按钮。我已经尝试过使用CSS（显示：无），但它没有用。我该怎么做？

Answer 1

这就是我做的 -

https://jsfiddle.net/jadeallencook/wnhmgya7/

<强> HTML

<center>
    <div id="myLine"></div>
    <br />
    <button id="myButton">
        Draw Line
    </button>
</center>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<强> CSS

#myLine {
    height: 1px;
    width: 0px;
    background: black;
    margin-top: 25px;
}

.animate {
    -webkit-animation: myfirst 5s;
    animation: myfirst 5s;
}

@keyframes myfirst {
    0% {width: 0px;}
    100% {width: 500px;}
  }
@-webkit-keyframes myfirst {
    0% {width: 0px;}
    100% {width: 500px;}
  }

#myButton {
    display: block;
    border: 0px;
    border-radius: 5px;
    width: 200px;
    height: 50px;
    background: #000;
    color: #FFF;
}

<强> JS

$(function(){
    $('#myButton').click(function(){
        e1 = $('#myLine');
        e1.addClass('animate');
        e1.one('webkitAnimationEnd oanimationend msAnimationEnd animationend',
        function (e) {
            e1.removeClass('animate');
        });
    });
});

如何制作一个画线的按钮

1 个答案: