<img src="http://https//image.baidu.com/search/detail?ct=503316480&z=0&ipn=d&word=%E7%88%B1%E5%BF%83&step_word=&hs=2&pn=0&spn=0&di=220110&pi=0&rn=1&tn... ...
HTML代碼： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <link rel="stylesheet" href="../css/練習.css"> <title>心</title> </head> <body> <div class="name"> <div class="name1"></div> <div class="name2"></div> <div class="name3"></div> <div class="content"></div> </div> </body> </html> css代碼： *{ margin: 0; padding: 0; font-size: 0; } .name{ width: 100%; height: 700px; background-color: black; } .name1,.name2{ width: 100px; height: 50px; border-radius: 100px 100px 0 0; background-color: red; display: inline-block; position: relative; left: 45%; } .name1{ transform: rotate(-45deg); margin-top:200px; } .name2{ transform: rotate(45deg); margin-top:200px; } .name3{ width: 100px; height: 100px; background-color: red; transform:rotate(-45deg); position: relative; top:-25px; left:48.25%; } .content{ margin: 0 auto; width: 50px; height: 50px; border: 3px solid rgb(156, 156, 156); border-top: 3px solid #00f; margin-top: 100px; border-radius: 50%; animation: flash 2s linear infinite; } @keyframes flash{ 0%{ transform: rotate(0deg); } 100%{ transform: rotate(360deg); } } 喜歡的給個支持！！！
