首先要说一下，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>
时间： 2024-11-16 01:26:25