亚伦影音工作室 发表于 2024-1-24 20:23

万劫不复爱上你-安儿陈

本帖最后由 亚伦影音工作室 于 2024-1-24 21:33 编辑 <br /><br /><style type="text/css">#papa {
      margin: 150px-300px;
      width: 1164px;
      height: 620px;
      background:url(https://img-baofun.zhhainiao.com ... 37631e7d06bcec5.jpg)no-repeat center/cover;
      box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; position: relative; overflow: hidden;
      display: grid;
      place-items: center;
      }

#photos img{float:right;width:1164px;height:640px;position:relative;z-index: 1;}
#photos {position: absolute;width: calc(1164px * 10);animation: animate 60s ease-out infinite alternate;}
@keyframes animate {0%{right:-10476px;}100% {right:0px; }}

.hexahedron { margin: 100px auto; width: 200px; height: 200px; perspective: 1500px; position: absolute; top: 200px; left: 550px;z-index: 2;}
.top, .bottom, .left, .right, .front, .back { position: absolute; top: 0px; left: 0; border: 1px solid #fff000; width: 200px; height: 200px; opacity: 1; transition: 1s }
.top { animation: 1s linear 1s 1 both opentop; transform-origin: left; }
.bottom { animation: 2s linear 1s 1 both openbottom ; transform-origin: right;}
.left { animation: 1s linear 3s 1 both openleft; transform-origin: top; }
.right { animation: 1s linear 4s 1 both openright; transform-origin: bottom;}
.front { animation: 1s linear 5s 1 both openfront;transform-origin: center; }
.back { animation: 1s linear 6s 1 both openback; transform-origin: center;}

.stop .all,
.stop .top,
.stop .bottom ,
.stop .left,
.stop .right,
.stop .front ,
.stop .back{animation-play-state: paused;}
.all { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: 6s linear 6s infinite both animation }
.top {background: url('https://pic.imgdb.cn/item/64fd5599661c6c8e5429c0e2.jpg')no-repeat center/cover;}
.bottom { background: url('https://pic.imgdb.cn/item/658c0a24c458853aef9d89ab.jpg')no-repeat center/cover; }
.left {background: url('https://pic.imgdb.cn/item/658c09d6c458853aef9c646b.jpg')no-repeat center/cover; }
.right {background: url('https://pic.imgdb.cn/item/64f93f7e661c6c8e54359206.jpg')no-repeat center/cover;}
.front {background: url('https://pic.imgdb.cn/item/64e9fa3f661c6c8e544f1b3a.jpg')no-repeat center/cover; }
.back {background: url('https://pic.imgdb.cn/item/64fd530c661c6c8e542948df.jpg')no-repeat center/cover;}
@keyframes opentop { 0% { transform: none } 100% { transform: translateZ(-100px) rotateX(90deg); transform-origin: left top } }
@keyframes openbottom { 0% { transform: none } 100% { transform: translateZ(-100px) rotateX(-90deg); transform-origin: bottom } }
@keyframes openleft { 0% { transform: none } 100% { transform: translateZ(-100px) rotateY(-90deg); transform-origin: left top } }
@keyframes openright { 0% { transform: none } 100% { transform: translateZ(-100px) rotateY(90deg); transform-origin: right } }
@keyframes openfront { 0% { transform: none } 100% { transform: translateZ(100px) } }
@keyframes openback { 0% { transform: none } 100% { transform: translateZ(-100px) } }
@keyframes animation { 0% { } 100% { transform: rotateX(360deg) rotateY(360deg) rotateY(360deg) } }

#bfq{bottom: -12px; left:0%;z-index: 6;
position: absolute;
width:100%;
cursor: pointer;
mix-blend-mode: lighten;filter:invert(100%)
}
</style>
<div id="papa">

<div id="photos" title="亚伦影音">
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(180deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(0deg);" />
<img alt="" src="https://img-baofun.zhhainiao.com/pcwallpaper_ugc/static/e34ba37e18b32c2e937631e7d06bcec5.jpg" style="transform: rotateY(180deg);" />
</div>
<div class="hexahedron">
<div id="testImg">
<div class="all">
<div class="top">&nbsp;</div>

<div class="bottom">&nbsp;</div>

<div class="left">&nbsp;</div>

<div class="right">&nbsp;</div>

<div class="front">&nbsp;</div>

<div class="back">&nbsp;</div>
</div>
</div>
</div>

<div id="bfq"><audio autoplay="" id="aud" loop="" controls="controls" style="width:100%;"src="https://www.qqmc.com/mp3/music335309657.mp3" >&nbsp;</audio></div>
</div>
<script>
(function(){
var image = document.getElementById("testImg");
let mState = () => aud.paused ? (image.classList.add('stop')):(image.classList.remove('stop'));
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
})();
photos.style.animationPlayState = aud.paused ? 'paused' : 'running';
aud.addEventListener('playing', () =>photos.style.animationPlayState = 'running');
aud.addEventListener('pause', () =>photos.style.animationPlayState = 'paused');
</script>

红影 发表于 2024-1-24 21:27

这个转动的六面体好漂亮啊，背景也很美。欣赏亚伦老师精彩制作{:4_199:}
页: [1]
查看完整版本: 万劫不复爱上你-安儿陈