您现在的位置是:首页 > 前端学习 > Web前端Web前端

动画和渐变(第十七章)(图文)

第十三双眼睛2020-03-14【Web前端】人已围观

简介在网页设计中,适当的使用动画和渐变,可以把网页设计的更加生动和友好,在传统的设计中,会借助Flash或者javascrip实现动画,借助图片实现渐变,而CSS仅仅是静态的表现元素的效果,不过,CSS3将改变我们的思维方式,因动画和渐变也可以直接用CSS来实现了,这些革命性的改变,使得CSS具有更加强大的可能性
本章知识点如下:
1CSS3变形基础
2CSS3过度效果
3CSS3动画效果
4CSS3变形设计

元素的变形-transform属性
CSS3新增的transform属性,可用于元素的变形,实现元素的旋转,缩放,移动,倾斜等变形效果,基于webkit的替代属性是-webkit-transform,基于gecko内核的替代属性是-moz-transform,基于presto的替代属性是-o-transform,ie浏览器的替代属性是-ms-transform,语法如下:
transform:none    transform-functions
none:默认值,不设置元素变形。
transform-functions:设置一个或者多个变形函数,变形函数包括rotate(),缩放scale,移动translate,倾斜skew,矩阵变形hatrix等,设置多个变形函数时,用空格间隔,元素在变形过程中,仅显示效果变形,实际尺寸并不会改变,所以元素变形后,可能会超出原有的限定边界,但不会影响自身尺寸及其他元素的布局。

