标签:
首先要说一下,transition属性ie9是不支持的,从ie10才开始支持
例子是当鼠标移上div后,它会旋转180度。
要点:
border-radius
设置成50%;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>
传智CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转
标签:
原文地址:http://www.cnblogs.com/bluefantasy728/p/5522132.html