web学习-HTML5与CSS3新增功能-1
Posted 虚拟流水铺
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了web学习-HTML5与CSS3新增功能-1相关的知识，希望对你有一定的参考价值。
CSS3圆角、rgba
CSS3圆角
设置某一个角的圆角，比如设置左上角的圆角：
border-top-left-radius:30px 60px;
同时分别设置四个角： border-radius:30px 60px 120px 150px;
设置四个圆角相同：
border-radius:50%;
rgba（新的颜色值表示法）
1、盒子透明度表示法：
.box{opacity:0.1;/* 兼容IE */filter:alpha(opacity=10);}
2、rgba(0,0,0,0.1) 前三个数值表示颜色，第四个数值表示颜色的透明度
CSS3 transition动画
1、transition-property 设置过渡的属性，比如：width height background-color
2、transition-duration 设置过渡的时间，比如：1s 500ms
3、transition-timing-function 设置过渡的运动方式，常用有 linear(匀速)|ease(缓冲运动)
4、transition-delay 设置动画的延迟
5、transition: property duration timing-function delay 同时设置四个属性
<style type="text/css">.box{width:100px;height:100px;background-color:gold;/* transition:width 1s ease,height 1s ease 1s,background-color 1s ease 2s; *//*多个属性同时做动画，可以合并成下面一句transition:width 1s ease,height 1s ease,background-color 1s ease;*/transition:all 1s ease;}.box:hover{width:600px;height:500px;background-color:red;}</style>
CSS3 transform变换（静态的效果）
1、translate(x,y) 设置盒子位移（translate位移比定位做的位移性能高，建议使用这种位移）
2、scale(x,y) 设置盒子缩放
3、rotate(deg) 设置盒子旋转
4、skew(x-angle,y-angle) 设置盒子斜切
5、perspective 设置透视距离
6、transform-style flat | preserve-3d 设置盒子是否按3d空间显示
7、translateX、translateY、translateZ 设置三维移动
8、rotateX、rotateY、rotateZ 设置三维旋转
9、scaleX、scaleY、scaleZ 设置三维缩放
10、tranform-origin 设置变形的中心点
11、backface-visibility 设置盒子背面是否可见
举例：
<html lang="en"><head><meta charset="UTF-8"><title>transform</title><style type="text/css">.box{width:200px;height:200px;border:3px solid #000;background-color:gold;margin:50px auto 0;/* translate位移比定位做的位移性能高，建议使用这种位移 */transform:translate(0px,0px);transition:all 500ms ease;}.box:hover{transform:translate(30px,30px);}.box2{width:200px;height:200px;border:3px solid #000;background-color:gold;margin:50px auto 0;transform:scale(1,1);transition:all 500ms ease;}.box2:hover{transform:scale(2,2);}.box3{width:200px;height:200px;border:3px solid #000;background-color:gold;margin:50px auto 0;transform:rotate(0deg);transition:all 500ms ease;}.box3:hover{transform:rotate(45deg);}.box4{width:200px;height:200px;border:3px solid #000;background-color:gold;margin:50px auto 0;transform:skew(0,0);transition:all 500ms ease;}.box4:hover{transform:skew(0,45deg);}</style></head><body><div class="box"></div><div class="box2"></div><div class="box3"></div><div class="box4"></div></body></html>
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">.box01,.box02,.box03,.box04{width:200px;height:200px;border:3px solid #000;background:gold;margin:30px;float:left;transition:all 500ms ease;}.box02{transform-origin:left center;}.box03{transform-origin:left top;}.box04{transform-origin:50px 50px;}.box01:hover,.box02:hover,.box03:hover,.box04:hover{transform:rotate(90deg);}</style></head><body><div class="box01"></div><div class="box02"></div><div class="box03"></div><div class="box04"></div></body></html>
<html lang="en"><head><meta charset="UTF-8"><title>三维旋转</title><style type="text/css">/*旋转的轴向：x轴：从左往右y轴：从上往下z轴：从屏幕内往外判断旋转的方向：让轴向对着自己，顺时针方向*/.box{width:300px;height:300px;background-color:gold;border:3px solid #000;margin:50px auto 0;transform-style:preserve-3d;/* 做变形动画需要设置初始值，不设置容易出现跳变的bug */transform:perspective(800px) rotateY(0deg);transition:all 500ms ease;}.box:hover{transform:perspective(800px) rotateY(45deg);}.box2{width:300px;height:300px;background-color:gold;border:3px solid #000;margin:50px auto 0;transform-style:preserve-3d;/* 做变形动画需要设置初始值，不设置容易出现跳变的bug */transform:perspective(800px) rotateX(0deg);transition:all 500ms ease;}.box2:hover{transform:perspective(800px) rotateX(45deg);}</style></head><body><div class="box"></div><div class="box2"></div></body></html>
CSS3 animation动画
1、@keyframes 定义关键帧动画
2、animation-name 动画名称
3、animation-duration 动画时间
4、animation-timing-function 动画曲线 linear(匀速)|ease(缓冲)|steps(步数)
5、animation-delay 动画延迟
6、animation-iteration-count 动画播放次数 n|infinite
7、animation-direction 动画结束后是否反向还原 normal|alternate
8、animation-play-state 动画状态 paused(停止)|running(运动)
9、animation-fill-mode 动画前后的状态 none(缺省)|forwards(结束时停留在最后一帧)|backwards(开始时停留在定义的开始帧)|both(前后都应用)
10、animation:name duration timing-function delay iteration-count direction;同时设置多个属性
<html lang="en"><head><meta charset="UTF-8"><title>Document</title><style type="text/css">/* 定义动画 */@keyframes moving{from{width:100px;}to{width:500px;}}.box{width:100px;height:100px;background-color:gold;animation:moving 1s ease infinite alternate;}.box:hover{animation-play-state:paused;}</style></head><body><div class="box"></div></body></html>
<html lang="en"><head><meta charset="UTF-8"><title>风车旋转</title><style type="text/css">@keyframes rotating{from{transform:rotate(0deg);}to{transform:rotate(360deg);}}.zhuan{display:block;width:400px;height:400px;margin:50px auto 0;animation:rotating 2s linear infinite;}</style></head><body><img src="images/fengche.png" alt="风车图片" class="zhuan"></body></html>
人物走路动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>走路动画</title>
<style type="text/css">
.box{
width:120px;
height:180px;
border:1px solid #ccc;
margin:50px auto 0;
position:relative;
overflow:hidden;
}
.box img{
display:block;
width:960px;
height:182px;
position: absolute;
left:0;
top:0;
animation:walking 1.0s steps(8) infinite;
}
@keyframes walking{
from{
left:0px;
}
to{
left:-960px;
}
}
</style>
</head>
<body>
<div class="box"><img ></div>
</body>
</html>动画中使用的图片如下：
CSS3新增选择器
1、E:nth-child(n)：匹配元素类型为E且是父元素的第n个子元素
<style type="text/css">.list div:nth-child(2){background-color:red;}</style>......<div class="list"><h2>1</h2><div>2</div><div>3</div><div>4</div><div>5</div></div><!-- 第2个子元素div匹配 -->
2、E:first-child：匹配元素类型为E且是父元素的第一个子元素
3、E:last-child：匹配元素类型为E且是父元素的最后一个子元素
4、E > F E元素下面第一层子集
5、E ~ F E元素后面的兄弟元素
6、E + F 紧挨着的后面的兄弟元素
属性选择器：
1、E[attr] 含有attr属性的元素
<style type="text/css">div[data-attr='ok']{color:red;}</style>......<div data-attr="ok">这是一个div元素</div>
2、E[attr='ok'] 含有attr属性的元素且它的值为“ok”
3、E[attr^='ok'] 含有attr属性的元素且它的值的开头含有“ok”
4、E[attr$='ok'] 含有attr属性的元素且它的值的结尾含有“ok”
5、E[attr*='ok'] 含有attr属性的元素且它的值中含有“ok”
CSS权重
CSS权重指的是样式的优先级，有两条或多条样式作用于一个元素，权重高的那条样式对元素起作用,权重相同的，后写的样式会覆盖前面写的样式。
权重的等级
可以把样式的应用方式分为几个等级，按照等级来计算权重
1、!important，加在样式属性值后，权重值为 10000
2、内联样式，如：style=””，权重值为1000
3、ID选择器，如：#content，权重值为100
4、类，伪类和属性选择器，如： content、:hover 权重值为10
5、标签选择器和伪元素选择器，如：div、p、:before 权重值为1
6、通用选择器（*）、子选择器（>）、相邻选择器（+）、同胞选择器（~）、权重值为0
权重的计算实例
<style type="text/css">div{color:red ;}</style>......<div style="color:blue">这是一个div元素</div><!--两条样式同时作用一个div，上面的样式权重值为10000+1，下面的行间样式的权重值为1000，所以文字的最终颜色为red-->
<style type="text/css">#content div.main_content h2{color:red;}#content .main_content h2{color:blue;}</style>......<div id="content"><div class="main_content"><h2>这是一个h2标题</h2></div></div><!--第一条样式的权重计算： 100+1+10+1，结果为112；第二条样式的权重计算： 100+10+1，结果为111；h2标题的最终颜色为red-->
以上是关于web学习-HTML5与CSS3新增功能-1的主要内容，如果未能解决你的问题，请参考以下文章
附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记
附全部代码+图片使用HTML5+CSS3绘制HTML5的logo——Web前端系列学习笔记