我正在尝试将文字设置为圈以向左移动。目前文字已经在圈子的时代了,我只想在我将鼠标悬停在它上面时让它进入...
.circle-yellow p
{
position: absolute;
top: 42px;
left: 87px;
-webkit-transition: left 500ms;
-moz-transition: left 500ms;
-ms-transition: left 500ms;
-o-transition: left 500ms;
transition: left 500ms;
font-size: 12px;
letter-spacing: 1px;
color: white;
font-family: "impact";
}
.circle-yellow:hover p
{
left:60px;
}
这是HTML
<div class="wrapper">
<div class="circle-box">
<div class="circle-yellow" id="js"><p>ARTWORK</p></div>
</div>
</div>
这是包装器,圆盒和圆黄色的CSS
.wrapper
{
position: absolute;
top: 50%;
left: 50%;
width: 500px;
height: 500px;
margin-top: -250px; /* Half the height */
margin-left: -250px; /* Half the width */
}
.circle-box
{
height:100px;
width:270px;
display: block;
margin-left: auto;
margin-right: auto;
position: relative;
margin-top: 100px;
margin-left: 90px;
}
.circle-yellow
{
position: relative;
border-radius: 50%;
width: 120px;
height: 120px;
border-style: solid;
border-color: #ffbf1e;
float:left;
}