旋转
rotate函数用于定义元素在二维空间的旋转,函数的使用语法如下:
rotate(angle)
参数说明:angle表示旋转的角度,为带有角度单位标识符的数值,角度单位是deg,值为正时,表示顺时针旋转,值为负时,表示逆时针旋转。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>旋转元素</title>
        <style type="text/css">
            ul{
                margin-top: 30px;
                list-style-type: none;
                line-height: 25px;
                font-family: arial;
                font-weight: bold;
            }
            li{
                width: 120px;
                float: left;
                margin: 2px;
                border: 1px solid #ccc;
                background-color: #e4e4e4;
                text-align: left;
            }
            li:hover{
                background-color: #999;
            }
            a{
                display: block;
                padding: 5px 10px;
                color: #333;
                text-decoration: none;
            }
            a:hover{
                background-color: #f90;
                color: #fff;
                -webkit-transform: rotate(20deg);
                -moz-transform: rotate(30deg);
                -ms-transform:rotate(30deg);
                transform: rotate(30deg);
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
        </ul>
    </body>
</html>


效果如下图所示:

缩放和翻转
scale()函数用于定义元素在二维空间的缩放和翻转,语法如下:
scale(x,y)
x,表示元素在水平方向上的缩放倍数
y,表示元素在垂直方向上的缩放倍数
x,y的值可以为整数,负数,小数,当取值的绝对值大于1时,表示放大,绝对值小于1时,表示缩小,当取值为负数时,元素会被翻转,如果y值省略,说明垂直方向上的缩放倍数和水平方向上的缩放倍数相同。
a:hover{
                background-color: #f90;
                color: #fff;
                -webkit-transform: scale(1.5);
                -moz-transform: scale(1.5);
                -ms-transform:scale(1.5);
                transform: scale(1.5);
}

效果如下图所示:

移动
translate()函数用于定义元素在二维空间上的偏移,语法如下:
translate:x,y
x表示元素在水平方向上的偏移距离
y表示元素在垂直方向上的偏移距离
x,y的值为带有长度单位标识符的数值,可以为负值和带小数的值,若取值大于0,则表示向右或向下偏移,若取值小于0,则表示向左或者向上偏移,如果dy值省略,则说明垂直方向上的偏移距离默认为0.
a:hover{
                background-color: #f90;
                color: #fff;
                -webkit-transform: translate(10px,5px);
                -moz-transform: translate(10px,5px);
                -ms-transform:translate(10px,5px);
                transform: translate(10px,5px);
}

效果如下图所示:

倾斜
skew():用于定义元素在二维空间的倾斜变形,语法如下:
skew(anglex,angley)
anglex:表示元素在x轴上的倾斜角度
angley:表示元素在y轴上的倾斜角度
angelx,angely的值为带有角度单位标识符的数值,角度单位时deg,值为正时,标识顺时针旋转,值为负时,标识逆时针旋转,如果angely的值省略,则说明垂直方向上的倾斜角度默认为0deg
a:hover{
                background-color: #f90;
                color: #fff;
                -webkit-transform:skew(-30deg);
                -moz-transform: skew(-30deg);
                -ms-transform:skew(-30deg);
                transform: skew(-30deg);
}

效果如下图所示:

矩阵变形
matrix函数用于定义元素在二维空间的矩阵变形,语法如下:
matrix(m11,m12,m21,m22,x,y)
该函数中的6个值均为可计算的值,组成一个变形矩阵,与当前元素旧的参数组成的矩阵进行乘法运算,形成新的矩阵,元素的参数被改变。该变形矩阵的形式如下:
m11    m21   x
m12    m22   y
0         0        1
关于详细的矩阵变形原理,需要掌握矩阵的相关知识。
a:hover{
                background-color: #f90;
                color: #fff;
                -webkit-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
                -moz-transform: matrix(0.866,0.5,0.5,-0.866,10,10);
                -ms-transform:matrix(0.866,0.5,0.5,-0.866,10,10);
                transform: matrix(0.866,0.5,0.5,-0.866,10,10);
}

效果如下图所示:

同时使用多个变形函数
矩阵变形固然灵活,但是不直观,也不容易理解,transform属性允许同时使用多个变形函数,这使得元素变形可以更加灵活。
a:hover{
                background-color: #f90;
                color: #fff;
                -webkit-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
                -moz-transform: translate(10px,10px) rotate(30deg) scale(1,-1);
                -ms-transform:translate(10px,10px) rotate(30deg) scale(1,-1);
                transform: translate(10px,10px) rotate(30deg) scale(1,-1);
}

效果如下图所示:

定义变形原点transform-origin属性
变形属性默认的变形原点时元素对象的中心点,CSS3提供的transform-origin属性,可用于指定这个原点的位置,这个位置可以是元素对象的中心点以外的任意位置,进一步增加了变形的灵活性。
语法如下:
transform-origin:x-axis  y-axis
取值说明:x-axis定义变形原点的横坐标位置,默认值为50%,取值包括left,centere,right,百分比,长度值。
y-axis:定义变形原点的纵坐标位置,默认值为50%,取值包括top,middle,bottom,百分比值,长度值。
其中,百分比是相对于元素对象的宽和高而言的,而该坐标的计算,是以元素的左上角为坐标为原点进行计算的。基于webkit内核的替代属性是-webkit-transform-origin,基于gecko内核的替代属性是-moz-transform-origin,基于presto内核的替代属性是-o-transform-origin属性,ie9浏览器的替代属性是-ms-transform-origin。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>多种变形的元素</title>
        <style type="text/css">
            ul{
                margin-top: 30px;
                list-style-type: none;
                line-height: 25px;
                font-family: arial;
                font-weight: bold;
            }
            li{
                width: 120px;
                float: left;
                margin: 2px;
                border: 1px solid #ccc;
                background-color: #e4e4e4;
                text-align: left;
            }
            li:hover{
                background-color: #999;
            }
            a{
                display: block;
                padding: 5px 10px;
                color: #333;
                text-decoration: none;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                -ms-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
            }
            a:hover{
                background-color: #f90;
                color: #fff;
                -webkit-transform: rotate(30deg);
                -moz-transform: rotate(30deg);
                -ms-transform: rotate(30deg);
                transform: rotate(30deg);
            }
        </style>
    </head>
    <body>
        <ul>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
        </ul>
    </body>
</html>


效果如下图所示:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>图片画廊</title>
        <style type="text/css">
            body{
                background:url(img/bark.jpg);
            }
            #gallery{
                margin: 10px auto;
                padding: 40px;
                list-style: none;
                width: 530px;
            }
            #gallery li{
                float: left;
                width: 106px;
                height: 80px;
                overflow: visible;
            }
            #gallery li a{
                color: #333333;
                text-decoration: none;
                font-size: 4px;
                display: block;
                text-align: center;
                background-color: #FFFFFF;
                padding: 3px;
                opacity: 0.8;
                box-shadow: 0 0 5px 2px #333;
            }
            #gallery li a {
                -webkit-transition: all 500ms linear;
                -moz-transition: all 500ms linear;
                transition: all 500ms linear;
                -webkit-transform-origin: 0 0;
                -moz-transform-origin: 0 0;
                transform-origin: 0 0;
                -webkit-transform: rotate(-15deg);
                -moz-transform: rotate(-15deg);
                transform: rotate(-15deg);
            }
            #gallery li a img{
                width: 100px;
            }
            #gallery li:nth-child(3n) a{
                -webkit-transform: rotate(20deg);
                -moz-transform: rotate(20deg);
                transform: rotate(20deg);
            }
            #gallery li:nth-child(4n) a{
                -webkit-transform: rotate(15deg);
                -moz-transform: rotate(15deg);
                transform: rotate(15deg);
            }
            #gallery li:nth-child(7n) a{
                -webkit-transform: rotate(-10deg);
                -moz-transform: rotate(-10deg);
                transform: rotate(-10deg);
            }
            #gallery li:nth-child(0n) a{
                -webkit-transform: rotate(-20deg);
                -moz-transform: rotate(-20deg);
                transform: rotate(-20deg);
            }
            #gallery li a:hover{
                position: relative;
                z-index: 999;
                opacity: 1;
                -webkit-transform: rotate(0deg) scale(2);
                -moz-transform: rotate(0deg) scale(2);
                transform: rotate(0deg) scale(2);
            }
            #gallery  li a:hover:after{
                content:attr(title);
            }
        </style>
    </head>
    <body>
        <ul id="gallery">
            <li><a href="#" title="图片1"><img src="img/1.jpg" alt="图片1"/></a></li>
            <li><a href="#" title="图片2"><img src="img/2.jpg" alt="图片2"/></a></li>
            <li><a href="#" title="图片3"><img src="img/3.jpg" alt="图片3"/></a></li>
            <li><a href="#" title="图片4"><img src="img/4.jpg" alt="图片4"/></a></li>
            <li><a href="#" title="图片5"><img src="img/5.jpg" alt="图片5"/></a></li>
            <li><a href="#" title="图片6"><img src="img/6.jpg" alt="图片6"/></a></li>
            <li><a href="#" title="图片7"><img src="img/7.jpg" alt="图片7"/></a></li>
            <li><a href="#" title="图片8"><img src="img/8.jpg" alt="图片8"/></a></li>
            <li><a href="#" title="图片9"><img src="img/9.jpg" alt="图片9"/></a></li>
            <li><a href="#" title="图片10"><img src="img/10.jpg" alt="图片10"/></a></li>
            <li><a href="#" title="图片11"><img src="img/11.jpg" alt="图片11"/></a></li>
            <li><a href="#" title="图片12"><img src="img/12.jpg" alt="图片12"/></a></li>
            <li><a href="#" title="图片13"><img src="img/13.jpg" alt="图片13"/></a></li>
            <li><a href="#" title="图片14"><img src="img/14.jpg" alt="图片14"/></a></li>
            <li><a href="#" title="图片15"><img src="img/15.jpg" alt="图片15"/></a></li>
        </ul>
    </body>
