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

Posted 蓝色幻想728

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了传智CSS3基础实例2 - box-shadow, border-radius 圆形图标以及内部旋转相关的知识，希望对你有一定的参考价值。

首先要说一下，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 圆形图标以及内部旋转的主要内容，如果未能解决你的问题，请参考以下文章

CSS系列-css3之box-shadow介绍

前端CSS3阴影box-shadow用法

css3阴影box-shadow

css3 box-shadow

用CSS3怎么实现盒阴影 box-shadow？

零基础跟我学前端之css3基础