一、问答
CSS3有哪些常见的新特性？
** 1、CSS 选择器 **
例如：E:nth-child(even)，E :nth-child(odd)，E:not()，E:first-child，E:nth-last-child(n) ，E:nth-of-type(n)，E:nth-last-of-type(n)，E:last-child，E:first-of-type ，E:checked 等等
** 2、盒模型 **
例如：box-sizing: border-box
** 3、背景和边框 **
- a、背景
background-clip 规定背景的绘制区域;
background-origin 规定背景图片的定位区域;
background-size 规定背景图片的尺寸; - b、边框
border-image 设置所有边框图像的速记属性。
border-radius 一个用于设置所有四个边框- *-半径属性的速记属性
box-shadow 附加一个或多个下拉框的阴影
** 4、文字特效 **
text-shadow属性适用于文本阴影;
word-wrap:break-word 自动换行属性允许您强制文本换行
word-break: keep-all;//break-all 单词拆分换行属性
@font-face 规则
** 5、2D/3D转换 **
Paste_Image.png
3D转换属性
3D 转换方法
** 6、动画 **
Paste_Image.png
** 7、多列布局 **
Paste_Image.png
** 8、用户界面 **
Paste_Image.png
** 9、渐变**
线性渐变（Linear Gradients）- 向下/向上/向左/向右/对角方向
径向渐变（Radial Gradients）- 由它们的中心定义
以上具体详情见此处：http://www.runoob.com/css3/css3-tutorial.html
补充：
1、关于3d转换的资料可详见： http://www.w3cplus.com/css3/css3-3d-transform.html
2、关于2d中的transform:matrix() 可详见如下:
http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/
3、对于低版本IE（IE6-IE9）兼容CSS3方法可见：css3pie官网 或PIE使IE支持CSS3圆角盒阴影与渐变渲染
二、代码
（一）、写出如下 CSS3效果的简单事例
1、圆角， 圆形
2、div 阴影
3、2D 转换：放大、缩小、偏移、旋转
4、3D 转换：移动、旋转
5、背景色渐变
6、过渡效果
7、动画
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.circularA{
width: 100px;
height:100px;
border: 1px solid #000;
border-radius: 10px;
background-color: #6633FF;
text-align: center;
line-height: 100px;
margin: 10px;
}
.circularB{
width: 100px;
height:100px;
border: 1px solid #000;
border-radius: 50%;
background-color: #FF6699;
text-align: center;
line-height: 100px;
margin: 10px;
}
.shadow{
background-color: white;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
text-align: center;
margin: 10px;
width: 50%;
height: 50%;
color: #666;
transform: rotate(-7deg);
}
.shadow>img{
width: 90%;
height: 90%;
margin-top: 20px;
}
.change2d{
/*margin: 100px;*/
color: #666;
text-align: center;
width: 300px;
margin: 150px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
transform: rotate(9deg);
}
.change2d>img{
margin-top: 20px;
width: 90%;
height: auto;
color: #666;
cursor: pointer;
}
.change2d:hover{
transform: matrix(1.5,0,0,1.5,50,50);
transition: all 1s;
}
.change3d{
/*margin: 100px;*/
color: #666;
text-align: center;
width: 300px;
margin: 150px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.change3d>img{
margin-top: 20px;
width: 90%;
height: auto;
color: #666;
cursor: pointer;
}
.ct-3d{
/*transform-style:preserve-3d;*/
perspective: 160;
-webkit-perspective:160; /* Safari and Chrome */
perspective-origin:150% center;
-webkit-perspective-origin:150% center;/* Safari and Chrome */
}
.change3d:hover{
transform:rotateX(5deg) translate3d(250px,50px,10px);
transition: all 1s;
}
.bgGradient{
width: 400px;
height: 400px;
border-radius: 50%;
background: repeating-radial-gradient(red ,green,blue 10%);
}
.transitionEg{
width: 300px;
height: 500px;
margin: 50px 10px 10px 150px;
transform-style:preserve-3d;
}
.transitionEg img{
position: absolute;
top: 0;
left: 0;
width: 300px;
height: 400px;
}
.transitionEg img:nth-child(1){
z-index: 1;
opacity: .6;
}
.transitionEg img:nth-child(2){
z-index: 2;
-webkit-transform: scaleZ(3) rotateX(45deg);
transform: scaleZ(3) rotateX(45deg);
}
.transitionEg h3{
position: absolute;
top: 80%;
left: 20%;
}
.transitionCt{
position: relative;
-webkit-perspective: 4200;
perspective: 4200;
cursor: pointer;
}
.transitionCt:hover{
-webkit-perspective: 2200;
perspective: 2200;
transition: all 2s;
}
.btn{
margin: 20px 10px 200px 10px;
display: inline-block;
padding: 15px 25px;
font-size: 24px;
font-weight: bolder;
cursor: not-allowed;
text-align: center;
color: #fff;
border-radius: 15px;
background-color: #4caf39;
box-shadow: 0 20px #999;
}
@keyframes myfirstAnimation {
from { }
to{
background-color: #0c8e35;
box-shadow: 0 2px #666;
transform: translateY(12px);
}
}
.btn{
-webkit-animation: myfirstAnimation 2s linear 1.5s infinite;
animation: myfirstAnimation 2s linear 1.5s infinite;
/*-webkit-animation-name:myfirst;*/
/*-webkit-animation-duration:5s; 完成时间 */
/*-webkit-animation-timing-function:linear;规定动画的速度曲线。默认是 "ease"。*/
/*-webkit-animation-delay:2s; 延迟时间*/
/*-webkit-animation-iteration-count:infinite; 循环次数 */
/*-webkit-animation-direction:alternate; 是否反过来运行*/
/*-webkit-animation-play-state:running;规定动画是否正在运行或暂停*/
}
.animateEg{
height: 100px;
width: 400px;
}
</style>
</head>
<body>
<div class="circularA">圆角</div>
<div class="circularB">圆形</div>
<div class="shadow"><h3>美丽的风景</h3></div>
<div class="change2d"><h3>鼠标放上去我会放大</h3></div>
<div class="ct-3d">
<div class="change3d"><h3>鼠标放上去我会移动和旋转</h3></div>
</div>
<div class="bgGradient"></div>
<div class="transitionCt">
<div class="transitionEg">
<h3>鼠标放上来我会慢慢动</h3>
</div>
</div>
<div class="animateEg">
<button class="btn">按钮正在被连续按下</button>
</div>
</body>
</html>
预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/1/task44-1.html
（二）、实现如下全屏图加过渡色的效果（具体效果随意）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
width: 100%;
height: 100%;
}
div{
background: url("./1.jpg") no-repeat center center ;
background-size: cover;
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
}
div:before{
position: absolute;
top: 0;
left: 0;
bottom: 0;
display: block;
content: "";
width: 50%;
background: linear-gradient(to bottom right , rgba(255,0,0,0), rgba(255,0,0,1)); /* 标准的语法（必须放在最后）*/
}
div:after{
position: absolute;
top: 0;
bottom: 0;
right: 0;
display: block;
content: "";
width: 50%;
background: linear-gradient(to bottom left, rgba(187, 61, 187,0),rgba(187, 61,187,1)); /* 标准的语法（必须放在最后）*/
}
</style>
</head>
<body>
<div>
</div>
</body>
</html>
预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/2/task44-2.html
（三）、写出如下 loading 动画效果
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.bg{
background-color: rgb(52,83,145);
width: 100%;
height: 100%;
position: relative;
}
.loding:before,
.loding,
.loding:after{
width: 20px;
height: 40px;
background-color: #ffffff;
position: absolute;
}
.loding{
top: 10%;
left: 40%;
}
.loding:before{
content: "";
display: block;
position: absolute;
top: 0;
left: -150%;
}
.loding:after{
content: "";
display: block;
position: absolute;
top: 0;
left: 100%;
margin-left: 10px;
}
@keyframes myLodingFrames {
0%,80%,100% {
height: 40px;
box-shadow: 0 0 #fff;
}
20%{
height: 50px;
box-shadow: 0 -20px #fff;
}
}
.loding:before,
.loding,
.loding:after{
-webkit-animation: myLodingFrames 1s linear infinite ;
animation: myLodingFrames 1s linear infinite ;
}
.loding{
-webkit-animation-delay: 0.16s;
animation-delay: 0.16s;
}
.loding:after{
-webkit-animation-delay: 0.32s;
animation-delay: 0.32s;
}
</style>
</head>
<body>
<div class="bg">
<div class="loding"></div>
</div>
</body>
</html>
预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3A.html
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html,body{
width: 100%;
height: 100%;
}
*{
margin: 0;
padding: 0;
}
.bg{
background-color: rgb(52,83,145);
width: 100%;
height: 100%;
position: relative;
}
.loding{
width: 100px;
height: 100px;
border-top:20px solid rgba(255,255,255,0.2) ;
border-right:20px solid rgba(255,255,255,0.2);
border-bottom:20px solid #fff;
border-left:20px solid rgba(255,255,255,0.2);
border-radius: 50%;
position: absolute;
top: 10%;
left: 40%;
}
@keyframes myLodingFrames {
from {transform: rotate(0deg)}
to {transform: rotate(360deg) }
}
.loding{
-webkit-animation: myLodingFrames 1s linear 1.5s infinite;
animation: myLodingFrames 1s linear 1.5s infinite;
}
</style>
</head>
<body>
<div class="bg">
<div class="loding"></div>
</div>
</body>
</html>
预览地址：https://github.com/have-not-BUG/task/blob/master/renwu/task44/3/task44-3B.html
**本文版权归本人即简书笔名：该账户已被查封 所有，如需转载请注明出处。谢谢！ *
