IE10 下CSS3选择器及动画(animation)效果实例教程
各位朋友大家好,今天笔者继续为大家分享下样式表系列教程继上文：详解下变换及实例教程
()，CSS的选择器，我想大家并不会陌生吧，因为天天在使用，但对于的选择器，要运用的灵活到位，我想对很多朋友还是一定的难度，所以笔者从CSS3选择器、动画（Animations）效果基础开始为大家进行归纳总结，并附上实例源代码。
什么是选择器
CSS是一种用于屏幕上渲染，等一种语言，主要是在相应的元素中应用样式，来渲染相对应用的元素，那么这样我们选择相应的元素就很重要了，如何选择对应的元素，此时就需要我们所说的选择器。
CSS选择器是个难以置信地强大的工具：它们允许我们在标签中指定特定的元素而不必使用多余的 、 或。而且它们中的大部分并不是中新添加的，而是没有被得到应有的广泛应用。如果你在尝试实现一个干净的、轻量级的标签以及 结构与表现更好的分离，高级选择器是非常有用的。它们可以减少在标签中的和的数量并让设计师更方便的维护样式表。
选择器的分类:
选择器主要是用来确定的树形结构中的元素节点。我把选择器分开成三部分：
第一部分是我们常用的部分，我把他叫做基本选择器；
第二部分我把他称作是属性选择器；
第三部分我把他称作伪类选择器,如下图
IE浏览器各历史版本和其他浏览器对选择器兼容性对比
&style type="text/css"&
li{padding:10}
input[name^="news"]{
border:1px solid #F60;
ol li:nth-child(3n+1){
background:#EEE;
ol li:nth-child(3n+2){
background:#666;
input:disabled{
background:#EEE;
div:target{
background:#F60;
margin:5px 0;
background:#EEE;
padding:10
div:not(#note){
margin:10px 0;
border:1px solid #CCC;
padding:10
border-radius:5
&input name="newsletter" value="name=newsletter" /&
&input name="milkman" disabled="disabled" value="name=milkman"/&
&input name="newsboy" value="name=newsboy" /&
&div id="webt"&前端工程师要学习的内容主要有：&/div&
&li&JavaScript&/li&
&li&CSS&/li&
&li&HTML&/li&
&li&Ajax&/li&
&li&JSON&/li&
&li&XML&/li&
&li&jQuery&/li&
&div id="note"&ol li:nth-child(3n+1)表示匹配索引（从1开始）为3n+1的li元素，n可取0、1、2、3...等。E:nth-child(n)中n还为odd（奇数）、even（偶数）&/div&
IE10 对兼容情况
微软公开说明预览版已经支持属性 和 ，你可以直接写，而不是加个恶心的前缀，这是一个大的进步，也将激发更多浏览器厂商尽快普及支持更多。你一定认为这是微软给前端开发者的一个惊喜，的确，这是微软少有的积极，应该支持。相信不少同学已经使用过了这几个属性，是设定一个时间，然后可以进行一些平滑的动画操作；是变形转换，这个也非常多用；是动画，也是下面我们中间分析的内容。
IE 10提供了足够丰富的支持，在许多新的工具中都提供了动画、过渡和转换。还对下一代布局工具提供了实验性支持，例如网格布局、多列布局和区域。
IE10 下动画（Animations）特效
随着越来越热，动画也逐渐受到大家的关注。
CSS3里的动画特效。不用任何的，只用纯，你就能实现令人相当吃惊的动画效果，甚至是动画效果。下面跟随笔者一起使用IE10 观看一个经典的动画效果（http://andrew-hoyer.com/experiments/walking/）
CSS3演示人行走的动画
CSS中的动画分为三种：
变形、变换和动画
传递一个度数值来转动一个对象。
Scale是一个缩放功能，可以让任一元素变的更大。
基于和坐标重新定位元素
skew就是要将对象倾斜，参数是度数
transform支持矩阵变换，就是基于和坐标重新定位元素
1）变形实例：
&!DOCTYPE html&
&html lang="zh-cn"&
&meta charset="utf-8" /&
&title&CSS3动画&/title&
&meta name="author" content="" /&
&meta name="copyright" content="" /&
body{ font-family:"微软雅黑"; font-size:12}
h1{font-size:16}
.test{overflow:width:100%;margin:0;padding:0;list-style:}
.test li{float:width:200height:30margin:5px 5 line-height:30 border:1px solid #background-color:#text-align:-moz-transition:width .2s ease--webkit-transition:width .2s ease--o-transition:width .2s ease-transition:width .2s ease-}
.test li:nth-child(1):hover{width:250}
.test li:nth-child(2):hover{width:300}
.test li:nth-child(3):hover{width:350}
.test li:nth-child(4):hover{width:400}
.test li:nth-child(5):hover{width:450}
button {cursor:outline:blr:expression(this.hideFocus=true);border-style:border-width: 1px 1px 1px 0;border-color: #e2e2e2;height: 26line-height: 26 float:left}
input {vertical-align:border-style:border-width: 1border-color: #BCBCBC #E7E7E7 #E7E7E7 #BCBCBC;height: 24line-height: 24padding: 0 3 float:}
.forma{ margin:5px 5}
.forma input{ width:125-moz-transition:width .2s ease--webkit-transition:width .2s ease--o-transition:width .2s ease-transition:width .2s ease-}
.forma input:hover{ width:250}
.forma button{ width:60-moz-transition:.2s;-webkit-transition:.2s;-o-transition:.2s;transition:.2s; background-color:#}
.forma button:hover{ background-color:#ececec}
&h1&请将鼠标移动到下面的矩形上：&/h1&
&ul class="test"&
&li&宽度过渡&/li&
&li&宽度过渡&/li&
&li&宽度过渡&/li&
&li&宽度过渡&/li&
&li&宽度过渡&/li&
&form class="forma"&
&input type="text"/&
&button&搜索&/button&
2）transition(转换
一个涉及到属性的基本的转换就是：定义和移动一个元素从它的静止状态到它的或者激活状态比如，背景变化。
转换可以和变形同时使用以及引发诸如或事件以创建一些动画。
transition-property 指定转换的属性名称
比如将转换应用于属性。
transition-duration 定义转换花费的时间
transition-timing-function 可以理解为过度效果。
transition-delay 转换延迟的时间。
像属性一样酷，但是目前只有浏览器支持
Opera 10.5 pre版本也可以通过添加前缀来支持。
-moz-transition已经在中可用。
你也可以添加到你的中以实现将来的增强。甚至可以添加一个不用私有前缀的属性，以防万一。
可转换属性：
变换实例：
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&IE10 下CSS3选择器及动画(animation)效果实例教程-liwei3gjob&/title&
background-color:
@-webkit-keyframes mycolor {
background-color:
background-color:
background-color:
background-color:
div:hover {
-webkit-animation-name:
-webkit-animation-duration: 5s;
-webkit-animation-timing-function:
&div&IE10 下CSS3选择器及动画(animation)效果实例教程-liwei3gjob&/div&
3）Animation(动画
动画是最有用的地方。你可以将我们在上面讨论的所有的元素与动画属性
比如、和整合以创建像动画一样的效果——纯。
animation-name 动画的名称。
animation-duration 定义动画播放一次需要的时间。默认为；
animation-timing-function 定义动画播放的方式，参数设置类似
animation-delay 定义动画开始的时间
animation-iteration-count 定义循环的次数，即为无限次。默认是。
-webkit-animation-direction 动画播放的方向，两个值，默认为，向前播放。另一个值是，则第偶数次向前播放，第奇数次向反方向播放。
&!DOCTYPE html&
&meta charset="utf-8" /&
&title&IE10 下CSS3选择器及动画(animation)效果实例教程-blog.csdn.net/liwei3gjob&/title&
width: 500
background-color:
@-webkit-keyframes 'wobble' {
background-color:
-webkit-transform: rotate(0deg);
background-color:
-webkit-transform: rotate(30deg);
background-color:
-webkit-transform: rotate(-30deg);
background-color:
-webkit-transform: rotate(0deg);
div:hover {
-webkit-animation-name:
-webkit-animation-duration: 5s;
-webkit-animation-timing-function:
&div&IE10 下CSS3选择器及动画(animation)效果实例教程-blog.csdn.net/liwei3gjob&/div&
41 &/html&
总结：现在，让所有浏览器支持这些很棒的属性可能需要一个很长的过程。不用等待那一天的到来，我们可以先使用一些严谨的渐进增强以及来增强我们的网站和应用。
css animation 兼容360浏览器
IE10～11中animation使用scale出现闪烁问题
ie10 css3 transition 过渡
css3中动画兼容版
CSS3 @keyframe动画的基本用法与常见错误用法
让IE6/IE7/IE8支持CSS3的8种方法
requestAnimationFrame()请求动画帧的兼容IE9及以下写法
CSS3 animation实现点点点loading动画
没有更多推荐了，在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
想要设置网站图片默认为灰色，鼠标经过时显示为彩色
在网上找了很多方法， 修改css后，在非IE浏览器内都可以正常显示为灰色，但在IE11浏览器内一直为彩色查看好多教程，说是IE6-9都可以，但更高版本就不行了，有什么好办法没有
-webkit-filter: grayscale(1);
-moz-filter: grayscale(1);
filter: grayscale(1);
-ms-filter: grayscale(1);
-o-filter: grayscale(1);
请各位帮忙看看是什么原因
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
如果不是svg的图片格式，filter在ie浏览器上都不支持。如果是svg的话，filter也只是在ie10和11上支持。详细见
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可以使用canvas
var imgObj = document.getElementById('imgToGray');
function gray(imgObj) {
var canvas = document.createElement('canvas');
var canvasContext = canvas.getContext('2d');
var imgW = imgObj.
var imgH = imgObj.
canvas.width = imgW;
canvas.height = imgH;
canvasContext.drawImage(imgObj, 0, 0);
var imgPixels = canvasContext.getImageData(0, 0, imgW, imgH);
for (var y = 0; y & imgPixels. y++) {
for (var x = 0; x & imgPixels. x++) {
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data[i] + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data[i] =
imgPixels.data[i + 1] =
imgPixels.data[i + 2] =
canvasContext.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);
return canvas.toDataURL();
imgObj.src = gray(imgObj);
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
可能是当前的IE版本不兼容部分CSS3属性哦
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
svg或者canvas
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。ie11不支持css的expression有没有新的解决方案？_百度知道
ie11不支持css的expression有没有新的解决方案？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
V多余的解释24
来自电脑网络类芝麻团
V多余的解释24
采纳数：1141
获赞数：639
擅长：暂未定制
参与团队：
IE9以上都支持CSS3了，你谷歌、苹果、火狐都加了，为何不给IE11加一个呢？代码：background: -ms-linear-gradient(top,#46a0e1,#3280bf);已经过IE11浏览器测试通过，建议background:linear-gradient(top,#46a0e1,#3280bf);放在最后，注意优先顺序：.ui_title{ height:26line-height:26font-size:14font-weight:color:#DDD;padding-left:7border-bottom:1px solid #6da6e1;background:-webkit-gradient(linear,0% 0%, 0% 100%,from(#46a0e1),to(#3280bf)); background:-moz-linear-gradient(top,#46a0e1,#3280bf); background:-o-linear-gradient(top,#46a0e1,#3280bf);background:-ms-linear-gradient(top,#46a0e1,#3280bf);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#46a0e1',endColorstr='#3280bf');*background:#DDD; }background:linear-gradient(top,#46a0e1,#3280bf);
来自电脑网络类芝麻团
可以试试calc啊。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。拒绝访问 | www.jq22.com | 百度云加速
请打开cookies.
此网站 (www.jq22.com) 的管理员禁止了您的访问。原因是您的访问包含了非浏览器特征(0c43a1-ua98).
重新安装浏览器，或使用别的浏览器怎么让ie所有版本支持图片中的css3动画效果？？？？_百度知道
怎么让ie所有版本支持图片中的css3动画效果？？？？
如果不行可以改写成js么？？？求js代码跪求啊...
可以改写成js么？？？求js代码
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
来自电脑网络类芝麻团
这是因为低版本的IE发布在CSS3规则发布之前，建议不要指望所有IE支持动画了，IE11支持大部分css3。
采纳数：68
获赞数：356
要达到这样的效果，恐怕今天晚上得飞去美国，和盖茨好好谈谈了！
采纳数：22
获赞数：193
ie是反人类的
跪求js代码
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。