CSS3 例: スワップの実装 anime_html/css_WEB-ITnose

CSS3 アニメーションの登場は非常にシンプルなのでとても気に入っています。今日は、笑顔が遠くからゆっくりと元の位置に戻るエフェクトである、この種のアニメーションを実装します。これも JS では非常に一般的です

まず、HTML 構造、固定ウィンドウ、そして黒い背景のスマイリーフェイスを設計する必要があります

コード名

<div><span>☺</span></div>

スマイリーを中央に配置するために最新のレイアウト フレックスを使用します。 face 、これも非常に便利な属性です。理解できない場合は、

div{

width: 200px;

を参照してください。

高さ: 200px;

カラー: #fff;

ボーダー: #eee 2pxソリッド;

}

div >スパン{

幅: 100%;

高さ: 100%;

位置: 相対;

background-color: #000;

display: flex;

justify-content: center;

align-items: center;

font-size: 80px;

animation: anims 1sイーズイン;

}

次に、位置の変更、要素のスケーリング状態の変更、および透明度の変更であるアニメーションを追加します。

コード名

@keyframes anims {

0% {

右: 0px;

上: 0 ;

変換: スケール(0);

不透明度: 0.2;

}

50%{

上: 0;

右: -300px;

変身: スケール(0.5);

不透明度: 0.6;

}

90%{

上: 0;

右: -10px;

transform: スケール(0.99);

不透明度: 0.9;

}

100%{

top: 0;

right:0px;

transform:scale(1);

opacity: 1;

}

}

このようにして、効果を実現しますもちろん、単独で表示されるダイナミックな効果が必要です。自分で設定することもできます。

OK、これはスワップ アニメーション効果です。

この記事は Wu Tongwei のブログ、

WeChat 公開アカウント: bianchengderen に属します。 , QQグループ：186659233原文、転載の際は出典を明記してください対応リンク：http://www.wutongwei.com/front/infor_showone.tweb?id=185, 皆様拡散・シェア大歓迎です。