我试图为圆形边框设置动画,当你悬停时它会变成正方形,然后在你取消悬停后回到圆圈.尽管我付出了最大的努力,但我似乎无法使其发挥作用.这是我到目前为止所拥有的.
@keyframes mymove {
from {
border-radius: 100% 100%;
}
to {
border-radius: 0px, 0px;
}
}
@keyframes mymoveback {
from {
border-radius: 0px 0px;
}
to {
border-radius: 100%, 100%;
}
}
.testButt {
width: 100px;
height: 100px;
background: red;
position: relative;
-webkit-animation: mymove 3s;
/* Safari 4.0 - 8.0 */
-webkit-animation-fill-mode: forwards;
/* Safari 4.0 - 8.0 */
animation: mymoveback 3s;
animation-fill-mode: forwards;
}
.testButt:hover {
-webkit-animation-fill-mode: forwards;
animation: mymove 2s;
animation-fill-mode: forwards;
}<br><br><br>
<div class="testButt">
<br><br> …