使用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技术站其它相关文章!