css3的选择器有哪些？运用css3动画需要运用什么规则

本文目录

• css3的选择器有哪些
• 运用css3动画需要运用什么规则
• Css3动画属性怎么使用
• h5 css3 怎么写上拉刷新下拉加载
• css和css3有什么区别
• 怎样用css3做出图标效果
• html5与css3权威指南这本书适合新手吗
• css3圆环旋转效果动画怎么做
• 使用css3属性如何丰富图片样式（圆角阴影渐变）_html5教程技巧
• css3中怎样定义动画的旋转中心点

css3的选择器有哪些

css3选择器如下： 

一、通配符选择器（*） 

通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。 

二、元素选择器（E） 

元素选择器，是css选择器中最常见而且最基本的选择器。 

三、类选择器（.className） 

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名 

四、id选择器（#ID） 

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用＂#＂如（#id）, 

五、后代选择器（E F） 

后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E 
F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。 

六、子元素选择器（E》F） 

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中E》F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E 
F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E 》 F，其中F仅仅是E的子元素而以。 

七、相邻兄弟元素选择器（E + F） 

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。

运用css3动画需要运用什么规则

CSS3 @keyframes 规则
标签定义及使用说明
使用@keyframes规则，你可以创建动画。
创建动画是通过逐步改变从一个CSS样式设定到另一个。
在动画过程中，您可以更改CSS样式的设定多次。
指定的变化时发生时使用％，或关键字"from"和"to"，这是和0％到100％相同。
0％是开头动画，100％是当动画完成。（推荐学习：CSS3视频教程。）
为了获得最佳的浏览器支持，您应该始终定义为0％和100％的选择器。
注意: 使用animation属性来控制动画的外观，还使用选择器绑定动画。.
语法
@keyframes animationname {keyframes-selector {css-styles;}}值
说明
animationname
必需的。定义animation的名称。
keyframes-selector
必需的。动画持续时间的百分比。
合法值：
0-100%
from (和0%相同)
to (和100%相同)
注意： 您可以用一个动画keyframes-selectors。
css-styles
必需的。一个或多个合法的CSS样式属性
实例：
《!DOCTYPE html》
《html》
《head》
《meta charset="utf-8"》
《title》CSS3《/title》
《style》
div
{
width:100px;
height:100px;
background:blue;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari and Chrome */
}

@keyframes mymove
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}

@-webkit-keyframes mymove /* Safari and Chrome */
{
0% {top:0px; background:blue; width:100px;}
100% {top:200px; background:yellow; width:300px;}
}
《/style》
《/head》
《body》
《p》《strong》注意:《/strong》 @keyframes 规则不兼容 IE 9 以及更早版本的浏览器.《/p》
《div》《/div》
《/body》
《/html》

Css3动画属性怎么使用

今天我们来给大家说一下Transform动画属性的使用方法和以及使用技巧，使用动画属性需要注意哪些方面呢？下面给大家举一个小列子。
Transform动画属性
transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。
rotate3d(x,y,z,angle) x,y,z那个属性 1 就围绕那个轴转动 角度deg
@keyframes name 预定义效果
animation 属性是一个简写属性，用于设置六个动画属性：
案列；
《!doctype html》
《html》
《head》
《meta charset="utf-8"》
《title》无标题文档《/title》
《link href="css/index.css" rel="stylesheet" type="text/css" /》
《/head》
《style type="text/css"》
*{
margin:0px;
padding:0px;
}
img{ display:block;}
.wrap{
border:1px solid #ff0000;
width:380px;
height:565px;
margin:0 auto;
position:relative;
top:50px;
-webkit-animation:upDown 2s linear infinite;
}
@-webkit-keyframes upDown{
0%{-webkit-transform:translateY(0);}
50%{-webkit-transform:translateY(20px);}
100%{-webkit-transform:translateY(0px);}
}
@-webkit-keyframes rota_head{
0%{-webkit-transform:rotate(0);}
50%{-webkit-transform:rotate(-5deg);}
100%{-webkit-transform:rotate(0);}
}
.head{
border:1px solid #ff0000;
position:absolute;
top:10px;
left:0;
z-index:1;
-webkit-animation:rota_head 2s linear infinite;
}
@-webkit-keyframes eye_open{
0%{opacity:1;}
85%{opacity:1;}
90%{opacity:0;}
100%{opacity:1;}
}
.eye_open{
position:absolute;
top:25px;
left:40px;
-webkit-animation:eye_open 2s linear infinite;
}
@-webkit-keyframes eye_close{
0%{opacity:0;}
85%{opacity:0;}
90%{opacity:1;}
100%{opacity:0;}
}
.eye_close{
position:absolute;
top:37px;
left:40px;
-webkit-animation:eye_close 2s linear infinite;

}
.body{
position:absolute;top:25px;left:8px;
}
.foot{ position:absolute;left:8px;bottom:0px;}
《/style》
《body》
《div class="wrap"》
《div class="head"》
《img src="imgs/sprite_43.png" alt=""》
《img src="imgs/shape_45.png" alt="" class="eye_open"》
《img src="imgs/shape_46.png" alt="" class="eye_close"》
《/div》
《div class="body"》
《img src="imgs/sprite_40.png"》
《/div》
《div class="foot"》
《img src="imgs/shape_41.png"》
《/div》
《/div》
《/body》
《/html》Css3动画的使用方法相信大家都已经了解了，更多精彩请关注Gxl网其它相关文章！
相关阅读：
属性选择器和伪类选择器的使用方法
CSS3的text-shadow字体阴影怎么使用
CSS3的box-shadow怎么使用

