我正在尝试制作如下图所示的点爆发：
目前，我已经使用伪元素尝试过此操作，但是，我只能生成 12 点突发，并且不能反映图像中显示的内容。
有没有办法只用几个元素来创建点爆发？
下面是我用来尝试此解决方案的代码：
div{
width:100px;
height:100px;
background:grey;
transform:rotate(45deg);
margin:50px;
}
div:after{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(135deg);
}
div:before{
position:absolute;
content:"";
background:grey;
width:100px;
height:100px;
transform:rotate(250deg);
}
<div></div>
使用 svg 可以通过一个简单的循环来实现。我使用 Snap，因为它让事情变得简单。
首先使用捕捉创建一个圆，然后使用循环从我引用的圆中找到我们需要的点这个问题 https://stackoverflow.com/questions/5300938/calculating-the-position-of-points-in-a-circle为了找到点。找到点后，只需给出这些点的线即可。通过更改循环中的数字，可以创建任何值的 rad 值点
24点连发
var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
fill:'tomato',
stroke:'tomato'
})
for (var num = 0; num < 24; num++) {
var rad1 = num * 15 * (Math.PI / 180);
var rad2 = (num+1) * 15 * (Math.PI / 180);
var rad3=(num+.5) * 15 * (Math.PI / 180);
var x1 = (30 * (Math.cos(rad1)) + 50)
var y1 = (30 * (Math.sin(rad1)) + 50)
var x2 = (40 * (Math.cos(rad3)) + 50)
var y2 = (40 * (Math.sin(rad3)) + 50)
var x3 = (30 * (Math.cos(rad2)) + 50)
var y3 = (30 * (Math.sin(rad2)) + 50)
var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
'fill':'tomato'
})
}
var text=s.text(35,50,'New').attr({
fill:'white'
})
div{
width:100vw;
height:100vh;
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>
36点爆发
var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
fill:'tomato',
stroke:'tomato'
})
for (var num = 0; num < 36; num++) {
var rad1 = num * 10 * (Math.PI / 180);
var rad2 = (num+1) * 10 * (Math.PI / 180);
var rad3=(num+.5) * 10 * (Math.PI / 180);
var x1 = (30 * (Math.cos(rad1)) + 50)
var y1 = (30 * (Math.sin(rad1)) + 50)
var x2 = (40 * (Math.cos(rad3)) + 50)
var y2 = (40 * (Math.sin(rad3)) + 50)
var x3 = (30 * (Math.cos(rad2)) + 50)
var y3 = (30 * (Math.sin(rad2)) + 50)
var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
'fill':'tomato'
})
}
var text=s.text(35,50,'New').attr({
fill:'white'
})
div{
width:100vw;
height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>
60点爆发
var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
fill:'tomato',
stroke:'tomato'
})
for (var num = 0; num < 60; num++) {
var rad1 = num * 6 * (Math.PI / 180);
var rad2 = (num+1) * 6 * (Math.PI / 180);
var rad3=(num+.5) * 6 * (Math.PI / 180);
var x1 = (30 * (Math.cos(rad1)) + 50)
var y1 = (30 * (Math.sin(rad1)) + 50)
var x2 = (40 * (Math.cos(rad3)) + 50)
var y2 = (40 * (Math.sin(rad3)) + 50)
var x3 = (30 * (Math.cos(rad2)) + 50)
var y3 = (30 * (Math.sin(rad2)) + 50)
var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
'fill':'tomato'
})
}
var text=s.text(35,50,'New').attr({
fill:'white'
})
div{
width:100vw;
height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>
这个也可以动画化
var s=Snap('svg');
var circle=s.circle(50,50,30).attr({
fill:'tomato',
stroke:'tomato'
})
var g=s.g();
for (var num = 0; num < 60; num++) {
var rad1 = num * 6 * (Math.PI / 180);
var rad2 = (num+1) * 6 * (Math.PI / 180);
var rad3=(num+.5) * 6 * (Math.PI / 180);
var x1 = (30 * (Math.cos(rad1)) + 50)
var y1 = (30 * (Math.sin(rad1)) + 50)
var x2 = (40 * (Math.cos(rad3)) + 50)
var y2 = (40 * (Math.sin(rad3)) + 50)
var x3 = (30 * (Math.cos(rad2)) + 50)
var y3 = (30 * (Math.sin(rad2)) + 50)
var line=s.polyline(x1,y1,x2,y2,x3,y3).attr({
'fill':'tomato'
})
g.add(line);
}
var text=s.text(35,50,'New').attr({
fill:'white'
})
function anim(){
g.animate({
transform:'rotate(360 50,50)'
},8000,function(){
g.animate({
transform:'rotate(0 50,50)'
},0,function(){
anim()
})
})
}
anim()
div{
width:100vw;
height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>
注意我用过vw and vh反应能力单位
这也可以使用单个折线元素来完成
var s=Snap('svg');
var array=[];
for (var num = 0; num < 24; num++) {
var rad1 = num * 15 * (Math.PI / 180);
var rad2 = (num+1) * 15 * (Math.PI / 180);
var rad3=(num+.5) * 15 * (Math.PI / 180);
var x1 = (30 * (Math.cos(rad1)) + 50);
var y1 = (30 * (Math.sin(rad1)) + 50);
var x2 = (40 * (Math.cos(rad3)) + 50);
var y2 = (40 * (Math.sin(rad3)) + 50);
var x3 = (30 * (Math.cos(rad2)) + 50);
var y3 = (30 * (Math.sin(rad2)) + 50);
array.push(x1+','+y1+' '+x2+','+y2+' '+x3+','+' '+y3);
}
var line=s.polyline(array).attr({
'fill':'tomato'
})
var text=s.text(35,50,'New').attr({
fill:'white'
})
div{
width:100vw;
height:100vh;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<div>
<svg width="100%" height="100%" viewbox="0 0 100 100">
</svg>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
