Ubah bentuk CSS3 dan kesan animasi effect_form kesan khas-tutorial js-php.cn

Berikut akan menunjukkan kepada anda kesan ubah bentuk dan animasi CSS3 melalui gambar dan teks

Beberapa sifat animasi CSS3: transformasi, peralihan dan animasi.

Diperkenalkan di bawah: peralihan.

1. Contoh

Pertama, mari kita fahami kesan animasi peralihan melalui contoh.

Letakkan tetikus padanya dan lebar div akan meningkat daripada 100px kepada 200px.

<style type="text/css"> 
div{  
width: 100px; 
height: 100px;  
background-color: red; 
} 
div:hover{ 
width: 200px; 
}</style><div></div>

Salin selepas log masuk

Kesan ini sebenarnya adalah animasi, tetapi ia berubah dengan cepat dan tidak lancar.

Jika anda mahu lebar div beralih dengan lancar kepada 200px dalam masa 5 saat selepas tetikus diletakkan padanya. Hanya tambah satu baris kod

Salin kod Kod adalah seperti berikut:

div:tuding{ 

lebar: 200px;
peralihan:lebar 5s mudah masuk;}

Kesan ini sebenarnya adalah animasi, tetapi ia berubah dengan cepat dan tidak lancar.

Jika anda mahu lebar div beralih dengan lancar kepada 200px dalam masa 5 saat selepas tetikus diletakkan padanya. Hanya tambah satu baris kod

Salin kod Kod adalah seperti berikut:

div:tuding{ 

lebar: 200px;
peralihan:lebar 5s mudah masuk;}

Apa yang digunakan di sini ialah atribut peralihan, yang digunakan untuk mencapai peralihan nilai atribut yang lancar dan menghasilkan kesan animasi visual.

Peralihan yang digunakan di atas ialah singkatan dan mengandungi empat atribut: sifat peralihan, tempoh peralihan, fungsi pemasaan peralihan dan kelewatan peralihan, yang akan diperkenalkan satu persatu di bawah.

CSS3 menambah atribut peralihan baharu, yang boleh menjadikan kesan lebih halus dan lancar apabila gaya elemen yang dicetuskan peristiwa berubah.

peralihan

digunakan untuk menerangkan cara membuat nilai atribut css peralihan dengan lancar daripada satu nilai ke nilai lain dalam tempoh masa. Kesan peralihan ini boleh dicetuskan oleh

klik tetikus

, mendapatkan fokus, diklik atau sebarang perubahan pada elemen. Sintaks:

Peralihan mempunyai empat nilai atribut:

transition ：
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||
<'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || 
<'transition-timing-function'> || <'transition-delay'>]]*

Salin selepas log masuk

sifat peralihan: Sifat untuk melakukan peralihan.

tempoh peralihan: Tentukan masa yang diperlukan untuk menyelesaikan peralihan.

Fungsi pemasaan peralihan, dalam tempoh tempoh, kadar transformasi peralihan berubah Pemahaman mudah adalah untuk menentukan fungsi peralihan.

tunda peralihan: masa tunda peralihan.

1. harta peralihan

Harta peralihan digunakan untuk menentukan sifat yang menggunakan kesan animasi peralihan. Sintaks:

Salin kod

