码迷,mamicode.com
首页 > Web开发 > 详细

传智CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转

时间:2016-05-24 06:55:33      阅读:232      评论:0      收藏:0      [点我收藏+]

标签:

首先要说一下,transition属性ie9是不支持的,从ie10才开始支持 
例子是当鼠标移上div后,它会旋转180度。 
要点:

  • 用圆角制作圆形盒子,border-radius设置成50%;
  • 用box-shadow来制作内填充填满的效果,box-shadow有6个参数
    1. 水平阴影宽度(px);
    2. 垂直阴影宽度(px);
    3. 模糊距离(px);
    4. 阴影大小(px);
    5. 阴影颜色;
    6. 外部阴影(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>

传智CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转

标签:

原文地址:http://www.cnblogs.com/bluefantasy728/p/5522132.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!