CSS3新增特性详解(二)

当前位置 : 首页 > 网页制作 > CSS > CSS3新增特性详解(二)

CSS3新增特性详解(二)

来源: 作者: 时间:2016-01-23 10:51
上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器、多背景图、阴影、渐变等。本文主要介绍CSS3中新增的动态特性,如过度、动画、变形等。transitian:-webkit-transition:all
上篇博文主要介绍了CSS3新增特性中的静态特性,比如新的选择器、多背景图、阴影、渐变等。本文主要介绍CSS3中新增的动态特性,如过度、动画、变形等。
 
 
 
transitian:
 
 -webkit-transition:all 0.5s linear 0.3s; 
 
过度效果,习惯上也叫做渐变。只不过这个渐变是指为动态效果加上一个可视的过程,要与前文中颜色的渐变区分开。
 
这里还是别忘了在上文中提到的前缀问题,示例中为了节省时间所以只在加了测试用的前缀。
 
transition:共四个参数:
 
1.渐变属性,包括none:停止渐变,all:默认值,元素产生任何属性值变化时都执行渐变效果,通常情况下都用all, indent:指定元素的某一属性值;
 
2.渐变过程的持续时间,默认值为0;
 
3.变化的速率,ease:逐渐变慢,linear:匀速,ease-in:加速,ease-out:减速,ease-in-out:先加速后减速,cubic-bezier:自定义;
 
每个属性都可以设置其具体的贝塞尔曲线值,不过一般情况下用linear匀速就足够了,太另类显得非主流。
 
4.变化的延迟时间。
 
之前在讲伪类的那篇文章中已经贴过渐变示例的GIF了。
 
先写一段代码如下:
 
复制代码
        div{
            width: 100px;
            height: 100px;
            background-color: red;
        }
        div:hover{
            background-color: blue;
        }    
复制代码
效果:
 
 
 
加入渐变:
 
复制代码
        div{
            width: 100px;
            height: 100px;
            background-color: red;
            -webkit-transition:all 0.5s linear 0.3s;
        }
        div:hover{
            background-color: blue;
        }    
复制代码
效果:
 
 
 
这里要注意的是transition不仅可以对颜色的改变产生过度效果,也可以对尺寸、位置等等的属性均带来过度效果。
 
这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发,并圆滑地以动画效果改变CSS的属性值。
 
 
 
 
keyframes:
 
CSS3自带的动画特性,可以不借助JS来完成一些简单的动画效果。但是这里不得不说的是,keyframes的用处并不多,稍微复杂一点的动画用JS搭配CSS3的过度效果总是最理想的。 
 
复制代码
@-webkit-keyframes divMove{
            from{
                top: 0;
                left: 0;
            }
            to{
                top:200px;
                left: 200px;
            }
        }
        div{
            width: 100px;
            height: 100px;
            -webkit-border-radius: 50px;
            position: absolute;
            background-color: forestgreen;
            -webkit-animation:divMove 2s infinite linear;
        }
复制代码
 
 
首先创建动画规则,[email protected],后接浏览器前缀,后接keyframes,之后是自己定的动画名称。from表示起始状态,to表示结束状态,大括号内写CSS样式。
 
定义完动画规则后,在你想要加入该动画的元素上添加animation。共有4个参数:1.自定义的动画名称 2.动画完成所用时间 3.infinite表示循环播放动画 4.变化速率,同transition。
 
效果:
 
 
 
定义动画规则时也可以这样写: 
 
复制代码
0%{
   background-color: red;
}
25%{
   background-color: blue;
}
50%{
   background-color: green;
}
75%{
   background-color: yellow;
}
100%{
   background-color: #8a2be2;
}
复制代码
这样写法是将动画过程按想要的时间百分比细分,上例中from对应0%,to对应100%。
 
总之CSS3中的动画特性由于其局限性较大,在实际中运用并不多。
 
 
 
transform:
 
变形,它包括五种变换方式:
 
–旋转rotate
–扭曲skew
–缩放scale
–移动translate
–矩阵变形matrix
其中旋转和移动应用较多,在这里主要介绍下。扭曲和缩放由于会导致图形或图片等元素失真,实际应用很少。所以这里只是讲解下写法而不贴实例了,有兴趣的读者自己尝试吧。
 
rotate旋转:
现有一div块
 
加入旋转变换:
div{
   -webkit-transform:rotate(30deg);
}
其中rotate后的括号里填旋转的度数,单位:角度(deg)。若值为正则顺时针旋转,为负则逆时针旋转。
 
效果:
 
 
 
这里还要提一点就是transform-origin(X,Y),它是用来定义元素基点,也就是元素变换的基准点,这旋转这个例子中也就是说绕着哪个点旋转。
 
X,Y可以是具体的值,也可以是百分比,也可以是top center bottom left right这样的参数。在未设置的情况下,默认为元素的几何中心。
 
 
 
translate移动:
 
黑框中有一绿色方块
 
 
 
移动:
 
#demo{
        width: 100px;
        height:100px;
        background-color: seagreen;
        -webkit-transform:translate(150px,0)
      }
效果:
 
 
 
还可以写成translateX(x) translateY(y),表示只横向或纵向移动,括号里仅有一个参数。
 
 
 
scale缩放:
 
写法:scale(X,Y),其中X,Y表示横、纵向缩放倍数,基值为1。若大于1表示放大,小于1表示缩小,如scale(0.8,2.5)表示横向缩小到0.8倍,纵向放大到2.5倍。
 
与translate类似,缩放也可以单方向:scaleX(x)&scaleY(y)。
 
 
 
skew扭曲:
 
写法:skew(X,Y),X表示水平方向扭曲角度,Y表示垂直方向扭曲角度。如:skew(30deg,10deg)。同上,单方向扭曲:skewX(x)&skewY(y)。
 
 #demo{
            width: 100px;
            height:100px;
            background-color: seagreen;
            -webkit-transform:skewX(30deg);
        }
 
 
这种东西怎么能用在网页上呢?看的博主心理都扭曲了。
Tag:
网友评论

<