h5 css3 怎么写上拉刷新下拉加载

html5+css3实现上拉和下拉刷新
《!DOCTYPE html》
《html》
《head》
***隐藏网址***
《meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0"》
《meta name="apple-mobile-web-app-capable" content="yes"》
《meta name="apple-mobile-web-app-status-bar-style" content="black"》
《title》html5+css3实现上拉和下拉刷新《/title》
《style type="text/css" media="all"》
body,ul,li {
padding:0;
margin:0;
border:0;
}
body {
font-size:12px;
-webkit-user-select:none;
-webkit-text-size-adjust:none;
font-family:helvetica;
}
#header {
position:absolute; z-index:2;
top:0; left:0;
width:100%;
height:45px;
line-height:45px;
background-color:#d51875;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
padding:0;
color:#eee;
font-size:20px;
text-align:center;
}
#header a {
color:#f3f3f3;
text-decoration:none;
font-weight:bold;
text-shadow:0 -1px 0 rgba(0,0,0,0.5);
}
#footer {
position:absolute; z-index:2;
bottom:0; left:0;
width:100%;
height:48px;
background-color:#222;
background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
background-image:-o-linear-gradient(top, #999, #666 2%, #222);
padding:0;
border-top:1px solid #444;
}
#wrapper {
position:absolute; z-index:1;
top:45px; bottom:48px; left:-9999px;
width:100%;
background:#aaa;
overflow:auto;
}
#scroller {
position:absolute; z-index:1;
/* -webkit-touch-callout:none;*/
-webkit-tap-highlight-color:rgba(0,0,0,0);
width:100%;
padding:0;
}
#scroller ul {
list-style:none;
padding:0;
margin:0;
width:100%;
text-align:left;
}
#scroller li {
padding:0 10px;
height:40px;
line-height:40px;
border-bottom:1px solid #ccc;
border-top:1px solid #fff;
background-color:#fafafa;
font-size:14px;
}
#myFrame {
position:absolute;
top:0; left:0;
}
/**
*
* Pull down styles
*
*/
#pullDown, #pullUp {
background:#fff;
height:40px;
line-height:40px;
padding:5px 10px;
border-bottom:1px solid #ccc;
font-weight:bold;
font-size:14px;
color:#888;
}
#pullDown .pullDownIcon, #pullUp .pullUpIcon {
display:block; float:left;
width:40px; height:40px;
***隐藏网址***
-webkit-background-size:40px 80px; background-size:40px 80px;
-webkit-transition-property:-webkit-transform;
-webkit-transition-duration:250ms;
}
#pullDown .pullDownIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullUp .pullUpIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullDown.flip .pullDownIcon {
-webkit-transform:rotate(-180deg) translateZ(0);
}
#pullUp.flip .pullUpIcon {
-webkit-transform:rotate(0deg) translateZ(0);
}
#pullDown.loading .pullDownIcon, #pullUp.loading .pullUpIcon {
background-position:0 100%;
-webkit-transform:rotate(0deg) translateZ(0);
-webkit-transition-duration:0ms;
-webkit-animation-name:loading;
-webkit-animation-duration:2s;
-webkit-animation-iteration-count:infinite;
-webkit-animation-timing-function:linear;
}
@-webkit-keyframes loading {
from { -webkit-transform:rotate(0deg) translateZ(0); }
to { -webkit-transform:rotate(360deg) translateZ(0); }
}
《/style》
《/head》
《body》
***隐藏网址***
《div id="wrapper"》
《div id="scroller"》
《div id="pullDown"》
《span class="pullDownIcon"》《/span》《span class="pullDownLabel"》Pull down to refresh...《/span》
《/div》
《ul id="thelist"》
《li》Pretty row 1《/li》
《li》Pretty row 2《/li》
《li》Pretty row 3《/li》
《li》Pretty row 4《/li》
《li》Pretty row 5《/li》
《li》Pretty row 6《/li》
《li》Pretty row 7《/li》
《li》Pretty row 8《/li》
《li》Pretty row 9《/li》
《li》Pretty row 10《/li》
《li》Pretty row 11《/li》
《li》Pretty row 12《/li》
《li》Pretty row 13《/li》
《li》Pretty row 14《/li》
《li》Pretty row 15《/li》
《li》Pretty row 16《/li》
《li》Pretty row 17《/li》
《li》Pretty row 18《/li》
《li》Pretty row 19《/li》
《li》Pretty row 20《/li》
《li》Pretty row 21《/li》
《li》Pretty row 22《/li》
《li》Pretty row 23《/li》
《li》Pretty row 24《/li》
《li》Pretty row 25《/li》
《li》Pretty row 26《/li》
《li》Pretty row 27《/li》
《li》Pretty row 28《/li》
《li》Pretty row 29《/li》
《li》Pretty row 30《/li》
《li》Pretty row 31《/li》
《li》Pretty row 32《/li》
《li》Pretty row 33《/li》
《li》Pretty row 34《/li》
《li》Pretty row 35《/li》
《li》Pretty row 36《/li》
《li》Pretty row 37《/li》
《li》Pretty row 38《/li》
《li》Pretty row 39《/li》
《li》Pretty row 40《/li》
《/ul》
《div id="pullUp"》
《span class="pullUpIcon"》《/span》《span class="pullUpLabel"》Pull up to refresh...《/span》
《/div》
《/div》
《/div》
《div id="footer"》《/div》
《script type="text/javascript" src="/static/js/iscroll.js"》《/script》
《script type="text/javascript"》
var myScroll,
pullDownEl,
pullDownOffset,
pullUpEl,
pullUpOffset,
generatedCount = 0;
function pullDownAction () {
setTimeout(function () { // 《-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById(’thelist’);
for (i=0; i《3; i++) {
li = document.createElement(’li’);
li.innerText = ’Generated row ’ + (++generatedCount);
el.insertBefore(li, el.childNodes);
}
myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // 《-- Simulate network congestion, remove setTimeout from production!
}
function pullUpAction () {
setTimeout(function () { // 《-- Simulate network congestion, remove setTimeout from production!
var el, li, i;
el = document.getElementById(’thelist’);
for (i=0; i《3; i++) {
li = document.createElement(’li’);
li.innerText = ’Generated row ’ + (++generatedCount);
el.appendChild(li, el.childNodes);
}
myScroll.refresh(); // Remember to refresh when contents are loaded (ie: on ajax completion)
}, 1000); // 《-- Simulate network congestion, remove setTimeout from production!
}
function loaded() {
pullDownEl = document.getElementById(’pullDown’);
pullDownOffset = pullDownEl.offsetHeight;
pullUpEl = document.getElementById(’pullUp’);
pullUpOffset = pullUpEl.offsetHeight;
myScroll = new iScroll(’wrapper’, {
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match(’loading’)) {
pullDownEl.className = ’’;
pullDownEl.querySelector(’.pullDownLabel’).innerHTML = ’Pull down to refresh...’;
} else if (pullUpEl.className.match(’loading’)) {
pullUpEl.className = ’’;
pullUpEl.querySelector(’.pullUpLabel’).innerHTML = ’Pull up to load more...’;
}
},
onScrollMove: function () {
if (this.y 》 5 && !pullDownEl.className.match(’flip’)) {
pullDownEl.className = ’flip’;
pullDownEl.querySelector(’.pullDownLabel’).innerHTML = ’Release to refresh...’;
this.minScrollY = 0;
} else if (this.y 《 5 && pullDownEl.className.match(’flip’)) {
pullDownEl.className = ’’;
pullDownEl.querySelector(’.pullDownLabel’).innerHTML = ’Pull down to refresh...’;
this.minScrollY = -pullDownOffset;
} else if (this.y 《 (this.maxScrollY - 5) && !pullUpEl.className.match(’flip’)) {
pullUpEl.className = ’flip’;
pullUpEl.querySelector(’.pullUpLabel’).innerHTML = ’Release to refresh...’;
this.maxScrollY = this.maxScrollY;
} else if (this.y 》 (this.maxScrollY + 5) && pullUpEl.className.match(’flip’)) {
pullUpEl.className = ’’;
pullUpEl.querySelector(’.pullUpLabel’).innerHTML = ’Pull up to load more...’;
this.maxScrollY = pullUpOffset;
}
},
onScrollEnd: function () {
if (pullDownEl.className.match(’flip’)) {
pullDownEl.className = ’loading’;
pullDownEl.querySelector(’.pullDownLabel’).innerHTML = ’Loading...’;
pullDownAction(); // Execute custom function (ajax call?)
} else if (pullUpEl.className.match(’flip’)) {
pullUpEl.className = ’loading’;
pullUpEl.querySelector(’.pullUpLabel’).innerHTML = ’Loading...’;
pullUpAction(); // Execute custom function (ajax call?)
}
}
});
setTimeout(function () { document.getElementById(’wrapper’).style.left = ’0’; }, 800);
}
document.addEventListener(’touchmove’, function (e) { e.preventDefault(); }, false);
document.addEventListener(’DOMContentLoaded’, function () { setTimeout(loaded, 200); }, false);
《/script》
《/body》
《/html》

