效果图:
转换前:
转换后:
实现代码:
<!DOCTYPE HTML>
<html>
<body>
<div style="background-color:#FFEBCD;width:150px;height:150px;display:inline-block;border-radius:50%;overflow:hidden;">
<img src="/i/eg_flower.png" style="margin-left:-50%;">
</div>
</body>
</html>
再加一个效果,图片转一个圈:
<!DOCTYPE HTML>
<html>
<body>
<style>
div{
animation:mymove 1s infinite;
-moz-animation:mymove 1s infinite;
-o-animation:mymove 1s infinite;
-webkit-animation:mymove 1s infinite;
animation-iteration-count:1;
-moz-animation-iteration-count:1;
-o-animation-iteration-count:1;
-webkit-animation-iteration-count:1;
}
@keyframes mymove /* Safari and Chrome */
{
from {transform:rotate(0deg);}
to {transform:rotate(360deg);}
}
@-moz-keyframes mymove /* Safari and Chrome */
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(360deg);}
}
@-o-keyframes mymove /* Safari and Chrome */
{
from {-o-transform:rotate(0deg);}
to {-o-transform:rotate(360deg);}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {-webkit-transform:rotate(0deg);}
to {-webkit-transform:rotate(360deg);}
}
</style>
<div style="background-color:#FFEBCD;width:150px;height:150px;display:inline-block;border-radius:50%;overflow:hidden;-webkit-animation:mymove 3s infinite;-webkit-animation-iteration-count:1;">
<img src="/i/eg_flower.png" style="margin-left:-50%;">
</div>
</body>
</html>