<!DOCTYPE html"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>网页</title> <style type="text/css"> /*存放元素的区域，将其绝对居中*/ .content{ position: absolute; height:300px; width:450px; top:0px; left:0px; bottom: 0px; right:0px; background-color:#AAA; margin:auto; box-shadow: 5px 0px 5px #a22,-5px 0px 5px #a22,0px 5px 5px #a22,0px -5px 5px #a22; box-shadow:0 0 5px green inset; } .left,.right{ position:absolute; height:150px; width:100px; background-color:red; top:0px; bottom: 0px; margin:auto; border-radius:50px 50px 0 0; box-shadow: 2px 0 0 #a13; animation:changecolor 5s infinite ; animation-delay:1s; } .left{ margin-left:100px; transform:rotate(-45deg); } .right{ margin-left:136px; transform:rotate(45deg); } @keyframes changecolor{ 0%{background-color:red;} 25%{background-color:green;} 50%{background-color:blue;} 75%{background-color:yellow;} 100%{background-color:red;} } </style> </head> <body> <!-- --> <div class=‘content‘> <div class=‘left‘ ></div> <div class=‘right‘ ></div> </div> </body> </html>