css和css3有什么区别

CSS与CSS3的主要区别：

• 主要不同的在于CSS3 比CSS多了一些样式设置而已；

• CSS3 可以 与 html5 结合，创造更酷炫的效果；

• CSS3 在低版本windows IE8以下不支持，而CSS是支持的；

• 所以，采用CSS3的新特性时，需要考虑到目标用户的浏览器的兼容性;

怎样用css3做出图标效果

说到现在的公司项目，相信不少公司的前端都是一团乱麻，不仅仅是因为JS没有框架用，CSS也是不用框架，这样就导致了项目如果需要是升级或者需要维护的时候就特别的困难。
最近领导决定花大时间整理一下css样式，用他的一句话来说就是为后来者造福。
首先我们在整理样式之前，必须得有一个自己团队的规范。
思考真的很重要，所谓的磨刀不误砍柴工，事实上也就是说你在做任何事情之前都要把大致的流程，大致的思路想清楚之后再动手，否则就可能做到一半发现这样不对，然后前面的工夫全白费了，这样启不是。。
前面说了一堆费话，下面就简单点来介绍一下我整理的图标（全部用css来实现的）。
css没有继承、多态等，所以为了write less ,do more就不得不想尽各种方法（我们自己规定凡是公共的、组件级别的样式全部以u-开头）。
我这里因为写所有标签的样式名都是以u-icon开头，所以写了如下样式，这样的话所有的以u-icon开头的全部都应用了如下三个样式，你想如果你有100个u-icon的样式那就省去了你300行代码呀！
{
display: inline-block;
color: #fff;
vertical-align: middle;
}
手机上的切换标签
html代码如下：
《span》《i》《/i》《/span》
《span class="u-icon-toggle on"》《i》《/i》《/span》页面显示效果如下：
css样式代码：
/*手机上的切换标签*/
.u-icon-toggle{
position: relative;
width: 60px;
height: 30px;
border-radius: 30px;
box-shadow: 0 0 0 1px #e5e5e5;
}
/*因为这里可能会在父元素上加on 也可能在子元素上加on 所以*/
.on.u-icon-toggle, .on .u-icon-toggle{
box-shadow: 0 0 0 1px #4089e8;
background-color: #4089e8;
}
.u-icon-toggle i{
position: absolute;
top: 0;
left: 0;
width: 30px;
height: 30px;
-webkit-box-shadow: 0 0 2px #bbb;
border-radius: 100%;
background-color: #fff;
-webkit-transition: 300ms linear;
-webkit-transform: translate3d(0,0,0);
}
.on.u-icon-toggle i, .on .u-icon-toggle i{
-webkit-transform: translate3d(30px,0,0);
}
各种点（空心点、实心点、蓝色点、橙色点）
html代码如下：
《span class="u-icon-pointB cur"》《/span》
《span》《/span》
《span》《/span》
《span class="u-icon-pointO cur"》《/span》
页面显示效果如下：
用css3实现各种图标效果

