|
|
请马上登录,朋友们都在花潮里等着你哦:)
您需要 登录 才可以下载或查看,没有账号?立即注册
x
本帖最后由 马黑黑 于 2022-8-12 07:57 编辑
以电子梦幻帖子为例,只需修改两处地方,一处是CSS,一处是JS。修改后烟花就不占满整个帖子。但这里的修改没有考虑画布边缘问题,邻近边缘的烟花会是不完整的:
<style>
#papa { margin: auto; width: 1024px; height: 640px; background: #000 url('https://638183.freep.cn/638183/Pic/81/818.png') no-repeat center/cover; box-shadow: 3px 3px 20px #000; position: relative; }
#canv { position: absolute; left: 400px; top: 10px; } /* 画布定位的语句 */
#disc { position: absolute; width: 40px; height: 40px; left: 10px; top: 10px; background: conic-gradient(red,orange,yellow,green,teal,blue,purple); mask: radial-gradient(transparent 4px,red 0); -webkit-mask: radial-gradient(transparent 4px,red 0); border-radius: 50%; cursor: pointer; animation: rot 2s linear infinite; }
#tit { position: absolute; left: 60px; top: 10px; font: bold 22px / 40px sans-serif; color: snow; text-shadow: 2px 2px 4px black; }
@keyframes rot { to { transform: rotate(360deg); } }
</style>
<div id="papa">
<span id="tit">Electric Dreams</span>
<canvas id="canv"></canvas>
<span id="disc"></span>
</div>
<script>
(function() {
let ctx = canv.getContext('2d');
let w = canv.width = 500, h = canv.height = 300; // 自定义画布尺寸
let particles = [], idx = 0, aud = new Audio();
//后面的代码省略 // ....
</script>
|
评分
-
| 参与人数 3 | 威望 +130 |
金钱 +260 |
经验 +130 |
收起
理由
|
小辣椒
| + 50 |
+ 100 |
+ 50 |
赞一个! |
加林森
| + 30 |
+ 60 |
+ 30 |
很给力! |
红影
| + 50 |
+ 100 |
+ 50 |
赞一个! |
查看全部评分
|