首先要说一下，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. shopex最新版前台一处想不到的SQL注入漏洞

    shopex代码核心的地方都做了加密处理,找漏洞就需要一点想象空间了,比如这个SQL注入… 存在于用户注册(想不到的位置吧?)   /core/shop/controller/ctl.passport ...

  2. 如何获取有性能问题的SQL

    1.通过用户反馈获取存在性能问题的SQL.   2.通过慢查日志获取存在性能的SQL.   启动慢查日志 slow_query_log=on   set global slow_query_log=o ...

  3. Linux准确获取IP

    有时搞一些跨网段的工程和应用,需要尽量准确的知道电信.网通.铁通等电信运营商的IP地址段分配情况,可网上的资料不但很少,而且经常都是N个月前的过期资料…… APNIC是管理亚太地区IP地址分配的机构, ...

  4. java web图片上传和文件上传

    图片上传和文件上传本质上是一样的,图片本身也是文件.文件上传就是将图片上传到服务器,方式虽然有很多,但底层的实现都是文件的读写操作. 注意事项 1.form表单一定要写属性enctype=" ...

  5. CentOS6.4安装Hadoop2.0.5 alpha - 3-Node Cluster

    1.在第2个个节点上重复http://www.cnblogs.com/littlesuccess/p/3361497.html文章中的第1-5步 2.修改第1个节点上的hdfs-site.xml中的配 ...

  6. 【winform 学习】C# 转换成JSON对象

    C#里面对json的处理有2种,JavaScriptSerializer和DataContractJsonSerializer. JavaScriptSerializer读出来就是key-value  ...

  7. C++ Daily《2》----vector容器的resize 与 reserve的区别

    C++ STL 库中 vector 容器的 resize 和 reserve 区别是什么? 1. resize 改变 size 大小,而 reserve 改变 capacity, 不改变size. 2 ...

  8. 数据结构《16》----自动补齐实现《一》----Trie 树

    1. 简述 Trie 树是一种高效的字符串查找的数据结构.可用于搜索引擎中词频统计,自动补齐等. 在一个Trie 树中插入.查找某个单词的时间复杂度是 O(len), len是单词的长度. 如果采用平 ...

  9. Linux的sed命令

    一.初识sed 在部署openstack的过程中,会接触到大量的sed命令,比如 # Bind MySQL service to all network interfaces.sed -i 's/12 ...

  10. Hibernate注解映射sequence时出现无序增长问题+hibernate 映射 oracle ID自动增长:

    Hibernate注解映射sequence时出现无序增长问题+hibernate 映射 oracle ID自动增长: 通过Hibernate注解的方式映射oracel数据库的sequence主键生成器 ...