论坛 › 欢乐水吧 › 开发一个动画

亚伦影音工作室 发表于 2024-11-8 09:50

开发一个动画

本帖最后由 亚伦影音工作室 于 2024-11-8 17:51 编辑 <br /><br /><style type="text/css">
#papa{
        position: relative;
        width: 1164px;
        height: 620px;
      margin-left:-300px;
        margin-top:120px;
        box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000;
      border-radius: 2px;
        background:url(https://pic.imgdb.cn/item/6718e1c1d29ded1a8cdfb617.jpg)no-repeat center/cover;
        overflow: hidden;
}
.gallery {width: 110%;height: 100%;
        position: absolute;z-index: 1;
top:0%; left:-5%;display: flex;
}
.left, .right {
width: 50%;
display: flex;
overflow: hidden;
}
.left {
& .inner { perspective-origin: right center; }
& .item {
    right : -10rem;
    &:item:nth-child(1) { transform: translate3d(-10rem,0,-4rem); }
    &:item:nth-child(2) { transform: translate3d(-20rem,0,-8rem); }
    &:item:nth-child(3) { transform: translate3d(-30rem,0,-12rem); }
    &:item:nth-child(4) { transform: translate3d(-40rem,0,-16rem); }
    &:item:nth-child(5) { transform: translate3d(10rem,0,-4rem); }
}
}
.right {
& .inner { perspective-origin: left center; }
& .item {
    left :-10rem;
    &:item:nth-child(1) { transform: translate3d(10rem,0,-4rem); }
    &:item:nth-child(2) { transform: translate3d(20rem,0,-8rem); }
    &:item:nth-child(3) { transform: translate3d(30rem,0,-12rem); }
    &:item:nth-child(4) { transform: translate3d(40rem,0,-16rem); }
    &:item:nth-child(5) { transform: translate3d(-10rem,0,-4rem); }
}
}
.inner {
position: relative;
width: 100%;
display: flex;
align-items: center;
perspective: 600px;
transform-style: preserve-3d;
}
.item {
position: absolute;
width: 48%;
height: 28%;
border: 2px solid #ffffff;
background-color: white;
object-fit: cover;
transition: transform 0.3s cubic-bezier(0, 0.55, 0.45, 1);
}
#mdiv {top:12%; left:85%;cursor: pointer;width:120px;height: 120px;animation:rot 10s linear infinite;position: absolute;filter:drop-shadow(#000 0px 0 1px);z-index: 40;}
@keyframes rot { to { transform: rotate(2turn);} }
#lrc{left: 15%;top: 82%;}#lrcc {right:15%;top: 90%;}
#lrc,#lrcc{--state: paused;--motion: cover2;--tt: 2s;--bg: #880000;border:0px solid black;position: absolute;z-index: 5;font:normal 2.5em 华文隶书;color: #ccc;white-space: pre;-webkit-background-clip: text;z-index: 20;filter:drop-shadow(#000 1px 0 0)drop-shadow(#000 0 1px 0)drop-shadow(#000 -1px 0 0) drop-shadow(#000 0 -1px0);}
#lrcc::before,#lrc::before {position: absolute;content: attr(data-lrc);width: 20%;height: 100%;color: #800000;overflow: hidden;white-space: pre; animation: var(--motion) var(--tt) linear forwards;animation-play-state: var(--state);filter:drop-shadow(#fff 1px 0 0)drop-shadow(#fff 0 1px 0)drop-shadow(#fff -1px 0 0) drop-shadow(#fff 0 -1px0);}
@keyframes cover1 {from {width: 0;}to {width: 100%;}}@keyframes cover2 {}
</style >
<div id="papa">
<div class='gallery'>
<div class='left'>
      <div class='inner' >
      <img class='item' src='https://pic.imgdb.cn/item/67162d45d29ded1a8c2fc41d.jpg' data-counter='1' >
      <img class='item' src='https://pic.imgdb.cn/item/67162d12d29ded1a8c2f45cf.jpg' data-counter='2'>
      <img class='item' src='https://pic.imgdb.cn/item/67162cc8d29ded1a8c2e8fa0.jpg' data-counter='3'>
      <img class='item' src='https://pic.imgdb.cn/item/6716290ed29ded1a8c299351.jpg' data-counter='4'>
      <img class='item' src='https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg' data-counter='5'>
    </div>
</div>
<div class='right'>
   <div class='inner'>
      <img class='item' src='https://pic.imgdb.cn/item/67162d45d29ded1a8c2fc41d.jpg' data-counter='1'>
      <img class='item' src='https://pic.imgdb.cn/item/67162d12d29ded1a8c2f45cf.jpg' data-counter='2'>
      <img class='item' src='https://pic.imgdb.cn/item/67162cc8d29ded1a8c2e8fa0.jpg' data-counter='3'>
      <img class='item' src='https://pic.imgdb.cn/item/6716290ed29ded1a8c299351.jpg' data-counter='4'>
      <img class='item' src='https://pic.imgdb.cn/item/67162491d29ded1a8c210f14.jpg' data-counter='5'>
    </div>