css样式代码：
.u-icon-pointB, .u-icon-pointO{
width: 6px;
height: 6px;
margin: 0 3px;
border-radius: 100%;/*圆角为100%就实现圆的效果*/
box-shadow: 0 0 0 1px #6bb5ff;
}
/*机票筛选界面橙色点icon*/
.u-icon-pointO{
background-color: #fff;
box-shadow: 0 0 0 1px #ff5d1d;
}
/*蓝色点icon*/
.cur.u-icon-pointB,.cur .u-icon-pointB{
background-color: #6bb5ff;/*如果背景和boder颜色不一致 则为空心圆*/
}
.cur.u-icon-pointO,.cur .u-icon-pointO{
background-color: #ff5d1d;
}
箭头
html代码如下：
《span》《/span》
《span class="u-icon-arr u-icon-arrD"》《/span》
《span class="u-icon-arr u-icon-arrU"》《/span》
页面显示效果如下：
用css3实现各种图标效果

css样式代码：
.u-icon-arr{
position: absolute;
top: 50%;
right: 15px;
width: 8px;
height: 8px;
margin-top: -2px;
border-style: solid;
border-width: 2px 2px 0 0;
border-color: #ababab;
-webkit-transform-origin: 75% 25%;
-webkit-transform: rotateZ(45deg);
-webkit-transition: 100ms ease-in .1s;
transition: 100ms ease-in .1s;
}css3做出图标效果的教程就是这么多了，更多精彩请关注Gxl网其它相关文章！
相关阅读：
CSS的编码怎么转换
css3点击显示涟漪特效
CSS3怎么制作蝴蝶飞舞的动画

