CSS アニメーションの例: まだスロー * styleeffect_html/css_WEB-ITnose

投げる * エフェクトはゲームでよく使用され、H5 ページエフェクトにも対応するエフェクトがあります

まずレイアウトを作成しましょう。エフェクトは次のとおりです。

コードも同様です。非常に簡単です:

HTML

 <div class="outer_box">    <div class="inner_box"></div> </div>

.outer_box {     width: 200px;    height: 200px;    border: #bbb 5px solid;    margin: 200px auto;}.inner_box {    background-color: #44b549;    width: 100%;    height: 100%;}

構造体のコードを書いた後、* をスローする効果を分析しましょう:

まず、あるポイントで * をスローします。ここでは、そのポイントを元の状態として設定します

2 番目のステップは、* を空中で弧を描くように移動することです

最後に、* を投げるという簡単な効果が得られます。コード:

CSS

@keyframes Bomb_right {

0% {

tramsform: 回転(0度);

}

50% {

不透明度: 0.8;

}

100% {

変換: 回転( 0 形式- 原点: 200% 100%;

最終効果:

例が完成しました。 * を左に投げる効果を書いてみることもできます。

この記事は Wu Tongwei のブログに属します。

WeChatパブリックアカウント：bianchengderen、QQグループ：186659233

のオリジナル記事、転載する場合は出典と対応するリンクを明記してください：http://www.wutongwei.com/front/infor_showone.tweb?id=199、どなたでも歓迎です拡散して共有します