</div>
</div>
<div id="lrc" data-lrc=""></div>
<div id="lrcc" data-lrc=""></div>
<audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2023/12/11/ceeec639cde917b6c2d4361b78dc9519.mp3" autoplay loop ></audio>
<img id="mdiv"src="https://pic.imgdb.cn/item/671d8801d29ded1a8cbb3fa7.png">
</div>
<script >const leftItems = document.querySelectorAll(".left .item");
const rightItems = document.querySelectorAll(".right .item");
const limit = leftItems.length;
const leftCoordinates = [
{ x: -10, z: -4 },
{ x: -20, z: -8 },
{ x: -30, z: -12 },
{ x: -40, z: -16 },
{ x: 10, z: -4 }
];
const rightCoordinates = [
{ x: 10, z: -4 },
{ x: 20, z: -8 },
{ x: 30, z: -12 },
{ x: 40, z: -16 },
{ x: -10, z: -4 }
];
const itemPos = (item,{x,z}) => item.style.transform = `translate3d(${x}rem,0,${z}rem)`;
function animateItems(item,coordinates) {if(!aud.paused) {
const count = Number(item.dataset.counter);
itemPos(item,coordinates);
item.dataset.counter = `${count === limit ? 1 : count + 1}`;
}
}
function activate() {
setInterval(() => {
    for (let i = 0; i < limit; i++) {
      animateItems(leftItems,leftCoordinates);
      animateItems(rightItems,rightCoordinates);
    }
},2000);
};
window.addEventListener('load',activate,false);
</script>
<script>
mdiv.onclick = () => aud.paused ? (aud.play()): (aud.pause());
aud.addEventListener('playing', () =>mdiv.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>mdiv.style.animationPlayState = 'paused');
</script>
<span id="lrcStr" style="visibility: hidden;">
小阿枫 - 风中的承诺
昨夜的雨惊醒我沉睡中的梦
迷惑的心沾满着昨日的伤痛
冷冷的风不再有往日的温柔
逝去的爱是否还能够再拥有
漫漫长路谁能告诉我
究竟还有多少错
何处是我最终的居留
曾经在雨中对我说
今生今世相守
曾经在风中对我说
永远不离开我
多少缠绵编织成的梦
多少爱恨刻画的镜头
为何一切到了终究还是空
昨夜的雨惊醒我沉睡中的梦
迷惑的心沾满着昨日的伤痛
冷冷的风不再有往日的温柔
逝去的爱是否还能够再拥有
漫漫长路谁能告诉我
究竟还有多少错
何处是我最终的居留
曾经在雨中对我说
今生今世相守
曾经在风中对我说
永远不离开我
多少缠绵编织成的梦
多少爱恨刻画的镜头
为何一切到了终究还是空
曾经在雨中对我说
今生今世相守
曾经在风中对我说
永远不离开我
多少缠绵编织成的梦
多少爱恨刻画的镜头
为何一切到了终究还是空
为何一切到了终究还是空
</span>
<script>
document.write('<script src="https://bbs.ltxjob.com/forum.php?mod=attachment&aid=MTMwMTN8ODY5YTJkMmR8MTczMDM1NDc3NXwxMjh8MTEzODk%3D" type="text/javascript" charset="utf-8"><\/script>');
</script>

朵拉 发表于 2024-11-8 11:09

播放器好看，歌曲好听~~{:4_190:}

梦油 发表于 2024-11-8 13:56

这个制作很有趣。

红影 发表于 2024-11-8 15:33

有意思，这样成对出现的小图，还能分别向两边移动和改变层叠方式，十分奇妙的效果。
欣赏亚伦老师好帖{:4_199:}

红影 发表于 2024-11-8 15:35

这种图片轮播方式还是第一次看到呢，给亚伦老师点赞{:4_199:}

小辣椒 发表于 2024-11-8 21:00

这个特效漂亮的，欣赏亚伦的精彩制作{:4_187:}

小辣椒 发表于 2024-11-8 21:01

只是加分就被卡出论坛了，但不晓得别人是不是这样，没有看见其他人说，我是被卡出去了，重新进论坛的

冬天的雨 发表于 2024-11-9 09:58

小辣椒 发表于 2024-11-8 21:01
只是加分就被卡出论坛了，但不晓得别人是不是这样，没有看见其他人说，我是被卡出去了，重新进论坛的

我手机加分也是甩出论坛，重新进来的

效果漂亮的 赞一个

冬天的雨 发表于 2024-11-9 10:08

亚伦老师很厉害哦，可惜我手机，后面电脑上来仔细看看代码，谢谢分享

老谟深虑 发表于 2024-11-9 10:36

         欣赏老师的精彩音画，上午好！

查看完整版本: 开发一个动画