Home > Design > CSS3でサクッとできるオープニングアニメーションエフェクト3つ
Home > Html & Css > CSS3でサクッとできるオープニングアニメーションエフェクト3つ

CSS3でサクッとできるオープニングアニメーションエフェクト3つ

公開日:

最終更新日:

ネオンのオープニングアニメーション

簡単に出来るオープニングアニメーションをまとめてみました。
基本CSSだけで出来るものです。
SVGとか使うともっとリッチになりますけど、今回はもっとサクッと

ちなみにですが、変更される際のご参考に

bgAnimeは@keyframeで作ったアニメーションの名前
次の1sはアニメーションの秒数
次のlinearはアニメーションの動き
次の1.8sは1.8秒後からアニメーションするって事で
最後forwardsがアニメーションの最後の状態を維持です。

ネオンが点灯する

ネオンがチカチカとして付きます。
ネオンの揺らめきも起こってます
お好きな背景でbarのサイトとかにロゴ的に置いとくと面白いかも

Demo

デモはこちら

Html

bgが背景のレンガで、bg2が明るさを調整するレイヤーです。

css

@keyframes neonAnime1で色を指定してます。
colorが文字色でdrop-shadowがボワッと広がる色をrgbaで書いています。
@keyframes neonAnime2は揺らめきです。rgbaの透過度や大きさを変えると感じが変わります。
neonAnime1とbgAnimeは点滅と光なので、%とanimationの秒数は合わせてください(bgFlaとneon1の前)

マスクが取れていくの

文字のマスクが取れて行って、取れたらちょっと動いて消えるってやつです。
説明が難しい。。。とにかく見てください。

Demo

デモはこちら

html

css

.text:afterで文字にマスクを被せて、textAnime1でずらして表示してます。
ずらし切った後に、textAnime2にrotate(-10deg)を掛けて回転させてます。
回転さしたら、bgAnimeでフェードアウトさせて消してます。

文字が躍って消える

フェードインした文字が一文字ずつ上下に踊ってからフェードアウトです。

Demo

デモはこちら

html

一文字ずつ踊らせる為に、1文字1文字spanで囲んでいます。

css

textAnime1でフェードインさせて、.text span:nth-child(左から何番目の文字)でtextAnime2を付けて踊らせてます。
bgAnimeは先ほどと同じでフェードアウトです。

サクッとできるのです。SVGとかグラデーションとか使うとネオンとかも、もっと綺麗に出来ると思います。

Comment

よろしければコメントをどうぞ