html5与css3权威指南这本书适合新手吗

首先对于您这个问题：答案是肯定的塌冲孝禅。

    从这里可以看出，读者是一个新手。

html css永远是新手必经之路。而html与css3权威指南讲解的内容比较全面，也比较详细，

对于刚入行的小伙伴还是有非常大的作团慎歼用，另外书中还要很多小实例，可以根据书上进行操作，可以对知识进行一次复习，做到学一点，掌握一点。

css3圆环旋转效果动画怎么做

1、首先新建一个html空白文档，取名字叫做css3动画，保存一下。

***隐藏网址***

2、然后写html结构，只需要一个div元素即可，class名字叫做img

***隐藏网址***

3、设置其边框为不同的颜色，边框宽度设置成100px。

***隐藏网址***

4、因为是圆环，所以我们用到了css3的圆角效果，设置圆角为50%，也就是border-radius:50%，看一下效果。

***隐藏网址***

5、接下来就是关键的步骤了，也就是添加动画效果。输入以下代码

***隐藏网址***

6、来看一下最后的效果，还是不错的。

***隐藏网址***

使用css3属性如何丰富图片样式（圆角阴影渐变）_html5教程技巧

在css3中，直接在图片上使用box-shadow 和 border-radius，浏览器并不能很好的渲染。但是如果把图片作为background-image，添加的样式浏览器可以很好的渲染。我将会介绍如何使用box-shadow, border-radius 和 transition创建不同图片样式效果。 问题 通过查看demo能注意到，我们为第一行图片设置了border-radius 和 内嵌box-shadow。firefox渲染了图片的border-radius，但是没有渲染内嵌box-shadow。chrome和Safari两种效果都没有渲染。
代码如下: .normal img { border: solid 5px #000; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 1px 5px rgba(0,0,0,.5); -moz-box-shadow: inset 0 1px 5px rgba(0,0,0,.5); box-shadow: inset 0 1px 5px rgba(0,0,0,.5); } firefox效果：chrome/safari变通方案 为了使border-radius 和 内嵌box-shadow能够正常工作，我们需要把图片转换成background-image的方式。动态方式 为了动态完成这一工作，我们需要借助jquery为每一个图片添加背景图片的包装。下面的js代码为每一个图片添加了一个span的包装，span的背景图片路径就是图片的路径。 代码比较简单，我想就没有讲解的必要了。不清楚了可以直接去查jquery的api。
代码如下:输出 上面的代码会输出如下结果：
代码如下: 圆形图片 添加我们使用border-radius来实现圆形图片的效果，效果如下：css：
代码如下: .circle .image-wrap { -webkit-border-radius: 50em; -moz-border-radius: 50em; border-radius: 50em; } 卡片风格 下面是卡片风格的图片，使用了多个内嵌box-shadow。css：
代码如下: .card .image-wrap { -webkit-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); -moz-box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); box-shadow: inset 0 0 1px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(0,0,0,.4); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 浮雕风格 下面是浮雕效果。css：
代码如下: .embossed .image-wrap { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); box-shadow: inset 0 0 2px rgba(0,0,0,.8), inset 0 2px 0 rgba(255,255,255,.5), inset 0 -7px 0 rgba(0,0,0,.6), inset 0 -9px 0 rgba(255,255,255,.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 柔性浮雕风格 相对于浮雕样式，新样式添加了1px blur属性。css：
代码如下: .soft-embossed .image-wrap { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); -moz-box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); box-shadow: inset 0 0 4px rgba(0,0,0,1), inset 0 2px 1px rgba(255,255,255,.5), inset 0 -9px 2px rgba(0,0,0,.6), inset 0 -12px 2px rgba(255,255,255,.3); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 抠图风格 使用内嵌box-shadow就可以实现抠图效果。css：
代码如下: .cut-out .image-wrap { -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); -moz-box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); box-shadow: 0 1px 0 rgba(255,255,255,.2), inset 0 4px 5px rgba(0,0,0,.6), inset 0 1px 0 rgba(0,0,0,.6); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } 变形和发光 在这个例子中我们为图片包装添加transition属性，鼠标滑过的时候，他会从圆角变为圆形。然后我们使用多个box-shadow实现发光效果。css：
代码如下: .morphing-glowing .image-wrap { -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .morphing-glowing .image-wrap:hover { -webkit-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -moz-box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); box-shadow: 0 0 20px rgba(255,255,255,.6), inset 0 0 20px rgba(255,255,255,1); -webkit-border-radius: 60em; -moz-border-radius: 60em; border-radius: 60em; } 高光效果 高光的效果是通过为元素添加 :after 伪类实现的。css：
代码如下: .glossy .image-wrap { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); box-shadow: inset 0 -1px 0 rgba(0,0,0,.5); -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .glossy .image-wrap:after { position: absolute; content: ’ ’; width: 100%; height: 50%; top: 0; left: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1))); background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%); } 倒影效果 在这个例子中，我们将高光效果移到底部就实现倒影效果。css：
代码如下: .reflection .image-wrap:after { position: absolute; content: ’ ’; width: 100%; height: 30px; bottom: -31px; left: 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; background: -moz-linear-gradient(top, rgba(0,0,0,.3) 0%, rgba(255,255,255,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,.3)), color-stop(100%,rgba(255,255,255,0))); background: linear-gradient(top, rgba(0,0,0,.3) 0%,rgba(255,255,255,0) 100%); } .reflection .image-wrap:hover { position: relative; top: -8px; } 高光和倒影 本例我们使用:before 和 :after 将高光和倒影效果组合起来。css：
代码如下: .glossy-reflection .image-wrap { -webkit-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); -moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); box-shadow: inset 0 -1px 0 rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.6); -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .glossy-reflection .image-wrap:before { position: absolute; content: ’ ’; width: 100%; height: 50%; top: 0; left: 0; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; background: -moz-linear-gradient(top, rgba(255,255,255,0.7) 0%, rgba(255,255,255,.1) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,0.7)), color-stop(100%,rgba(255,255,255,.1))); background: linear-gradient(top, rgba(255,255,255,0.7) 0%,rgba(255,255,255,.1) 100%); } .glossy-reflection .image-wrap:after { position: absolute; content: ’ ’; width: 100%; height: 30px; bottom: -31px; left: 0; -webkit-border-top-left-radius: 20px; -webkit-border-top-right-radius: 20px; -moz-border-radius-topleft: 20px; -moz-border-radius-topright: 20px; border-top-left-radius: 20px; border-top-right-radius: 20px; background: -moz-linear-gradient(top, rgba(230,230,230,.3) 0%, rgba(230,230,230,0) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(230,230,230,.3)), color-stop(100%,rgba(230,230,230,0))); background: linear-gradient(top, rgba(230,230,230,.3) 0%,rgba(230,230,230,0) 100%); } 胶带风格 在这个例子中，我们使用:after来实现胶带的效果。css：
代码如下: .tape .image-wrap { -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); box-shadow: inset 0 0 2px rgba(0,0,0,.7), inset 0 2px 0 rgba(255,255,255,.3), inset 0 -1px 0 rgba(0,0,0,.5), 0 1px 3px rgba(0,0,0,.4); } .tape .image-wrap:after { position: absolute; content: ’ ’; width: 60px; height: 25px; top: -10px; left: 50%; margin-left: -30px; border: solid 1px rgba(137,130,48,.2); background: -moz-linear-gradient(top, rgba(254,243,127,.6) 0%, rgba(240,224,54,.6) 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(254,243,127,.6)), color-stop(100%,rgba(240,224,54,.6))); background: linear-gradient(top, rgba(254,243,127,.6) 0%,rgba(240,224,54,.6) 100%); -webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 0 rgba(0,0,0,.2); } 变形和着色 在这个例子中，我们在元素上使用:after，当鼠标进过的时候实现径向渐变的效果。 css：
代码如下: .morphing-tinting .image-wrap { position: relative; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius: 20px; -moz-border-radius: 20px; border-radius: 20px; } .morphing-tinting .image-wrap:hover { -webkit-border-radius: 30em; -moz-border-radius: 30em; border-radius: 30em; } .morphing-tinting .image-wrap:after { position: absolute; content: ’ ’; width: 100%; height: 100%; top: 0; left: 0; -webkit-transition: 1s; -moz-transition: 1s; transition: 1s; -webkit-border-radius: 30em; -moz-border-radius: 30em; border-radius: 30em; } .morphing-tinting .image-wrap:hover:after { background: -webkit-gradient(radial, 50% 50%, 40, 50% 50%, 80, from(rgba(0,0,0,0)), to(rgba(0,0,0,1))); background: -moz-radial-gradient(50% 50%, circle, rgba(0,0,0,0) 40px, rgba(0,0,0,1) 80px); } 羽化边缘圆形 我们同样可以使用径向渐变产生遮罩，实现羽化的效果。css：
代码如下: .feather .image-wrap { position: relative; -webkit-border-radius: 30em; -moz-border-radius: 30em; border-radius: 30em; } .feather .image-wrap:after { position: absolute; content: ’ ’; width: 100%; height: 100%; top: 0; left: 0; background: -webkit-gradient(radial, 50% 50%, 50, 50% 50%, 70, from(rgba(255,255,255,0)), to(rgba(255,255,255,1))); background: -moz-radial-gradient(50% 50%, circle, rgba(255,255,255,0) 50px, rgba(255,255,255,1) 70px); } 浏览器兼容性 这种实现方式在大多数支持border-radius, box-shadow, :before and :after特性的浏览器中（例如Chrome, Firefox 和 Safari），都能很好的工作。在不支持新特性的浏览器中，只会显示原始图片。 创造你自己的实现 借助:before 和:after伪类能为图片创造很多种样式，你可以自己尝试创建出新的效果。

css3中怎样定义动画的旋转中心点

1、首先新建一个html5文档，完成基本代码编写，如下图所示。

2、然后新建一个长100像素，高50像素背景为红色的长方形图层。

3、接着通过输入“border-radius:50%/50%”属性，如下图所示，将长方形图层设置成一个椭圆形。

4、接下来就是将椭圆旋转了，用“transform:rotate(30deg)”将椭圆旋转30度。

5、这样就实现了用css3将椭圆旋转，如下图所示预览即完成了。