ホームページ >毎日のプログラミング >CSSの知識 >CSS3で回転と移動のアニメーション効果を実装する方法
CSS3で回転と移動のアニメーション効果を実装する方法
- 藏色散人オリジナル
- 2018-10-19 15:59:038455ブラウズ
この記事では回転効果を実現するcss3アニメーションを中心に紹介します。
css はカスケード スタイル シートであり、フロントエンドを学習している友人はよく知っているはずです。クールなアニメーション効果を使用すると、Web サイトの外観がより洗練され、コンテンツが充実してユーザーを引き付けることができることを誰もが知っているはずです。
ここで、画像の回転効果を実現する、シンプルで興味深いアニメーション特殊効果を紹介します。
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>css3实现旋转移动动画特效</title>
<head>
<style>
.main{
width: 100px;
height: 50px;
line-height: 50px;
text-align: center;
color: #fff;
border-radius: 20px;
background: red;
position: relative;
top: 30px;
animation: asd 5s;
}
@keyframes asd {
0 %{transform: rotate(0deg);}
25%{transform: rotate(60deg);left: 0px;}
50%{left:500px;}
75%{transform: rotate(-520deg);}
100%{transform: rotate(0deg);left: 0px;}
}
</style>
</head>
<body>
<div class="main">
动画
</div>
</body>
</html>効果は次のとおりです:
##css3 の関連する重要な属性の紹介:
transform 属性は、要素に 2D または 3D 変換を適用することを示します。これにより、要素を回転、拡大縮小、移動、または傾けることができます。
@keyframes ルールを使用すると、アニメーションを作成できます。つまり、ここでの @keyframe はアニメーションを定義するためにのみ使用され、実際の意味はありません。
CSS アニメーションの実装原則は、ある CSS スタイルから別の CSS スタイルに徐々に変換することです。
変更が発生する時刻はパーセンテージ (または「開始」と「終了」) で指定されます。 (0% はアニメーションの開始時間、100% はアニメーションの終了時間です。)
CSS アニメーションの原則をマスターしている限り、純粋な CSS を使用してほとんどのクールな効果を実現するのは非常に簡単です。
この記事は、CSS3 アニメーションで回転と移動の効果を実現するための具体的な方法について説明したもので、困っている友人の役に立てば幸いです。
さらにクールな CSS3、html5、JavaScript 特殊効果コードがすべて含まれています:
フロントエンドについて詳しく知りたい場合は、 、PHP 中国語 Web サイトの
CSS3 ビデオ チュートリアル、CSS ビデオ チュートリアル 、Bootstrap チュートリアル およびその他の関連チュートリアルをフォローできます。ぜひ参照して学習してください。
以上がCSS3で回転と移動のアニメーション効果を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。