首先要说一下，transition属性ie9是不支持的，从ie10才开始支持
例子是当鼠标移上div后，它会旋转180度。
要点：
- 用圆角制作圆形盒子，
border-radius设置成50%； - 用box-shadow来制作内填充填满的效果，box-shadow有6个参数
- 水平阴影宽度(px);
- 垂直阴影宽度(px);
- 模糊距离(px);
- 阴影大小(px);
- 阴影颜色；
- 外部阴影(outset，默认)还是内部(inset);
- 用
transition做动画，将圆形盒子里的图标也跟着转180度
-要注意，如果一个元素有多个动画过度，transition只能用一次，否则后面的会覆盖前面的，这时可以将多重样式写在一个transition里，然后用逗号隔开即可
<style>.box{ width: 100px; height: 100px; border-radius: 50%;//这样圆角占了50%宽高，就成了一个圆 box-shadow: 0 0 0 1px black inset; position: relative; transition: box-shadow 0.2s linear 0s,transform 0.2s linear 0s; //将多重样式写在一个transition里，然后用逗号隔开即可}.box:hover{ box-shadow:0 0 0 50px black inset; transform: rotate(180deg);}.icon{ height: 20%; width: 20%; background: url(3.jpg) no-repeat center center; position: absolute; top: 40px; left: 40px;}</style><script></script></head><body> <div class="box"> <div class="icon"></div> </div></body>