Question

我正在尝试完成一个动画，它应该类似于从下面出现的气泡，然后点击，爆炸显示文字。

当前效果是由这段代码产生的：

jQuery('.bubble1').on('click', function () {
 jQuery(this).stop(true,true).hide('explode', { pieces: 75 } , 1000, function() {
  jQuery('.corpo-del-testo').show();
 });
});

I've also made a jsFiddle to demonstrate the effect

我希望有一个更好的爆发效果，但我找不到解决方案，任何人有类似的问题或知道如何实现更像“逼真”的爆炸泡沫？像爆发一样。

提前致谢。

Answer 1

这是我创建的另一种气泡弹出效果。

http://jsfiddle.net/EkZBg

<div id="content">
  <div id="bubble"></div>
  <div id="dummy_debris" class="debris" />
</div>

<script>

$(function(){
  // Document is ready
  $("#bubble").on("click", function(e) {
    pop(e.pageX, e.pageY, 13);
  });
});

function r2d(x) {
    return x / (Math.PI / 180);
  }

  function d2r(x) {
    return x * (Math.PI / 180);
  }

  // Specify particle_count as 10 + Math.random()*10 to make things interesting!
  function pop(start_x, start_y, particle_count) {
    arr = [];
    angle = 0;
    particles = [];
    offset_x = $("#dummy_debris").width() / 2;
    offset_y = $("#dummy_debris").height() / 2;

    for (i = 0; i < particle_count; i++) {
      rad = d2r(angle);
      x = Math.cos(rad)*(80+Math.random()*20);
      y = Math.sin(rad)*(80+Math.random()*20);
      arr.push([start_x + x, start_y + y]);
      // You could use an IMG tag here instead to make the particles sprites
      z = $('<div class="debris" />');
      z.css({
        "left": start_x - offset_x,
        "top": start_y - offset_x
      }).appendTo($("#content"));
      particles.push(z);
      angle += 360/particle_count;
    }

    $.each(particles, function(i, v){
      $(v).show();
      $(v).animate({
        top: arr[i][1], 
        left: arr[i][0],
        width: 4, 
        height: 4, 
        opacity: 0
      }, 600, function(){
        $(v).remove()
      });
    });
  }
</script>

<style>
/* Add browser prefixes as-needed. See CSS3please.com */
.debris {
 display: none;   
 position: absolute;
 width: 28px;
 height: 28px;
 background-color: #ff00ff;
 opacity: 1.0;
 overflow: hidden;
 border-radius: 8px;
}

#bubble {
  position:absolute;
  background-color: #ff0000;
  left:150px;
  top:150px;
  width:32px;
  height:32px;
  border-radius: 8px;
  z-index: 9;
}
</style>

Answer 2

我有一个CSS唯一单击效果，我曾使用它来制作“复制到剪贴板”按钮的动画：

#clickbox{
  display:none;
}
label {
  z-index: 1;
  position: relative;
  font-size: inherit;
  font-family: inherit;
  color: black;
  outline: none;
  border: none;
  padding: 5px;
  background-color: transparent;
}

label:hover {
  cursor: pointer;
}

label::before {
  content: '';
  z-index: -1;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  transform-origin: center;
  transform: scale(1);
}

#clickbox:checked + label::before{
  transition: all 0.75s ease-in-out;
  transform-origin: center;
  transform: scale(1.75);
  opacity: 0;
  white-space: pre;
   content: '\A\A Copied';
  border: 6px solid hsl(236, 32%, 26%);
}
#clickbox:checked + label i{
  color:#9A9A9A;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<html>
  <body style="margin:20px">
    <input type="checkbox" id="clickbox"/>
    <label for="clickbox" class="copy-click"><i id="container-id-copy" class="fa fa-clipboard"></i></label>
  </body>
</html>

如何创造更好的爆炸效果

2 个答案: