css 水滴效果

css 水滴效果

<style type="text/css">

.demoSpan1{width:26px;height:40px; width:40px; display:block; position:relative;}

.demoSpan1:before{content:'1'; height:26px; width:26px; display:block; position:absolute; top:2px; left:0px; z-index:1; line-height:26px; background:#333; border-radius:40px;-webkit-border-radius:40px;-moz-border-radius:40px; color:#fff; text-align:center;}
.demoSpan1:after{content:''; height:0px; width:0px; display:block; position:absolute; bottom:2px; left:3px; border:10px transparent solid; border-top-color:#333; border-width:15px 10px 0px 10px; }
</style>

<span class="demoSpan1">

<!-- 手机H5模拟双击效果 -->
<button id="btn"></button>
<script src="jquery-2.1.1.min.js"></script>
<script>
var i = 0;
$('#btn').on('click', function () {
i++;
setTimeout(function () {
i = 0;
}, 500);
if (i > 1) {
alert('这是双击');
i = 0;
}
})
</script>