首先要说一下，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. C#窗体布局方式

    DataGridView:显示数据表后台数据绑定: List<xxx> list = new List<xxx>(); dataGridView1.DataSource = l ...

  2. Octopus系列之各个页面调用示例

    调用首页产品 可选参数如下 New = 1, Hot = 2, Best = 3, Special = 4, Featured = 5, Other = 6 #foreach($item in $oc ...

  3. iOS开发UI篇—使用picker View控件完成一个简单的选餐应用

    iOS开发UI篇—使用picker View控件完成一个简单的选餐应用 一.实现效果 说明:点击随机按钮,能够自动选取,下方数据自动刷新. 二.实现思路 1.picker view的有默认高度为162 ...

  4. .htaccess保护目录与文件

    一般来说很多虚拟主机预设是没有开启保护网站主机目录下的文件,其实很危险的,假若你的目录下忘记放置index文件,那很可能您目录就被看光,一个不小心很可能重要资料就被拿走,这是蛮严重的一件事情.如果是L ...

  5. oracle 11g 空表也导出

    查询空表 并导出修改空表语句 select 'alter table '||table_name||' allocate extent;' from user_tables where num_row ...

  6. ios中tableSection的颜色

    ios中tableSection的颜色可以用: @"0xf5f5f5",有个第三方库 #import "UIColor+expanded.h"可以支持十六进制取 ...

  7. 常用排序算法的Java实现 - 1

    学习编程语言时, 我们会接触到许多排序算法, 这里总结了一下常见的排序算法. 不定期更新. * 其实在Java中存在如Collections.sort()这样的方法来自动为我们排序, 不过学习排序算法 ...

  8. 4、android之actionbar用法

    转: 上:http://blog.csdn.net/yuzhiboyi/article/details/32709833 下:http://blog.csdn.net/yuzhiboyi/articl ...

  9. 2014年4月份第2周51Aspx源码发布详情

    HFC代码转化工具源码  2014-4-8 [VS2010]源码描述:HFC代码转化工具源码 1.主要实现HTML代码转化为C#或者JS代码,为我们平时编码节省时间. 2.把代码复制到面板上,通过右键 ...

  10. IOS 瀑布流

    本篇博客应该算的上CollectionView的高级应用了,从iOS开发之窥探UICollectionViewController(一)到今天的(五),可谓是由浅入深的窥探了一下UICollectio ...