ホームページ > 記事 > ウェブフロントエンド > CSSを使用して左右の動きの効果を実現する方法
CSSを使用して左右の動きの効果を実現する方法
- 青灯夜游オリジナル
- 2021-07-14 17:45:143657ブラウズ
CSS では、「@keyframes」ルールとアニメーション属性を使用して、左右のモーション効果を実現できます。主な構文は「@keyframes アニメーション名 {0% {left:0px;}50%{left」です。 :200px;} 100% {left:0px;}}」。
このチュートリアルの動作環境: Windows 7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。
CSS では、「@keyframes」ルールとアニメーション属性を使用して、左右の動きの効果を実現できます。
コード例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
0% {left:0px;}
50%{left:200px;}
100% {left:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>レンダリング:
説明:
@keyframes ルールを使用して、アニメーションを作成できます。アニメーションは、ある CSS スタイル設定から別の CSS スタイル設定に徐々に変更することによって作成されます。
CSS スタイル設定は、アニメーション処理中に何度でも変更できます。
% またはキーワード「from」と「to」(0% ～ 100% と同じ) を使用して、いつ変更が発生するかを指定します。 0% はアニメーションの開始時、100% はアニメーションの終了時です。
構文:
@keyframes animationname {keyframes-selector {css-styles;}}| 値 | 説明 |
|---|---|
| アニメーション名## ＃＃＃＃＃＃＃必須。アニメーションの名前を定義します。アニメーション属性によって定義されます。 | |
| 必須。アニメーション期間のパーセンテージ。 有効な値: | 0-100% から (0% と同じ) to (100% と同じ)
|
| 必須。 1 つ以上の有効な CSS スタイル属性 |
以上がCSSを使用して左右の動きの効果を実現する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。