<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>梅花旋转特效</title> <link rel="stylesheet" type="text/css" href="css/万能css.css"/> <style type="text/css"> body{overflow: hidden;} .box{width: 300px; height: 300px; margin: 300px auto; background: url(img/8.jpg) no-repeat; border-radius: 50%; transition: 1s; position: relative; transition: 3s; } .box:after{content: ""; display: block; width: 260px; height: 260px; border: 20px solid #FF0000; border-right-color: #1ad280; border-bottom-color: #1ad280; border-radius: 50%; position: absolute; top: 0;left: 0; border-radius: 50%; transition: 1s;} .box:hover .show{opacity: 1; transition: 1s;} .box:hover:after{ transform: rotate(180deg); } .show{width: 300px; height: 300px; margin: 300px auto; background:rgba(250,250,250,0.5); border-radius: 50%; position: absolute; top: -300px; opacity: 0; } .one{font-size: 30px; text-align: center; padding-top: 40px; margin-left: 5px; } .two{text-align: center; font-size:20px ; width: 150px; border-bottom: 1px solid black; padding-bottom: 10px; margin-left:70px ; } .thr{font-size: 10px; padding-top: 5px; text-align: center; width: 150px; margin-left:70px; margin-top: 20px;} </style> </head> <body> <div class="box"> <div class="show"> <p class="one">HEADING</p> <p class="two">HERE</p> <p class="thr">a href one two</p> </div> </div> </body> </html>