Kod adalah seperti berikut: sifat peralihan: tiada | semua |. [

tiada: Tiada kesan peralihan digunakan pada semua atribut.

semua

: Nilai lalai. Apabila nilai adalah semua, kesan peralihan akan dilaksanakan apabila sebarang nilai atribut elemen berubah.

ident: nama atribut elemen. Tentukan atribut khusus melalui pengenalan. Jika kesan peralihan tidak boleh digunakan pada salah satu daripada berbilang atribut yang ditentukan, atribut lain masih akan berkuat kuasa.

Atribut peralihan hanya boleh mempunyai kesan peralihan jika ia mempunyai nilai titik tengah

(atribut yang perlu dianimasikan). Semua nilai atribut css dan jenis nilai yang boleh mencapai kesan peralihan disenaraikan dalam w3c

Nota

: Tidak semua perubahan atribut akan mencetuskan kesan animasi peralihan, seperti lebar penyesuaian halaman Apabila penyemak imbas menukar lebar, kesan peralihan tidak akan dicetuskan. Walau bagaimanapun, perubahan dalam jenis atribut yang ditunjukkan dalam jadual di atas akan mencetuskan kesan tindakan peralihan.

Property Name  
Typebackground-color 
as colorbackground-position 
as repeatable list of simple list of length, percentage, or calcborder-bottom-color 
as colorborder-bottom-width 
as lengthborder-left-color 
as colorborder-left-width 
as lengthborder-right-color 
as colorborder-right-width 
as lengthborder-spacing 
as simple list of lengthborder-top-color 
as colorborder-top-width 
as lengthbottom 
as length, percentage, or calcclip 
as rectanglecolor 
as colorfont-size 
as lengthfont-weight 
as font weightheight  
as length, percentage, or calcleft 
as length, percentage, or calcletter-spacing 
as lengthline-height  
as either number or lengthmargin-bottom 
as lengthmargin-left 
as lengthmargin-right 
as lengthmargin-top  
as lengthmax-height  
as length, percentage, or calcmax-width 
as length, percentage, or calcmin-height 
as length, percentage, or calcmin-width 
as length, percentage, or calcopacity 
as numberoutline-color 
as coloroutline-width 
as lengthpadding-bottom 
as lengthpadding-left 
as lengthpadding-right 
as lengthpadding-top 
as lengthright  
as length, percentage, or calctext-indent 
as length, percentage, or calctext-shadow 
as shadow listtop  
as length, percentage, or calcvertical-align  
as lengthvisibility  
as visibilitywidth 
as length, percentage, or calcword-spacing 
as lengthz-index 
as integer

Salin selepas log masuk

Contohnya: Anda boleh menganimasikan beberapa atribut pada masa yang sama, seperti menetapkan kesan animasi untuk ketinggian dan ketinggian garis pada masa yang sama, supaya div menjadi lebih tinggi dan teks masih berpusat menegak.

<!DOCTYPE html><html><head> 
<meta charset="utf-8"> 
<title>变形与动画</title> 
<style type="text/css">div { 
width: 300px; 
height: 200px; 
line-height: 200px; 
text-align: center; 
background-color: orange; 
margin: 20px auto; 
-webkit-transition-property: height line-height; 
transition-property: height line-height; 
-webkit-transition-duration: 1s; 
transition-duration: 1s; 
-webkit-transition-timing-function: ease-out; 
transition-timing-function: ease-out; 
-webkit-transition-delay: .2s; 
transition-delay: .2s;}div:hover { 
height: 100px; 
line-height: 100px;}</style></head><body> 
<div>文字垂直居中</div></body></html>

Salin selepas log masuk

2. tempoh peralihan

Tempoh peralihan digunakan untuk menetapkan masa yang diperlukan untuk beralih daripada atribut lama kepada atribut baharu, iaitu tempoh.

3. fungsi pemasaan peralihan

Sintaks:

Salin kod

Kod adalah seperti berikut:

 = ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps([, [ start | end ] ]?) | cubic-bezier(, , , )

transition-timing-function属性指的是过渡的“缓动函数”。通过这个函数会建立一条加速度曲线，因此在整个transition变化过程中，变化速度可以不断改变。主要包括以下几种函数。

ease:默认值，元素样式从初始状态过渡到终止状态速度由快到慢，逐渐变慢。linear：意思是线性过渡，即过渡过程恒速。ease-in:速度越来越快，呈现加速状态，通常称为“渐显效果”。ease-out:速度越来越慢，呈现减速状态，通常称为“渐隐效果”。ease-in-out速度先加速后减速，称为“渐显渐隐效果”。

举例：鼠标经过问号，帮助信息渐显渐隐。

<!doctype html><html><head> 
<meta charset="utf-8"> 
<title>transition-demo by starof</title> 
<style>#help{ 
width:20px; 
height:20px; 
border-radius:10px; 
color:#fff; 
background:#000; 
text-align:center; 
position:relative; 
margin:50px 20px; 
cursor:pointer;}#help .tips{ 
position:absolute; 
width:300px; 
height:100px; 
background:#000; 
top:-30px; 
left:35px; 
border-radius:10px; 
opacity:0; 
/*渐隐效果*/ 
transition: opacity .8s ease-in-out; 
-moz-transition: opacity .8s ease-in-out; 
-webkit-transition: opacity .8s ease-in-out;}.tips:before{ 
content:""; 
border-width:10px; 
border-style:solid; 
 border-color:transparent #000 transparent transparent; 
 position:absolute; 
 left:-20px; 
 top:30px;}#help:hover .tips{ 
 opacity:0.5; 
 /*渐显效果*/ 
 transition: opacity .8s ease-in-out; 
 -moz-transition: opacity .8s ease-in-out; 
 -webkit-transition: opacity .8s ease-in-out;}</style></head><body> 
 <div id="help">  
 &#63;  
 <div >帮助信息</div> 