</html>


效果如下图所示:

CSS3的过渡效果
在CSS3中,transform属性所实现的元素变形,仅仅呈现的是变形结果,CSS3的过渡效果,可以让元素变形看起来更加平滑
CSS3新增的transition属性可以显示元素变换过程中的过渡效果,即实现了基本的动画,与元素变形属性一起使用,可以展现元素的变形过程,丰富动画的效果。
语法如下:
transition:   transiton-property    transition-duration    transition-timing-function   transition-delay
取值说明:
transition-property:定义用于过渡的属性
transition-duration:定义过渡过程需要的时间
transition-timing-function:定义过渡方式
transition-delay:定义开始过渡的延迟时间
transition属性定义一组过渡效果,需要上面4个方面的参数,transition属性可以同时定义两组或者两组以上的过渡效果,每组用逗号隔开。基于webkit内核的替代属性是-webkit-transition,基于gecko内核的替代属性是-moz-transition,基于presto内核的替代属性是-o-transiton
例子
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>过渡效果</title>
        <style type="text/css">
            div{
                margin: 100px auto;
                width: 200px;
                height: 100px;
                background-color: #00f;
                -webkit-transition: all 1000ms linear 500ms;
                -moz-transition: all 1000ms linear 500ms;
                transition: all 1000ms linear 500ms; 
            }
            div:hover{
                background-color: #FF9900;
                -webkit-transform: rotate(240deg);
                -moz-transform: rotate(240deg);
                transform: rotate(240deg);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>


指定过渡的属性-transition-property属性,语法如下:
transition-property:none all property
取值说明:none表示没有任何CSS属性有过渡效果
all:默认值,表示所有的CSS属性都有过渡效果
property:指定一个用逗号分隔的多个属性,针对指定的这些属性有过渡效果。
div{
                margin: 100px auto;
                width: 200px;
                height: 100px;
                background-color: #00f;
                -webkit-transition-property: -webkit-transform;
                -moz-transition-property: -moz-transform;
                transition-property: transform;
                -webkit-transition-duration:1s ;
                -moz-transition-duration: 1s;
                transition-duration: inherit;s
}

指定过渡的时间-transition-duration属性
transition-duration属性用于定义过渡过程中需要的时间,语法如下:
transition-duration:time
取值说明:time指定一个用逗号分隔开的多个时间值,时间的单位可以是s,或者ms,默认情况下为0.即看不到过渡效果,看到的直接是结果。
例子:
-webkit-transition-property: background-color,-webkit-transform;
-moz-transition-property: background-color,-moz-transform;
transition-property: background-color,transform;
-webkit-transition-duration: 4s 1s;
-moz-transition-duration: 4s 1s;
transition-duration: 4s 1s;

指定过渡延迟时间-transiton-delay
语法如下:
transition-delay:time
取值说明,time指定一个用逗号分隔开的多个时间值,单位可以是秒也可以是毫秒。默认情况下为0,即没有延迟。
div{
                margin: 100px auto;
                width: 200px;
                height: 100px;
                background-color: #00f;
                -webkit-transition-property: all;
                -moz-transition-property: all;
                transition-property: all;
                -webkit-transition-duration: 500ms;
                -moz-transition-duration: 500ms;
                transition-duration: 500ms;
                -webkit-transition-delay: 500ms;
                -moz-transition-delay: 500ms;
                transition-delay: 500ms;
            }

指定过渡方式-transition-timing-function属性
transition-timing-function子属性用于定义过渡曲线的速度曲线,即过渡方式,语法如下:
transition-timing-function:ease  linear  ease-in    ease-out   ease-in-out  cubic-bezier(n,n,n,n)
取值说明:
linear:表示过渡的速度一直是一个速度,相当于cubic-bezier(0,0,1,1);
ease:默认的属性值,表示过渡的速度先慢,再快,最后非常慢,相当于cubic-bezier(0.25,0.1,0.25,1)
ease-in:表示过渡的速度先慢,后越来越快,直至结束,相当于cubic-bezier(0.42,0,1,1);
ease-out:表示过渡的速度先快,后越来越慢,直至结束,相当于cubic-bezier(0.42,0,0.58,1);
ease-in-out:表示过渡的速度再开始和结束都很慢,相当于cubic-bezier(0.42,0,0.58,1);
cubic-beaier(n,n,n,n):字定义贝塞尔曲线,其中的四个参数,为从0到1的数字。
div{
                margin: 100px auto;
                width: 200px;
                height: 100px;
                background-color: #00f;
                -webkit-transition-property: all;
                -moz-transition-property: all;
                transition-property: all;
                -webkit-transition-duration: 1000ms;
                -moz-transition-duration: 1000ms;
                transition-duration: 1000ms;
                -webkit-transition-timing-function: ease-out;
                -moz-transition-function: ease-out;
                transition-function: ease-out;
}

案例:制作滑动菜单
菜单是网页的重要组成部分,设计一个良好的菜单是很有比要的,下面我们就用CSS3的过渡效果,来实现一个滑动效果的菜单
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>滑动的菜单</title>
        <style type="text/css">
            .box{
                margin: 0;
                padding: 0;
                font-size: 12px;
                list-style: none;
                width: 120px;
                float: left;
            }
            li{
                width: 80px;
                line-height: 20px;
                height: 20px;
                margin: 1px;
                background-color: #CCCCCC;
                text-align: left;
                border-radius: 0 10px 10px 0;
                border-left: 3px solid #333333;
                -webkit-transition: all 1s ease-out;
                -moz-transition: all 1s ease-out;
                transition: all 1s ease-out;
            }
            li a{
                display: block;
                text-decoration: none;
                font-size: 12px;
                padding-left: 5px;
                font-family: arial;
                font-weight: bold;
                color: #666;
            }
            li:hover{
                background-color: #FF9900;
                width: 100px;
                -webkit-transition: all 200ms linear;
                -moz-transition: all 200ms linear;
                transition: all 200ms linear;
            }
            li:hover a{
                color: #FFFFFF;
            }
        </style>
    </head>
    <body>
        <ul class="box">
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
        </ul>
        <ul class="box">
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
        </ul>
        <ul class="box">
            <li><a href="#">HTML5</a></li>
            <li><a href="#">CSS3</a></li>
            <li><a href="#">jQuery</a></li>
            <li><a href="#">Ajax</a></li>
        </ul>
    </body>
</html>


效果如下图所示:

CSS3动画设计
前面讲述的元素变形和动画效果,是制作动画的基础,但还不是真正的动画,本节将学习完整的动画设计,不但可以创建动画关键帧,还可以对关键帧动画设置播放时间,播放次数,播放方向,实现更加复杂,更加灵活的动画
@keyframes属性,语法规则如下:
@keyframes<animationname>{keyframes-selector}{<css-styles>}
animationname:动画的名称,必须定义一个动画名称,方便与动画属性animation绑定
keyframes-selector:动画持续时间的百分比,也可以是from和to,from对应的是0%,to对应的是100%。
css-styles:设置的一个或者多个合法的样式属性,必须定义一些样式,才能实现动画,动画,是通过一种样式变换到另一个种样式来创建的,再指定CSS样式变化时,可以从0%到100%逐步设计样式表的变化
例子:变换位置的小球
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>变换位置的小球</title>
        <style type="text/css">
            div{
                position: absolute;
                -moz-animation: mymove 5s infinite;
                -webkit-animation: mymove 5s infinite;
            }
            @-moz-keyframes mymove{
                0% {top:0px}
                25%{top:200px;left: 10px;}
                75%{top: 50px;left: 10px;}
                100%{top: 100px;left: 60px;}
            }
            @-webkit-keyframes mymove{
                0% {top:0px}
                25%{top:200px;left: 10px;}
                75%{top: 50px;left: 10px;}
                100%{top: 100px;left: 60px;}
            }
        </style>
    </head>
    <body>
        <div>
            <img src="img/22.jpg" width="30" height="30"/>
        </div>
    </body>
</html>


效果如下图所示:

动画的实现animation属性
CSS3提供的animation属性,是专门用于动画设计的,它可以把一个或者多个关键帧动画绑定到元素上,以实现更加复杂的功能。
animation:name  duration  timing-function  delay  iteration-count  direction
取值说明:
name:定义动画的名称,绑定指定的关键帧动画
duration:定义动画播放的周期时间
timing-function:定义动画播放的方式,即速度曲线
delay:定义动画的延迟时间
iteration-count:定义动画播放的次数
direction:定义动画播放的顺序方向
指定动画的名称-animation-name属性
animation-name子属性,用于指定动画的名称,该名称是一个动画关键帧的名称,是由@keyframes规则定义的。语法如下:
animation:keyframes  none
none:默认值,表示没有动画
keyframes:指定动画名称,即指定名称对应的动画关键帧。
如果动画关键帧的名称为none,则不会显示动画,可以同时指定多个动画名称,多个名称间用逗号隔开,如果需要,可以使用none,取消任何动画
指定动画播放时间,animation-duration属性
animation-duration属性,用来指定动画播放的周期时间,语法如下:
animation-duration:time
取值说明:time用于指定播放动画的时间长度,单位为m或者ms,默认为0,表示没有没有动画。
延迟动画播放方式-animation-timing-function属性
用来定义动画的播放方式,语法如下:
animation-timing-function:ease  linear  ease-in   ease-out  ease-in-out  cubic-bezier(n,n,n,n)
指定动画延迟时间animation-delay属性
animation-delay子属性,是用来定义动画播放的延迟时间,它可以定义一个动画延迟一段时间再播放,语法如下:
animation-delay:time
time用于指定动画播放的延迟时间,单位为秒或者毫秒,默认值为0,表示没有时间延迟。。直接播放动画
animation-iteration-count:用来指定动画循环播放的次数,语法如下;
animation-iteration-count:infinite n
infinite:表示无限次的播放下去。
n:该值为数字,表示循环播放的次数,属性值默认为1,表示动画只播放一次。
指定动画的播放方向-animation-direction属性
用来指定动画的播放方向,语法如下:
animation-direction:normal  alternate;
normal:为默认值,表示按照关键帧设定的动画方向播放,
alternate:表示动画的播放方向与上一播放周期相反,第一播放周期还是正常的播放方向。
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>变化的页面元素</title>
        <style type="text/css">
            div{
                position: absolute;
                width: 100px;
                height: 100px;
                top: 50px;
                left: 100px;
                background-color: #F90;
                -moz-animation-name:mymove,myrotate;
                -webkit-animation-name:mymove,myrotate;
                -moz-animation-iteration-count: infinite;
                -webkit-animation-iteration-count: infinite;
                -moz-animation-timing-function: linear;
                -webkit-animation-timing-function: linear;
                -moz-animation-duration: 4s, 3s;
                -webkit-animation-duration: 4s, 3s;
            }
            @-moz-keyframes mymove{
                0% {top: 25px;left: 100px;background-color: #00f;}
                25% {top: 50px;left: 100px;background-color: #00f;}
                75% {top: 75px;left: 100px;background-color: #00f;}
                100% {top: 100px;left: 200px;background-color: #FF9900f;}
            }
            @-webkit-keyframes mymove{
                0% {top: 25px;left: 100px;background-color: #00f;}
                25% {top: 50px;left: 100px;background-color: #00f;}
                75% {top: 75px;left: 100px;background-color: #00f;}
                100% {top: 100px;left: 200px;background-color: #FF9900f;}
            }
            @-moz-keyframes myrotate{
                100% {-moz-transform: rotate(360deg);}
            }
            @-webkit-keyframes myrotate{
                100% {-webkit-transform: rotate(360deg);}
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果如下图所示:

CSS3渐变设计
渐变,是网页设计中使用频率较高的一种效果,它可以让元素看起来更有质感,传统的渐变实现方式是非常依赖图片的,而CSS3能方便地实现元素的渐变,避免了过多使用渐变图片所带来的麻烦,而且再放大网页的情况下一样过渡自然
渐变分为两种,线性渐变和径向渐变。
CSS线性渐变
基于webkit内核的实现
基于webkit内核的语法如下:
-webkit-gradient linear  point  point  from color   to color   color-stop percent  color
linear:表示线性渐变类型
point:定义渐变的起始点和结束点,第一个表示起始点,蝶儿个表示结束点,该坐标的取值,支持数值,百分比,和关键字,如(0.5,0.5),(50%,50%),(left,top),关键字包括定义横坐标的left和right,定义纵坐标的top,bottom.
color:表示任意CSS颜色值
percent:表示百分比值,用于确定起始点和结束点之间的某个位置
from:定义起始点的颜色
to:定义结束点的颜色
color-stop:可选函数,可再渐变中,多次添加过渡颜色,可以实现多种颜色的渐变。
2基于gecko内核的实现,语法如下:
-moz-linear-gradient: point  angel color  color percent color
point:定义渐变的起始点,该坐标的取值支持数值百分比,,关键字。
angel:定义线性渐变的角度,单位可以是deg,grad,rad
color:表示渐变使用的CSS颜色值
percent:表示百分比,用于确定起始点和结束点之间的某个位置
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>线性渐变的背景</title>
        <style type="text/css">
            div{
                width: 400px;
                height: 200px;
                background-color: #FF9900;
                background: -webkit-gradient(linear,left top, left bottom,from(#f90),to(#0f0));
                background:-moz-linear-gradient(left,#f90,#0f0);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

CSS径向渐变
基于webkit内核的实现语法如下:
-webkit-gradient:radial  point  radius  from color  to color  color-stop percent,color
取值说明:
radial:表示径向渐变类型
point:定义渐变的起始圆的圆心坐标和结束圆的圆心坐标,该坐标点的取值,支持数值,百分比,关键字,如(0.5,0.5),(50%,50%),(left,top)
radius:表示圆的半径,定义起始圆的半径和结束圆的半径,
color:表示任意CSS颜色值
percent:表示百分比值,用于定义起始点和结束点之间的某个位置
from 定义起始圆的颜色
to:定义结束圆的颜色
color-stop:可选函数,可再渐变中,多此添加过渡颜色,可以实现多种颜色的渐变
基于gecko内核的实现
-moz-radial-gradient point angle  shape  radius  color  color percent  color
point:定义渐变的起始点,该坐标的取值支持数值,百分比,关键字,
angle:定义径向渐变的角度,单位可以是deg,grad,rad
shape:定义径向渐变的形状,包括circle圆,ellipse椭圆,
radius:定义圆的半径或者椭圆的轴长度
color:表示渐变使用的CSS颜色值
percent:表示百分比值,用于确定起始圆和结束圆之间的某个位置
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>径向渐变的圆</title>
        <style type="text/css">
            div{
                width: 400px;
                height: 200px;
                background-color: #FF9900;
                background:-webkit-gradient(radial,200 100,10,200 100,100,
                from(#FF9900),to(#00FF00),color-stop(50%,blue));
                background:-moz-radial-gradient(200px 100px,circle,#f90 10px,blue,#0f0 100px);
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

效果如下图所示:




 

Tags:HTML   HTML网页

很赞哦! ()

随机图文

文章评论

    共有条评论来说两句吧...

    用户名:

    验证码:

本站推荐

站点信息

  • 网站名称:JavaStudy
  • 建站时间:2019-1-14
  • 网站程序:帝国CMS7.5
  • 文章统计64篇文章
  • 标签管理标签云
  • 统计数据百度统计
  • 微信公众号:扫描二维码,关注我们