<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.warp,.info{
width:300px;
height: 300px;
border-radius: 50%;
}
.warp{
border:10px solid ;
border-radius: 50%;
border-top-color: yellow;
border-left-color: gray;
border-right-color: yellow;
border-bottom-color: gray;
transform-origin: 50% 50%;
transition: all .5s ease-in-out;
}
.info{
background-image: url(1.jpeg);
color:red;
text-align: center;
position: absolute;
transition:all .5s ease-in-out;
}
h3{
margin-top:120px;
}
.warp:hover{
transform: rotate(180deg);
}
.info:hover{
transform: rotate(-180deg);
}
</style>
</head>
<body>
<div class="warp">
<div class="info">
<h3>美好的一天</h3>
<a>想进来看看吗？</a>
</div>
</div>
</body>
</html>
