首先要说一下，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. 转Global.asax文件

    Global.asax 文件是什么   Global.asax 文件,有时候叫做 ASP.NET 应用程序文件,提供了一种在一个中心位置响应应用程序级或模块级事件的方法.你可以使用这个文件实现应用程序 ...

  2. ITPUB网站的知识索引汇总

    1. ITPUB知识索引树 http://www.itpub.net/tree/ http://www.itpub.net/pubtree/index.htm 2. ITPUB知识索引贴——全文索引 ...

  3. 【必备】史上最全的浏览器 CSS & JS Hack 手册(转)

    浏览器渲染页面的方式各不相同,甚至同一浏览器的不同版本(“杰出代表”是 IE)也有差异.因此,浏览器兼容成为前端开发人员的必备技能.如果有一份浏览器 Hack 手册,那查询起来就方便多了.这篇文章就向 ...

  4. JS判断form内所有表单是否为空

    function checkForm(){ var input_cart=document.getElementsByTagName("INPUT"); for(var   i=0 ...

  5. React Native 文本输入

    TextInput是一个允许用户输入文本的基础组件.它有一个名为onChangeText的属性,此属性接受一个函数,而此函数会在文本变化时被调用.另外还有一个名为onSubmitEditing的属性, ...

  6. Python高效编程的19个技巧

    初识Python语言,觉得python满足了我上学时候对编程语言的所有要求.python语言的高效编程技巧让我们这些大学曾经苦逼学了四年c或者c++的人,兴奋的不行不行的,终于解脱了.高级语言,如果做 ...

  7. 16 款最流行的 JavaScript 框架

    本文列举了16个当前最流行的JavaScript框架.在这个列表中,既包括jQuery和Mootools,也有Zepo移动JavaScript框架. 里面一定有你正在用的或想尝试用的JavaScrip ...

  8. Hadoop运行错误纪录

    问题1:Cannot run program "/bin/ls": error=11, Resource temporarily unavailable 15/04/22 14:4 ...

  9. python 语法常用 lambda

    Python中lambda表达式学习 http://blog.csdn.net/imzoer/article/details/8667176

  10. linux命令每日一练习-mkdir，rm

    mkdir 创建一个文件夹 mkdir -p tian/hong 递归创建文件目录 mkdir tian hong 创建多个文件 mkdir -v tian 创建文件的时候显示信息 mkdir -m ...