コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > jsチュートリアル > CSS3変形とアニメーション効果_フォーム特殊効果

CSS3変形とアニメーション効果_フォーム特殊効果

WBOY
リリース： 2016-05-16 15:49:20
オリジナル
1880 人が閲覧しました

以下では、CSS3 の変形とアニメーション効果を画像とテキストで示します

CSS3 アニメーションのいくつかのプロパティ: 変換、トランジション、アニメーション。

以下に紹介: 移行。

1. 例

まず、例を通してトランジションのアニメーション効果を理解しましょう。

マウスをその上に置くと、div の幅が 100px から 200px に増加します。 

<style type="text/css"> 
div{  
width: 100px; 
height: 100px;  
background-color: red; 
} 
div:hover{ 
width: 200px; 
}</style><div></div>
ログイン後にコピー

このエフェクトは実際にはアニメーションですが、変化が非常に早く、滑らかではありません。

マウスを置いてから 5 秒以内に div 幅を 200px にスムーズに移行したい場合。コードを 1 行追加するだけです

コードをコピーします コードは次のとおりです:

div:hover{
幅: 200px; トランジション:幅 5 秒イーズイン;}

このエフェクトは実際にはアニメーションですが、変化が非常に早く、滑らかではありません。

マウスを置いた後 5 秒以内に div 幅を 200px にスムーズに移行したい場合。コードを 1 行追加するだけです

コードをコピーします コードは次のとおりです:
div:hover{
幅: 200px; トランジション:幅 5 秒イーズイン;}


ここで使用されるのはトランジション属性です。これは、属性値のスムーズな遷移を実現し、視覚的なアニメーション効果を生成するために使用されます。

上記で使用されているtransitionは略語であり、transition-property、transition-duration、transition-timing-function、transition-layの4つの属性が含まれており、以下で1つずつ紹介します。

2. 遷移

CSS3 では新しいトランジション属性が追加されており、イベントによってトリガーされる要素のスタイルが変更されたときの効果をより繊細かつスムーズにすることができます。

transition

は、CSS 属性値を一定期間内に 1 つの値から別の値にスムーズに遷移させる方法を記述するために使用されます。このトランジション効果は、マウスのクリック、フォーカスの取得、のクリック、または 要素への変更によってトリガーできます。 構文: 

transition ：
[<'transition-property'> || <'transition-duration'> || <'transition-timing-function'> ||
<'transition-delay'> [, [<'transition-property'> || <'transition-duration'> || 
<'transition-timing-function'> || <'transition-delay'>]]*
ログイン後にコピー
トランジションには 4 つの属性値があります:

transition-property: トランジションを実行するプロパティ。

transition-duration: 移行が完了するまでに必要な時間を指定します。

Transition-timing-function: 継続期間中に、遷移変換の速度が変化することを簡単に理解すると、遷移関数を指定します。

transition-lay: 遷移遅延時間。

1. 遷移プロパティ

Transition-property は、トランジション アニメーション効果を使用するプロパティを指定するために使用されます。

構文:

コードをコピーします コードは次のとおりです:
遷移プロパティ: なし | [ ] [ ','


none: すべての属性にトランジション効果は適用されません。

すべて

: デフォルト値。値が all の場合、要素のいずれかの属性値が変化したときにトランジション効果が実行されます。 ident: 要素の属性名。 ident を通じて特定の属性を指定します。指定された複数の属性の 1 つにトランジション効果を適用できない場合でも、他の属性が有効になります。

トランジション アトリビュートは、

中間値

(アニメートする必要があるアトリビュート) を持つ場合にのみトランジション エフェクトを持つことができます。トランジション効果を実現できるすべての CSS 属性値と値の型は、w3c にリストされています。 

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
ログイン後にコピー
注

: ページの適応幅など、すべての属性変更がトランジション アニメーション効果をトリガーするわけではありません。ブラウザーが幅を変更しても、トランジション効果はトリガーされません。ただし、上の表に示されている属性タイプを変更すると、トランジション アクション効果がトリガーされます。 例: 高さと行の高さのアニメーション効果を同時に設定するなど、複数の属性を同時にアニメーション化して、div が高くなり、テキストが垂直方向の中央に配置されるようにすることができます。 

<!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>
ログイン後にコピー

2. 移行期間

Transition-duration は、古い属性から新しい属性に遷移するのに必要な時間、つまり継続時間を設定するために使用されます。

3. 遷移タイミング関数

構文:

コードをコピー コードは次のとおりです:

= 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>
ログイン後にコピー

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]
ログイン後にコピー

四、其他相关资料

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>
ログイン後にコピー

 

希望这些内容可以帮助到大家，谢谢。

関連ラベル：
css3アニメーション
ソース：php.cn
前の記事：メッセージと返信ページのスタイルの HTML5 実装_基礎知識 次の記事：javascript_javascript スキルでコントロール層を表示または非表示にする方法
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
最新の問題
書き換えられたタイトル: サイズ変更時に固定 HTML の正方形または円要素を水平方向および垂直方向に中央揃えにします。 水平方向と垂直方向にさまざまなサイズの正方形または円の固定 HTML 要素を中央に配置するにはどうすればよいですか?この難しさは、幅と高さを等しく保つ必要があるという事実から生じる...
から 2024-04-04 12:31:51
0
1
322
関連トピック
詳細>
人気のおすすめ
人気のチュートリアル
詳細>
関連するチュートリアル
人気のおすすめ
最新のコース
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート