1、bod鲻戟缒男y部分： <body> <div class="circleBox"> <div cl锾攒揉敫ass="circle1"></div> <div class="circle2"></div> <div class="circle3"></div> <div class="circle4"></div> <div class="circle5"> <img src="sijiaw.png"/> </div> </div> </body>
2、css部分：<style> .circleBox{ width: 200px; height:500px; 艘早祓胂 margin:auto; } .circle1,.circle2,.circle3,.circle4,.circle5{ width: 200px; height:200px; border-radius:50%; position:absolute ; top:20%; } .circle5{ background-color:rgba(41,187,255,0.3); } .circle5>img{ width:25%; height:25%; margin: 35% auto 0; vertical-align: initial; position:relative; left:37%; } .circle1{ animation: myfirst 4s linear 0s infinite; background-color:rgba(41,187,255,0.3); -moz-animation: myfirst 4s linear 0s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 0s infinite; /* Safari 和 Chrome */ -o-animation: myfirst 4s linear 0s infinite; /* Opera */ } .circle2{ animation: myfirst 4s linear 1s infinite; background-color:rgba(41,187,255,0.3); -moz-animation: myfirst 4s linear 1s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 1s infinite; /* Safari 和 Chrome */ -o-animation:myfirst 4s linear 1s infinite; /* Opera */ } .circle3{ animation: myfirst 4s linear 2s infinite; background-color:rgba(41,187,255,0.3); -moz-animation: myfirst 4s linear 2s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 2s infinite; /* Safari 和 Chrome */ -o-animation: myfirst 4s linear 2s infinite; /* Opera */ } .circle4{ animation: myfirst 4s linear 3s infinite; background-color:rgba(41,187,255,0.3); -moz-animation: myfirst 4s linear 3s infinite; /* Firefox */ -webkit-animation: myfirst 4s linear 3s infinite; /* Safari 和 Chrome */ -o-animation: myfirst 4s linear 3s infinite; /* Opera */ } @keyframes myfirst{ 0% { -webkit-transform: scale(1); transform: scale(1); opacity:1; } 10% { -webkit-transform: scale(1.15); transform: scale(1.15); opacity:0.9; } 20% { -webkit-transform: scale(1.3); transform: scale(1.3); opacity:0.8; } 30% { -webkit-transform: scale(1.45); transform: scale(1.45); opacity:0.7; } 40% { -webkit-transform: scale(1.6); transform: scale(1.6); opacity:0.6; } 50% { -webkit-transform: scale(1.75); transform: scale(1.75); opacity:0.5; } 60% { -webkit-transform: scale(1.9); transform: scale(1.9); opacity:0.4; } 70% { -webkit-transform: scale(2.05); transform: scale(2.05); opacity:0.3; } 80% { -webkit-transform: scale(2.2); transform: scale(2.2); opacity:0.2; } 90% { -webkit-transform: scale(2.35); transform:scale(2.35); opacity:0.1; } 100% { -webkit-transform: scale(2.5); transform: scale(2.5); opacity: 0; } } </style>