焱鑫磊 发表于 2022-1-4 19:38

《成全你 忘了我》蔷薇团长

<style type="text/css">.items {z-index: 1;width: 1000px;
height: 600px;position: relative;
box-shadow:0px 0px 0px 2px #CCCCCC, 0px 0px 10px 20px #800000;MARGIN-LEFT:0px;margin-top:30px; background-size:100% 100%;
ox-sizing: border-box;
overflow:hidden;border-radius:0%;
transform-origin: center;}
.wall{width: 1000px;height: 600px;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
}
div#background{
width: 1000px;height: 600px;
    background: url("https://s4.ax1x.com/2022/01/04/TLySUI.jpg")no-repeat;
position: absolute;
    top: 0px;
    left: 0px;

animation: c 12s linear infinite;
background-size: cover;
}

div#midground{width: 1000px;height: 600px;
    background: url("http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png");
    z-index: 1;

    animation: cc 100s linear infinite;
}
div#foreground{width: 1000px;height: 600px;
    background: url("http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png");
    z-index: 2;

    animation: cc 153s linear infinite;
}
div#top{width: 1000px;height: 600px;
    background: url("http://image.hnol.net/c/2022-01/01/20/202201012050163251-5769293.png");
    z-index: 4;

    animation: da 100s linear infinite;
}
@-webkit-keyframes c {
    0% 100%{transform: scale(1);
    }
50%{transform: scale(1.3);
    }
70%{transform: scale(1.3);
    }
   
}
@-webkit-keyframes cc {
    from{
      background-position: 0 0;
      transform: translateY(10px);
    }
    to{
      background-position: 600% 0;filter:hue-rotate(360deg)
    }
}
@-o-keyframes cc {
    from{
      background-position: 0 0;
      transform: translateY(10px);
    }
    to{
      background-position: 600% 0;filter:hue-rotate(360deg)
    }
}
@-moz-keyframes cc {
    from{
      background-position: 0 0;
      transform: translateY(10px);
    }
    to{
      background-position: 600% 0;filter:hue-rotate(360deg)
    }
}
@keyframes cc {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 600% 0;filter:hue-rotate(360deg)
    }
}

@keyframes da {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(180deg)
    }18
}
@-webkit-keyframes da {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(180deg)
    }
}
@-moz-keyframes da {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(180deg)
    }
}
@-ms-keyframes da {
    0%{
      background-position: 0 0;
    }
    100%{
      background-position: 0 600%;filter:hue-rotate(180deg)
    }
}
</style>
<div class="items">
<div class="wall" id="background">&nbsp;</div>

<div class="wall" id="midground">&nbsp;</div>

<div class="wall" id="foreground">&nbsp;</div>

<div class="wall" id="top">
<div style="position: relative;top:80px;LEFT: 160px;z-index: 12435;"><iframe frameborder="0" height="500" marginheight="0" marginwidth="0" scrolling="no" src="http://pan.yinhuabbs.cn/view.php/a8d9cccfdee536a3265fcc5833d31f5b.html" title="" width="900"></iframe></div>
</div>
</div>

<div style="height: 50px;">&nbsp;</div>


蓝魔 发表于 2022-1-4 22:53

欣赏一下，谢谢。
页: [1]
查看完整版本: 《成全你 忘了我》蔷薇团长