|
|

楼主 |
发表于 2023-4-9 10:42
|
显示全部楼层
参考代码
- <style>
- #papa {
- --state: paused;
- margin: 30px auto;
- width: 1024px;
- height: 640px;
- border: 1px solid tan;
- border-image: linear-gradient(35deg,blue,orange,magenta,green,red) 2;
- background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;
- box-shadow: 2px 4px 10px #000;
- cursor: pointer;
- overflow: hidden;
- display: flex;
- place-items: center;
- perspective: 4px;
- perspective-origin: 600px 118px;
- animation: hue 28s infinite linear var(--state);
- position: relative;
- }
- .deck{
- position: absolute;
- width: 100%;
- height: 100%;
- transform-style: preserve-3d;
- animation: move 12s infinite linear var(--state);
- }
- .deck:nth-child(2){
- animation-delay: -4s;
- }
- .item {
- position: absolute;
- width: 100%;
- height: 100%;
- background: url('https://638183.freep.cn/638183/t23/webp1/cc.webp') center/cover no-repeat;
- background-size: cover;
- opacity: .6;
- animation: fade 12s infinite linear var(--state);
- }
- .deck:nth-child(2) .item {
- animation-delay: -4s;
- }
- .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(360deg); }
- }
- @keyframes fade {
- 0%{ opacity: 0; }
- 25%, 60%{ opacity: .6; }
- 100%{ opacity: 0; }
- }
- @keyframes hue {
- 0% { filter: hue-rotate(0); }
- 100% { filter: hue-rotate(360deg); }
- }
- </style>
- <div id="papa">
- <div class="deck">
- <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="deck">
- <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>
- <audio id="aud" src="https://music.163.com/song/media/outer/url?id=34341360" autoplay="autoplay" loop="loop"></audio>
- <script>
- let mState = () => papa.style.setProperty('--state', aud.paused ? 'paused' : 'running');
- papa.onclick = () => aud.paused ? aud.play() : aud.pause();
- aud.addEventListener('play', mState, false);
- aud.addEventListener('pause', mState, false);
- </script>
复制代码
|
|