<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding:0 } html,body{ height: 100%; } .wrap{ width:100%; height:100%; position: relative; overflow: hidden; } .div1,.div2,.div3,.div4,.div5{ width:100%; height:100%; position: absolute; top:0; left:0; z-index: 10; } .div1{ background: repeating-radial-gradient(300px 100px at center,black 50%,white); } .div2{ background: repeating-radial-gradient(300px 100px at center,red 50%,green); } .div3{ background: repeating-radial-gradient(300px 100px at center,blue 50%,yellow); } .div4{ background: repeating-radial-gradient(300px 100px at center,grey 50%,brown); } .div5{ background: repeating-radial-gradient(300px 100px at center,purple 50%,pink); } .total{ position: absolute; bottom:10px; z-index: 1000; right:0; width: 100%; text-align: center; } .total a{ position: relative; display: inline-block; width:100px; height:100px; border-radius:50%; overflow: hidden; border: 10px solid rgba(255,255,255,0.5); } .wrap :target{ z-index: 100; }
#bg1:target{ animation:div1 1s; } @keyframes div1 { 0%{ transform: translateX(-600px); } 100%{ transform: translate(0px); } } #bg2:target{ animation:div2 1s; } @keyframes div2 { 0%{ transform: translateY(-500px); } 100%{ transform: translateY(0px); } } #bg3:target{ animation:div3 1s; } @keyframes div3 { 0%{ transform: scale(0.2); } 100%{ transform: scale(1); } } #bg4:target{ animation:div4 1s; } @keyframes div4 { 0%{ transform:scale(10); } 100%{ transform: scale(1); } } #bg5:target{ animation:div5 1s; } @keyframes div5 { 0%{ transform: scale(0.1) rotate(0deg); } 100%{ transform: scale(1) rotate(360deg); } } </style></head><body><div class="wrap"> <div class="div1" id="bg1"></div> <div class="div2" id="bg2"></div> <div class="div3" id="bg3"></div> <div class="div4" id="bg4"></div> <div class="div5" id="bg5"></div> <div class="total"> <a href="#bg1"><div class="div1"></div></a> <a href="#bg2"><div class="div2"></div></a> <a href="#bg3"><div class="div3"></div></a> <a href="#bg4"><div class="div4"></div></a> <a href="#bg5"><div class="div5"></div></a> </div></div>
</body></html>
时间： 2024-11-15 20:40:39