css3新特性

<meta charset="utf-8">

1 渐变(linear)

渐变一般用于背景颜色的设置上

1 线性渐变

使用方向：

语法： background: linear-gradient(direction, color-stop1, color-stop2, ...);

可规定不同方向，向上/向下/向左/向右/对角，如：

.linear{ float: left; margin-left: 20px; width: 400px; height: 400px; text-align: center; line-height: 400px; color: #ffffff; } .linear-down{ background: -webkit-linear-gradient(red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(red, blue); /* 标准的语法（必须放在最后） */ } .linear-up{ background: -webkit-linear-gradient(down,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(top,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(top,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to top,red, blue); /* 标准的语法（必须放在最后） */ } .linear-left{ background: -webkit-linear-gradient(right,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(left,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(left,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to left,red, blue); /* 标准的语法（必须放在最后） */ } .linear-right{ background: -webkit-linear-gradient(left,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(right,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(right,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(to right,red, blue); /* 标准的语法（必须放在最后） */ } <div class="linear-down linear"> 这是背景向下的渐变 </div> <div class="linear-up linear"> 这是背景向上的渐变 </div> <div class="linear-left linear"> 这是背景向左的渐变 </div> <div class="linear-right linear"> 这是背景向右的渐变 </div>

效果如下：

图片.png

注意：最好是将各个浏览器的属性都写上，标准语法写在后面，标准语法 to + 方向，比如向左的话是 to left，而除了 webkit 中第一个属性是 起始点位，如向下是 top，其他都是 方向向哪（比如向下 就是 down），默认的话是从上往下。

对角也是如此，就第一个参数使用两个方向，如 left top

使用角度：

语法： background: linear-gradient(angle, color-stop1, color-stop2, ...);

角度是指水平和渐变线的角度，按逆时针方向计算。换句话说，0deg 将创建一个从下到上的渐变，90deg 将创建一个从左到右的渐变。

图片.png

.linear{ float: left; margin-left: 20px; width: 400px; height: 400px; text-align: center; line-height: 400px; color: #ffffff; } .linear-0{ background: -webkit-linear-gradient(0deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(0deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(0deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(0deg,red, blue); /* 标准的语法（必须放在最后） */ } .linear-90{ background: -webkit-linear-gradient(90deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(90deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(90deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(90deg,red, blue); /* 标准的语法（必须放在最后） */ } .linear-180{ background: -webkit-linear-gradient(180deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(180deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(180deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(180deg,red, blue); /* 标准的语法（必须放在最后） */ } .linear--90{ background: -webkit-linear-gradient(-90deg,red, blue); /* Safari 5.1 - 6.0 */ background: -o-linear-gradient(-90deg,red, blue); /* Opera 11.1 - 12.0 */ background: -moz-linear-gradient(-90deg,red, blue); /* Firefox 3.6 - 15 */ background: linear-gradient(-90deg,red, blue); /* 标准的语法（必须放在最后） */ } <div class="linear-0 linear"> 0deg </div> <div class="linear-90 linear"> 90deg </div> <div class="linear-180 linear"> 180deg </div> <div class="linear--90 linear"> -90deg </div>

图片.png

2 径向渐变

由中心往两边扩散，由中心定义，同时，也可以指定渐变中心，形状（圆形或椭圆形），大小

语法：background: radial-gradient(center, shape size, start-color, ..., last-color);

第一个参数设定中心点位置，第二个是尺寸大小，如：

#grad1 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } #grad2 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-side,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } #grad3 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, closest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } #grad4 { height: 150px; width: 150px; background: -webkit-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Safari 5.1 - 6.0 */ background: -o-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Opera 11.6 - 12.0 */ background: -moz-radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* Firefox 3.6 - 15 */ background: radial-gradient(60% 55%, farthest-corner,blue,green,yellow,black); /* 标准的语法（必须放在最后） */ } <h3>径向渐变 - 不同尺寸大小关键字的使用</h3> <p><strong>closest-side：</strong></p> <div id="grad1"></div> <p><strong>farthest-side：</strong></p> <div id="grad2"></div> <p><strong>closest-corner：</strong></p> <div id="grad3"></div> <p><strong>farthest-corner（默认）：</strong></p> <div id="grad4"></div>

效果如下：

图片.png

2 过渡(transition)

元素从一种样式到另一种样式时为元素添加效果，通常需要 CSS 属性改变，需要一个触发点，典型事件就是鼠标指针位于元素上

语法： transition是简写，有四个属性

transition-property：规定应用过渡的 CSS 属性名称

transition-duration：过渡效果花费的时间，默认为0

transition-timing-function： 过渡效果时间曲线，默认是“ease（平滑）”

transition-delay： 规定过渡效果何时开始，默认是0

如：transition： width 1s linear 2s

transition-timing-function能取的值

1 linear：规定以相同速度开始到结束的过渡效果

2 ease： 规定慢速开始，然后变快，然后再慢速结束的过渡效果

3 ease-in： 规定慢速开始的过渡效果

4 ease-out： 规定慢速结束的过渡效果

5 ease-in-out：规定那个慢速开始和结束的过渡效果

div { width:100px; height:100px; background:yellow; transition-property:width; transition-duration:1s; transition-timing-function:linear; transition-delay:2s; /* Firefox 4 */ -moz-transition-property:width; -moz-transition-duration:1s; -moz-transition-timing-function:linear; -moz-transition-delay:2s; /* Safari and Chrome */ -webkit-transition-property:width; -webkit-transition-duration:1s; -webkit-transition-timing-function:linear; -webkit-transition-delay:2s; /* Opera */ -o-transition-property:width; -o-transition-duration:1s; -o-transition-timing-function:linear; -o-transition-delay:2s; } div:hover { width:200px; } <body> <div></div> <p>请把鼠标指针放到黄色的 div 元素上，来查看过渡效果。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> <p><b>注释：</b>这个过渡效果会在开始之前等待两秒。</p> </body>

效果如下：

图片.png

2s后，宽度会变长

图片.png

而当鼠标移开时，就恢复原状

2 转换(transform)

转换的2D 转换方法：

• translate(x，y) --- 移动，沿着 X 和 Y轴移动元素 x 和 y
• rotate() --- 顺时针旋转角度
• scale() --- 缩放，给定宽度（x轴）和高度（Y轴）参数
• skew() --- 翻转，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
• matrix --- 所有2D转换的组合

语法： transform： translate(40px,50px)【这里加转换方法】

如：

<style> div { width:100px; height:75px; background-color:yellow; border:1px solid black; } div#div2 { transform:translate(50px,100px); -ms-transform:translate(50px,100px); /* IE 9 */ -moz-transform:translate(50px,100px); /* Firefox */ -webkit-transform:translate(50px,100px); /* Safari and Chrome */ -o-transform:translate(50px,100px); /* Opera */ } </style> </head> <body> <div>你好。这是一个 div 元素。</div> <div id="div2">你好。这是一个 div 元素。</div>

效果如下：

图片.png

重点说一下3D转换的方法

转换是使元素改变形状、尺寸和位置的一种效果

其实3D 转换就是将坐标系扩展到三维，也就是有Z轴，常见 3D 转换方法

-- rotateX() 绕 X 轴给定度数进行旋转

-- rotateY() 绕 Y 轴给定度数进行旋转

-- translateZ() 在 Z 轴移动元素位置

-- translate3d(x,y,z)， 定义 3D 转化

开启GPU加速，其中一个方法是将视图层弄成复合图层，GPU对其进行渲染，而 3D 方法是可以将视图层弄成复合图层的，所以转换成 3D 的方法都是可以开启GPU加速渲染的

3 动画(animation)

css3@keyframes 规则

@keyframes 规则用于创建动画。在 @keyframes 中规定某项 CSS 样式，就能创建由当前样式逐渐改为新样式的动画效果。语法如下：

@keyframes myfirst { from {background: red;} to {background: yellow;} } @-moz-keyframes myfirst /* Firefox */ { from {background: red;} to {background: yellow;} } @-webkit-keyframes myfirst /* Safari 和 Chrome */ { from {background: red;} to {background: yellow;} } @-o-keyframes myfirst /* Opera */ { from {background: red;} to {background: yellow;} }

css3动画

@keyframes 规则创建动画后，要捆绑在某个选择器，否则不会产生效果

通过规定至少以下两项 CSS3 动画属性，即可将动画绑定到选择器：

• 规定动画的名称
• 规定动画的时长

如：

div { animation: myfirst 5s; -moz-animation: myfirst 5s; /* Firefox */ -webkit-animation: myfirst 5s; /* Safari 和 Chrome */ -o-animation: myfirst 5s; /* Opera */ }

实例如下：

<style> div { width:100px; height:100px; background:red; animation:myfirst 5s; -moz-animation:myfirst 5s; /* Firefox */ -webkit-animation:myfirst 5s; /* Safari and Chrome */ -o-animation:myfirst 5s; /* Opera */ } @keyframes myfirst { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-moz-keyframes myfirst /* Firefox */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-webkit-keyframes myfirst /* Safari and Chrome */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } @-o-keyframes myfirst /* Opera */ { 0% {background:red;} 25% {background:yellow;} 50% {background:blue;} 100% {background:green;} } </style> </head> <body> <div></div> <p><b>注释：</b>当动画完成时，会变回初始的样式。</p> <p><b>注释：</b>本例在 Internet Explorer 中无效。</p> </body>

C333 动画属性

animation： 所有动画属性的简写，除了 animation-play-state 属性。

animation-name：动画名称

animation-duration：动画时长。默认0

animation-timing-function： 动画速度曲线，默认“ease”

animation-delay：动画何时开始，默认0

animation-iteration-count：n / infinite（无限次） 动画播放次数，默认1

animation-direction：normal / alternate(反向) 规定动画是否在下一周期逆向播放。默认是“normal”，