CSS3 渐变、变形、过渡、动画小结

本文主要是介绍CSS3 渐变、变形、过渡、动画小结，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

CSS3 渐变（IE9&-用滤镜filter来兼容）

线性渐变：

linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)

<side-or-corner> = [left | right] || [top | bottom]   八个方向，to bottom是默认值，相当于180deg。

<color-stop> = <color> [ <length> | <percentage> ]?

例：background-image:linear-gradient(to left bottom, red 20%, orange 40%, yellow 85%,green 100%);

      background-image:linear-gradient(-135deg,#ccc, #fcf);

径向渐变：

radial-gradient([ [ <shape> || <size> ] [ at <position> ]? , | at <position>, ]?<color-stop>[ , <color-stop> ]+)

<position> = [ <length> | <percentage> | left | center| right ]? [ <length> | <percentage> | top | center②| bottom ]? 

确定圆心的位置，默认值为center。如果提供2个参数，第一个表示横坐标，第二个表示纵坐标；如果只提供一个，第二值默认为50%，即center.

<shape> = circle |ellipse   圆或椭圆

例：background-image:radial-gradient(circle at 50px top, red 30%, yellow,green, aliceblue);

重复线性渐变repeating-linear-gradient; 重复径向渐变repeating-radial-gradient;

例：background-image:repeating-radial-gradient(circle,red, yellow 10px, green 80px);

 

CSS3 变形transform

1D变形函数：translateX(), translateY(), scaleX(),scaleY(), skewX(), skewY()…

2D变形函数：translate(),scale(),skew(), rotateZ()…

3D变形函数：rotateX(), rotateY(), rotate3d(),translateZ(), translate3d(), scaleZ(), scale3d(), matrix3d(), perspective()…

 

transform：none | <transform-function> [<transform-function>]*

transform-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?   变形中心50% 50%

transform-style：flat | preserve-3d

                            flat: 所有子元素在2D平面呈现；preserve-3D：

perspective：none | <length>  景深，属性要设置在父元素上才有效；越小越靠近，越大趋近于none；

                       vs perspective函数用在变形元素上，可与其他transform函数一起使用；

perspective-origin：[ <percentage> | <length> | left | center① | right ] [ <percentage> | <length> | top | center② | bottom ]?    透视中心50% 50%

backface-visibility：visible | hidden

例：transform: translateX(18px) scaleY(0.8)rotate(18deg) skew(-18deg) //X平移+Y缩放+旋转+倾斜

CSS3 过渡 transition：

·实现属性开始值与结束值之间的平滑过渡；

transition：<single-transition>[,<single-transition>]*

<single-transition> = [ none | <transition-property> ] || <transition-duration> || <transition-timing-function> || <transition-delay>

<' transition-property '>：过渡属性

<' transition-duration '>：过渡持续时间

<' transition-timing-function '>：过渡动画函数

<' transition-delay '>：过渡延迟时间

<transition-timing-function> = ease | linear | ease-in | ease-out |ease-in-out | step-start | step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)

 

linear：线性过渡。等同于贝塞尔曲线(0.0, 0.0, 1.0,1.0)

ease：平滑过渡。等同于贝塞尔曲线(0.25, 0.1,0.25, 1.0)

ease-in：由慢到快。等同于贝塞尔曲线(0.42, 0, 1.0,1.0)

ease-out：由快到慢。等同于贝塞尔曲线(0, 0, 0.58,1.0)

ease-in-out：由慢到快再到慢。等同于贝塞尔曲线(0.42, 0, 0.58,1.0)

step-start：等同于 steps(1,start)

step-end：等同于 steps(1, end)

steps(<integer>[, [ start | end ] ]?)：接受两个参数的步进函数。第一个参数必须为正整数，指定函数的步数。第二个参数取值可以是start或end，指定每一步的值发生变化的时间点。第二个参数是可选的，默认值为end。

cubic-bezier(<number>, <number>, <number>,<number>)：特定的贝塞尔曲线类型，4个数值需在[0, 1]区间内

例： .front{   background-color:#fcf;   border:3px solid grey;   transition:background-color 1.5s ease-in, border-radius 1.5s ease-out, border-color 1.3s linear 0.2s } front:hover{   background-color:#cec;   border-radius:150px;   border-color:transparent; }

  

触发过渡的方式：CSS伪类如：hover、：focus…；媒体查询；JS切换类名…；

解决-webkit-留下痕迹的问题：硬件加速（添加-webkit-transform:translate(0)）;

CSS3 动画animation

·  transition只能指定属性的起止状态；animation通过指定“关键帧”来声明动画；

animation：<single-animation>[,<single-animation>]*

<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function> || <time> || <single-animation-iteration-count> || <single-animation-direction> || <single-animation-fill-mode> || <single-animation-play-state>

<' animation-name '>：动画名称，动画名必须对应一个@keyframes规则；

<' animation-duration '>：动画的持续时间；

<' animation-timing-function '>：动画过渡类型，与transition-timing-function类似；

<' animation-delay '>：动画延迟的时间

<' animation-iteration-count '>=infinite | <number>：对象动画的循环次数。默认值为1；

<' animation-direction '>=normal | reverse | alternate| alternate-reverse

alternate：先正常再反方向，交替运行；alternate-reverse：先反向再正向；

<' animation-fill-mode '>= none | forwards | backwards | both：对象动画时间之外的状态；

<' animation-play-state '>= running | paused：对象动画的状态。

animation实现的近似翻牌效果 <style> .wrap{   perspective:1000px; } .card{   width:250px;   height:350px;   background-image:url(frontface.jpg);   background-size:100% 100%; } .card:hover{   animation: spin 5s linear infinite; } @keyframes spin{   0%{ transform:rotateY(0); }   25%{ background-image: url(frontface.jpg); }   26%{ background-image: url(backface.jpg); }   75%{ background-image: url(backface.jpg); }   76%{ background-image: url(frontface.jpg); }   100%{ transform:rotateY(360deg); } } </style> <div class="wrap">     <div class="card"></div> </div>

/* 部分属性总结自 @飘零雾雨 《CSS参考手册》，灰色底色代表属性的默认值*/

这篇关于CSS3 渐变、变形、过渡、动画小结的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---