如何创建更好的爆炸效果
如何创建更好的爆炸效果
提问于 2013-01-22 19:11:02
我有一个动画，我正在尝试完成，应该像一个气泡从下面出来，然后，点击，爆炸，显示一个文本。
当前的效果是由下面这段代码实现的：
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。
我想有一个更好的爆炸效果，但我找不到一个解决方案，任何人有类似的问题或知道如何实现更“现实”的泡沫爆炸？就像爆发一样。
提前谢谢。
回答 2
Stack Overflow用户
发布于 2013-04-06 04:57:56
这是我创建的另一种泡泡效果。
<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>Stack Overflow用户
发布于 2019-11-15 23:11:14
我有一个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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/14457248
复制相关文章
相似问题
腾讯云开发者