</div></body></html>

Salin selepas log masuk

4、transition-delay

transition-delay设置改变属性值后多长时间开始执行动画。

5、属性简写

在改变多个css属性的transition效果时，把几个transition声明用逗号隔开，然后每个属性就都有各自的过渡时间和效果。

Note：第一个时间是时长，第二个是延时。

复制代码代码如下:

a{ 

transition: background 0.8s ease-in 0.3,

color 0.6s ease-out 0.3;}

三、贝塞尔曲线和transition

transition的数学模型就是贝塞尔曲线，下面介绍。

曲线其实就是两点之间插值的效果，贝塞尔曲线是一种插值算法，比线性插值复杂一点。

贝塞尔曲线：起始点，终止点（也称锚点），控制点。通过调整控制点，贝塞尔曲线的形状发生变化。

k阶贝塞尔插值算法需要k+1个控制点。

一阶贝塞尔曲线（线段）：意思就是从P0到P1的连续点，用来描述一段线段。一次贝塞尔插值就是线性插值。

二阶贝塞尔曲线（抛物线）：P0-P1是曲线在P0处的切线。

三阶贝塞尔曲线：

transition用到的就是三阶贝塞尔插值算法,如下图。

时间在0,1区间，待变换属性也认为是0,1区间。P0和P3的坐标一直是（0,0）和（1,1）。transition-timing-function属性用来确定P1和P2的坐标。

ease [0, 0] [0.25, 0.1] [0.25, 1.0] [1.0,1.0]
linear [0, 0] [0.0, 0.0] [1.0, 1.0] [1.0,1.0]
ease-in [0, 0] [0.42, 0] [1.0, 1.0] [1.0,1.0]
ease-out [0, 0] [0, 0] [0.58, 1.0] [1.0,1.0]
ease-in-out [0, 0] [0.42, 0] [0.58, 1.0] [1.0,1.0]
step-start steps(1,start)
step-end steps(1,end)
cubic-bezier(x1,y1,x2,y2) [0, 0] [x1, y1] [x2, y2] [1.0,1.0]

Salin selepas log masuk

四、其他相关资料

canvas画贝塞尔曲线

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>bezier demo</title>
</head>
<body>
<div style="width:800px;height:600px;background-color:#fac0c0;">
<canvas id="cvs" width="800" height="600">骚瑞，您的浏览器不支持canvas</canvas>
</div>
<script type="text/javascript">var cvs=document.getElementById("cvs"),
context=cvs.getContext("2d"),points=[];function getXY(node){var x=0,y=0;if (node.offsetParent)
{while (node.offsetParent)
{x += node.offsetLeft;y += node.offsetTop;node = node.offsetParent;}}
else {node.x && (x += node.x);node.y && (y += node.y);}return [x,y];}
function drawPoint(x,y,c,b) {!b && (b=2);context.fillStyle=c || "red";
context.fillRect(x,y,b,b);}function bezier(points,t){var i,n=points.length-1,x=0,y=0;function fn(p,n,i,t){return arrangement(n,i)*p*Math.pow(1-t,n-i)*Math.pow(t,i);}for(i=0;i<n+1;i++){x+=fn(points[i][0],n,i,t);
y+=fn(points[i][1],n,i,t);}return [x,y];}function factorial(n){if(isNaN(n) || n<=0 || Math.floor(n)!==n){return 1;}var s=1;
while(n){s*=n--;}return s;}function arrangement(n,r){return factorial(n)/(factorial(r)*factorial(n-r));}
cvs.addEventListener("click",function(event){var i,point=getXY(this),x=event.clientX-point[0]+(document.documentElement.scrollLeft || document.body.scrollLeft),y=event.clientY-point[1]+(document.documentElement.scrollTop || document.body.scrollTop);points.push([x,y]);context.clearRect(0,0,screen.width,screen.height);context.beginPath();
//pointsfor(i=0;i<points.length;i++){drawPoint(points[i][0],points[i][1],"blue",4);}//bezierfor (i = 0; i < 1; i += 0.001)
{drawPoint.apply(this, bezier(points,i));}//lineif(points.length==1){context.moveTo(points[0][0],points[0][1]);}else if (points.length>1){for(i=0;i<points.length;i++){context.lineTo(points[i][0],points[i][1]);}
context.lineWidth=0.2;context.stroke();context.closePath();}},true);</script>
</body>
</html>

Salin selepas log masuk