亚伦影音工作室 发表于 2025-10-30 20:38

这个动画不错【血雨腥风】

本帖最后由 亚伦影音工作室 于 2025-10-30 20:53 编辑 <br /><br /><style>
#papa { margin: 10px-300px ; width:1286px; height:700px; border: 1px solid gray; background: #000 url('https://pic.3gbizhi.com/uploadmark/20251011/2eda66eaa0a67a9dbe024f701b473ef7.webp')no-repeat center/cover; box-shadow: 2px 2px 6px #000; z-index: 1; position: relative; overflow: hidden; place-items: center; border-radius:0px;}
#canv { position: absolute; width: 100%;
        height: 100%;mix-blend-mode: screen;overflow: hidden;}       
.img-container {left:30%;
        bottom: 0px;
position: absolute;
height: 100%;
width: 100%;
perspective: 500px;

transform-style: preserve-3d;
}


.box {
box-shadow: 0 0 10px rgb(0 0 0 / 30%);
width: 550px;
height: 350px;
border-radius: 2px;
overflow: hidden;
border: 2px solid #ccc;
position: absolute;
top: 50%;
transition: 800ms ease-in-out;
}

.box img {
width: 100%;
height: 100%;
}

.box:first-of-type {
z-index: 5;
opacity: 1;
left: 0%;
transform: translate(-250%, -250%) rotateZ(-2600deg);
}

.box:nth-of-type(2) {
opacity: 1;
left: 5%;
transform: translate(-50%, -50%) rotateY(-8deg)translateZ(-20px);
z-index: 5;

}
.box:nth-of-type(3) {
left: 10%;
opacity: 0.9;
color: #eee;
z-index: 10;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-40px);
}

.box:nth-of-type(4) {
z-index: 5;
opacity: 0.8;
left:15%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-60px);
}
.box:nth-of-type(5) {
z-index: 2;
opacity: 0.7;
left: 20%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-80px);
}

.box:nth-of-type(6) {
z-index: 2;
opacity: 0.6;
left: 25%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-100px);
}
.box:nth-of-type(7) {
z-index: 2;
opacity: 0.5;
left: 30%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-120px);
}
.box:nth-of-type(8) {
z-index: 2;
opacity: 0.4;
left: 35%;
transform: translate(-50%, -50%) rotateY(-8deg) translateZ(-140px);
}
        </style>
<div id="papa">
        <div class="img-container">
      <div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20200825/4d0c852ad60f9332d720533eb28df972.webp"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20250928/702eb4eb407987d52d0b674529c5f036.webp"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20250908/f835fe96f97f8e6e0195ddb297b1ea76.webp"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20230915/d3f6f5422e742cc6fa6d80c11226906a.webp"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20200821/d8b1b8ed7e6f77aa80e9a2f7486a30ee.webp"
          alt=""
      />
      </div>
      <div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20241111/577f321d80950fe71018dbb97ed0632a.webp"
          alt=""
      />
      </div>
<div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20230825/31402b8bdd804ccf3ff096af6516a890.webp"
          alt=""
      />
      </div>
<div class="box">
      <img
          src="https://pic.3gbizhi.com/uploadmark/20251030/87ed93d8713d40affedc20919a6ac216.webp"
          alt=""
      />
      </div>

    </div>
<canvas id="canv" width="1286" height="700"title="移动鼠标看效果/点击暂停/播放"></canvas>       
</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w7/audio/b9/3d/08/19d3ddd3cc82f7e0218003833c270996/audio.mp3" autoplay ></audio>
<script>
const imgContainer = document.querySelector(".img-container");
const box = document.querySelector(".box");
setInterval(() => {if(!aud.paused){
      let last = imgContainer.firstElementChild;
      last.remove();
      imgContainer.appendChild(last);
   } }, 2500);

        </script>       
<script>       

papa.onclick = () => {aud.paused ? aud.play() : aud.pause();}

        </script>
