<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>花的绽放</title> <style type="text/css"> .header { width: 800px; height: 800px; margin: 0 auto; position: relative; } .header div { height: 300px; width: 300px; background: blue; border-radius: 300px 0; position: absolute; bottom: 100px; left:200px; opacity:0.6; transform-origin:0 300px; transform:rotate(-45deg); transition:all 8s; } .header:hover .header1{ transform:rotate(-23deg); } .header:hover .header2{ transform:rotate(5deg); } .header:hover .header3{ transform:rotate(-68deg); } .header:hover .header4{ transform:rotate(-95deg); } .header:hover .header5{ transform:rotate(30deg); } .header:hover .header6{ transform:rotate(-120deg); } .header:hover .header7{ transform:rotate(50deg); } .header:hover .header8{ transform:rotate(-140deg); } </style> </head> <body> <div class="header"> <div class="header1"></div> <div class="header2"></div> <div class="header3"></div> <div class="header4"></div> <div class="header5"></div> <div class="header6"></div> <div class="header7"></div> <div class="header8"></div> <div class="header9"></div> </div> </body> </html>