使用CSS3 将正方形转换成圆形
效果图：
转换前：
转换后：
实现代码：
<!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-600" 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-600" style="margin-left:-50%;">
</div>
</body>
</html>更多web开发知识，请查阅 HTML中文网 ！！
以上就是css怎么把正方形变成圆形？的详细内容，更多请关注0133技术站其它相关文章！