<script>
(function main() {
                let canv = document.getElementById('canv');
                let ctx = canv.getContext('2d');
                canv.width = canv.clientWidth;
                canv.height = canv.clientHeight;
                let dropList = [], linelist = [], mousePos = ;
                let gravity = 10.5, mouseDis =45, lineNum = 20, speedx = 0, maxspeedx = 0;
                window.onmousemove = function (e) { mousePos = e.clientX - offset(papa).x; mousePos = e.clientY - offset(papa).y; maxspeedx = (e.clientX - canv.clientWidth / 2) / (canv.clientWidth / 2); }
                function createLine(e) { let temp = 0.25 * (50 + Math.random() * 100); let line = { speed: 5.5 * (Math.random() * 6 + 3), die: false, posx: e, posy: -50, h: temp, corlor: '#ff0000' }; linelist.push(line); }
                function createDrop(x, y) { let drop = { die: false, posx: x, posy: y, vx: (Math.random() - 0.5) * 8, vy: Math.random() * (-6) - 3, radius: Math.random() * 1.5 + 1 }; return drop; }
                function madedrops(x, y) {
                let maxi = Math.floor(Math.random() * 5 + 5);
                for (let i = 0; i < maxi; i++) {
                dropList.push(createDrop(x, y));
                        }
                }
                window.requestAnimationFrame(update);
                function update() { if (dropList.length > 0) { dropList.forEach(function (e) { e.vx = e.vx + (speedx / 2); e.posx = e.posx + e.vx; e.vy = e.vy + gravity; e.posy = e.posy + e.vy; if (e.posy > canv.clientHeight) { e.die = true; } }); } for (let j = dropList.length - 1; j >= 0; j--) { if (dropList.die) { dropList.splice(j, 1); } } speedx = speedx + (maxspeedx - speedx) / 50; for (let i = 0; i < lineNum; i++) { createLine(Math.random() * 2 * canv.width - (0.5 * canv.width)); } let endLine = canv.clientHeight - Math.random() * canv.clientHeight / 6; linelist.forEach(function (e) { let dis = Math.sqrt(((e.posx + speedx * e.h) - mousePos) * ((e.posx + speedx * e.h) - mousePos) + (e.posy + e.h - mousePos) * (e.posy + e.h - mousePos)); if (dis < mouseDis) { e.die = true; madedrops(e.posx + speedx * e.h, e.posy + e.h); } if ((e.posy + e.h) > endLine) { e.die = true; madedrops(e.posx + speedx * e.h, e.posy + e.h); } if (e.posy >= canv.clientHeight) { e.die = true; } else { e.posy = e.posy + e.speed; e.posx = e.posx + e.speed * speedx; } }); for (let j = linelist.length - 1; j >= 0; j--) { if (linelist.die) { linelist.splice(j, 1); } } render(); window.requestAnimationFrame(update); }
                function render() {if(!aud.paused){ ctx.fillRect(0, 0, canv.width, canv.height); ctx.lineWidth = 1; linelist.forEach(function (line) { ctx.strokeStyle = line.color; ctx.beginPath(); ctx.moveTo(line.posx, line.posy); ctx.lineTo(line.posx + line.h * speedx, line.posy + line.h); ctx.stroke(); }); ctx.lineWidth = 0.5; ctx.strokeStyle = "#ff0000"; dropList.forEach(function (e) { ctx.beginPath(); ctx.arc(e.posx, e.posy, e.radius, Math.random() * Math.PI * 2, 1 * Math.PI); ctx.stroke(); }); }}
                function offset(e) { let x = e.offsetLeft, y = e.offsetTop, pa= e.offsetParent; while(pa != null) { x += pa.offsetLeft; y += pa.offsetTop; pa = pa.offsetParent; } return {x, y}; }
        })();
</script>

红影 发表于 2025-10-30 22:15

这个雨丝可以跟随鼠标移动的呢，底下还有溅起的水花呢。真漂亮{:4_199:}

红影 发表于 2025-10-30 22:18

这些轮播图片还都是侠客类的呢，和歌曲内容很相符。
欣赏亚伦老师好帖{:4_187:}

老谟深虑 发表于 2025-10-31 07:54

         欣赏老师的佳作，早上好！
页: [1]
查看完整版本: 这个动画不错【血雨腥风】