首先要说一下，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;
%;//这样圆角占了50%宽高，就成了一个圆
1px black inset;
position: relative;
transition: box-shadow 0.2s linear 0s,transform 0.2s linear 0s; //将多重样式写在一个transition里，然后用逗号隔开即可
}
.box:hover{
50px black inset;
transform: rotate(180deg);
}
.icon{
%;
%;
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 圆形图标以及内部旋转的更多相关文章

  1. 【学】CSS3基础实例1 - 用CSS3做网页中的小三角，以及transition的用法

    自开了博客园已经有2周了吧,虽然转载了一些觉得比较有用的文章之外还没有开始写自己的一些学习记录,那就从今天开始. 目前看了妙味的不少视频,有css+html,js的基础和中级也都看完了,作业也都做了, ...

  2. HTML5移动开发学习笔记之CSS3基础学习

    CSS回顾 在学CSS3之前首先巩固下CSS的基础知识. 1.CSS框模型 举例子: #box { width: 70px; margin: 10px; padding: 5px; } 这个代码将出现 ...

  3. CSS3基础入门03

    CSS3 基础入门03 线性渐变 在css3当中,通过渐变属性实现之前只能通过图片实现的渐变效果.渐变分为线性渐变和径向渐变以及重复渐变三种.线性渐变的模式主要是颜色从一个方向过渡到另外一个方向,而径 ...

  4. CSS3基础入门01

    CSS3 基础入门 01 前言 相对于css2来说,css3更新了很多的内容,其中包括选择器.颜色.阴影.背景.文本.边框.新的布局方案.2d.3d.动画等等. 而如果想要学习css3的诸多部分,不妨 ...

  5. CSS3基础——笔记+实战案例(CSS基本用法、CSS层叠性、CSS继承性)

    CSS3基础——笔记 CSS是Cascading Style Sheet的缩写,翻译为"层叠样式表" 或 "级联样式表".CSS定义如何显示HTML的标签央视, ...

  6. css3基础教程：CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  7. CSS3盒模型display:box详解

    display:box;box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box ...

  8. CSS3基础知识

    CSS3基础 1 样式表的使用 1.内联样式表. 只影响单个元素,常用于标签. <p style="color: aqua;font-size: 20px">This ...

  9. CSS3基础入门02

    CSS3 基础入门02 边框相关属性 border-radius 通过这个属性我们可以设置边框圆角,即可以将四个角设置为统一的圆角,也可以单独的设置具体的某一个角的圆角. grammer: borde ...

随机推荐

  1. display 和 visibility 的区别

    设置控件隐藏 1.display:none  不为元素保留位置 2.visibility:hidden  占位置,是对象在网页上看不到,所占空间没有变化

  2. 0511Scrum项目3.0

    一.product backlog ID name Imp Est how to demo notes 1 主界面 3  3 用来登陆,离开,设置,关于按钮   2 算术界面 5 10 先用背景图来装 ...

  3. win server2008R2安装framework1.1后，在应用池中不能编辑选择framework1.1的解决办法

    C:\Users\Administrator>mklink /d "c:/Windows/Microsoft.NET/Framework64/v1.1.4322" " ...

  4. PHP投票系统

    1.投票页面 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. ...

  5. POJ 2226 最小点覆盖（经典建图）

    Muddy Fields Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8881   Accepted: 3300 Desc ...

  6. Read/Write file in Android

    http://www.cnblogs.com/freeliver54/archive/2011/09/16/2178910.html

  7. jQueryMobile控件之复选框

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 转：Caused by: java.lang.NoSuchMethodError: org.apache.log4j.Category.log

    Caused by: java.lang.NoSuchMethodError: org.apache.log4j.Category.log出现的异常:java.lang.reflect.Invocat ...

  9. zookeeper安装配置

    以3.3.3为例(当然,前提是要安装好jdk,zookeeper的启动时依赖于jdk的) (1) wget http://www.apache.org/dist//zookeeper/zookeepe ...

  10. 关于重定向urlrewriter.urlmapping

    大家都知道web.config 中的 urlMappings怎么用 <system.web> <urlMappings enabled="true"> &l ...