论坛 › 动画音画 › 光

亚伦影音工作室 发表于 2024-12-22 20:23

光

本帖最后由 亚伦影音工作室 于 2024-12-24 19:13 编辑 <br /><br /><style type="text/css">#papa { margin: 10px 0 20px calc(50% - 721px); background:#000 url(https://pic.imgdb.cn/item/671af491d29ded1a8c8e7c58.jpg) no-repeat center/1286px 720px; width: 1286px; height: 720px;   box-shadow: 3px 3px 6px gray; overflow: hidden; z-index: 1; position: relative; display: grid; place-items: center;--state: running; }
      .chooseBtn { opacity: 0;}
      .choose-label { top: 420px;z-index: 20;
      left: 30px;mix-blend-mode: lighten;
            width: 300px;
            height: 280px; border: 0px solid #000;
display: block;
            border-radius: 50px;
            position:absolute; background: url(https://pic.imgdb.cn/item/67664b86d0e0a243d4e77787.gif) no-repeat center/300px 280px;
         transition: all 0.0025s;-webkit-tap-highlight-color: transparent;
            overflow: hidden; cursor: pointer;
      }

          .chooseBtn:checked+label { display: block;border-style: solid;-webkit-tap-highlight-color: red;
background: url(https://pic.imgdb.cn/item/67664c1ad0e0a243d4e777a9.png) no-repeat center/300px 280px;
            transition: all 0.0125s;
      }
.g-container{top:-160px; left:0px;z-index: -1;
display: inline-block;   vertical-align: middle;
perspective: 4px;mix-blend-mode: lighten;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear var(--state);
}

.g-container{
display: inline-block;
vertical-align: middle;
perspective: 4px;
perspective-origin: 50% 50%;
position: relative;
animation: hueRotate 21s infinite linear var(--state);
}


.g-group{
position: absolute;
/*   perspective: 4px; */
width: 1000px;
height: 1000px;
left: -500px;
top: -500px;
transform-style: preserve-3d;
animation: move 12s infinite linear var(--state);
animation-fill-mode: forwards;
}

.item {
position: absolute;
width: 100%;
height: 100%;
background:url(https://pic.imgdb.cn/item/67680391d0e0a243d4e80f3a.png),url(https://pic.imgdb.cn/item/643c03fe0d2dde5777107ce2.png),url(https://pic.imgdb.cn/item/67544ea7d0e0a243d4dfc9b3.png),url(https://pic.imgdb.cn/item/67544ea7d0e0a243d4dfc9b3.png);
background-size: cover;

opacity: 1;
animation: fade 12s infinite linear var(--state);
animation-delay: 0;
}

.g-group:nth-child(2) .item {
animation-delay: -6s;
}

.item-right {
transform: rotateY(90deg) translateZ(500px);
}

.item-left {
transform: rotateY(-90deg) translateZ(500px);
}

.item-top {
transform: rotateX(90deg) translateZ(500px);
}

.item-bottom {
transform: rotateX(-90deg) translateZ(500px);
}

.item-middle {
transform: rotateX(180deg) translateZ(1000px);
}

@keyframes move {
0%{
    transform: translateZ(-500px) rotate(0deg);
}
100%{
    transform: translateZ(500px) rotate(0deg);
}
}

@keyframes fade {
0%{
    opacity: 0;
}
25%,
60%{
    opacity: 1;
}
100%{
    opacity: 0;
}
}

@keyframes hueRotate {
0% {
    filter: hue-rotate(0);
}
100% {
    filter: hue-rotate(360deg);
}
}

</style>



<div id="papa">
<input type="checkbox"id="male" class="chooseBtn" />
    <label for="male" class="choose-label"> </label>



<div class="g-container">
<div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>
      <div class="item item-middle"></div>   
</div>
<div class="g-group">
      <div class="item item-right"></div>
      <div class="item item-left"></div>   
      <div class="item item-top"></div>
      <div class="item item-bottom"></div>   
      <div class="item item-middle"></div>   
</div>
</div>

</div>
<audio id="aud" src="https://s2.ananas.chaoxing.com/sv-w9/audio/c9/4c/21/4dabe1b0210dd914e6ddbf2b65b699c6/audio.mp3" autoplay loop></audio>
<script >
male.onclick = () => aud.paused ?aud.play():aud.pause();
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mState = () => {papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');};
aud.onplaying = aud.onpause = () => mState();

</script >

红影 发表于 2024-12-22 20:28

这首歌曲的节奏倒是和敲鼓小人的节奏一致呢。
这两个素材真好，感谢亚伦老师带来的好素材{:4_187:}

红影 发表于 2024-12-22 20:30

一键全控的呢，真漂亮{:4_187:}

杨帆 发表于 2024-12-22 22:10

精品素材，精美制作，精彩分享，谢谢亚伦老师{:4_191:}

查看完整版本: 光