CSS 圆角处理图片和旋转动画

来源:互联网 发布:反电信网络诈骗的意义 编辑:程序博客网 时间:2024/05/21 07:12

CSS 圆角处理图片和旋转动画

                

<!DOCTYPE html><html><head><style> #container:hover{transform:rotate(360deg);-moz-transform:rotate(360deg); /* Firefox 4 */-webkit-transform:rotate(360deg); /* Safari and Chrome */-o-transform:rotate(360deg); /* Opera */}#container{transition: 2s;-moz-transition: 2s;-webkit-transition: 2s;-o-transition: 2s;text-align:center;border:2px solid #a1a1a1;background:#dddddd;width:200px;height:200px;border-radius:25px;-moz-border-radius:25px; /* 老的 Firefox */overflow:hidden;padding-left:-10px;margin-left:50px;}#pic{width:230px;height:230px;background-image:url("./pic/mm.jpg");}</style></head><body><div id=container ><img id=pic  /></div></body></html>



0 0