【音画】图片自动切换《牡丹》
<div style="z-index: 27;width: 1000px; height: 605px; margin-top:170px; margin-left:-202px;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 8px #880000; overflow: hidden;transform:rotate(0deg);background:<img class='photo'src="https://pic1.imgdb.cn/item/633fb28516f2c2beb15e0a5.jpg" alt="" /><img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215000ikzredeyhkkq7sd.jpg" alt="" />
<img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215041jzmbq58arl3lj3j0.jpg" alt="" />
<img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215301xp67umqpdeup5oqm.jpg" alt="" />
<img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215342m1441y1bghx1gy21.jpg" alt="" />
<img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215438uz34fn1p7gijqpjg.jpg" alt="" />
<img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215510jwa101bvj8ffya3q.jpg" alt="" />
<img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215601t55iv33sia4ys5.jpg" alt="" />
<img class='photo'src="http://www.chinazhiqing.com/data/attachment/forum/202004/07/215826xrkjrjxajn2rakj.jpg" alt="" />
<div class="container">
<audio autoplay="" class="audio" id="MusicPlayer" src="http://link.hhtjim.com/kw/16641.mp3type=convert_urlresponse=res" controls loop style="width: 1%; height: 1%;z-index: 1;"></audio>
<div class="items1"style="transform: scale(0.6);position: absolute;top:-500px; left:700px;z-index: 70;"></div>
<style type="text/css">
.photo {width: 100%;
height: 100%;box-shadow: 0px 0px 0px 2px #cccccc, 0px 0px 0px 5px #880000;
position: absolute;top:0px; left:0px;
filter:hue-rotate(0deg)contrast(120%)brightness(100%);
animation: round 32s infinite;
opacity: 0;}
@keyframes round {0% {
opacity: 0;clip-path: polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
2% {
opacity: 1;clip-path:polygon(0 50%, 50% 50%, 50% 0, 50% 0, 50% 50%, 100% 50%, 100% 50%, 50% 50%, 50% 100%, 50% 100%, 50% 50%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
10% {
opacity: 0.8;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);
-webkit-transform:translate(0%,0%)scale(1);}
18% {
opacity: 0;clip-path:polygon(0 50%, 0 0, 50% 0, 50% 0, 100% 0, 100% 50%, 100% 50%, 100% 100%, 50% 100%, 50% 100%, 0 100%, 0 50%);
-webkit-transform:translate(0%,0%)scale(2);}
}
img:nth-child(1) {animation-delay: 28s;}
img:nth-child(2) {animation-delay: 24s;}
img:nth-child(3) {animation-delay: 20s;}
img:nth-child(4) {animation-delay: 16s;}
img:nth-child(5) {animation-delay: 12s;}
img:nth-child(6) {animation-delay: 8s;}
img:nth-child(7) {animation-delay: 4s;}
img:nth-child(8) {animation-delay: 0s;}
</style >
<style type="text/css">
.container{width: 1px;height: 1px;
margin: 0;position: absolute;top:500px; left:-30px;z-index: 550;
</style>
</script> 谢谢分享~:) 猫猫虎 发表于 22.10.12 0:01
谢谢分享~
非常感谢老朋友关注支持！:handshake
页:
[1]