下記の丸のアニメーションのような物をjQueryで表現するには、どうすればよいでしょうか?


http://www.carlosousa.net/

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2013/07/11 03:40:24
  • 終了:2013/07/12 16:58:55

ベストアンサー

id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932013/07/11 22:26:57

ポイント100pt

そのサイトはcss3でやってます。

.skills ul li .icon:hover {
    border: medium none;
    box-shadow: 0 0 0 100px #FFD2B0 inset;
    top: -10px;
}
.skills ul li .icon {
    animation: 5s linear 0s normal none infinite iconColor;
    animation-play-state: running;
    border: 10px solid #2AD2B0;
    border-radius: 130px 130px 130px 130px;
    height: 150px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    top: 0;
    transition: all 0.2s ease 0s;
    width: 150px;
}

このへん。

参考

その他の回答(1件)

id:dawakaki No.1

だわかき回答回数797ベストアンサー獲得回数1222013/07/11 12:46:09

jQueryは不要です。
HTMLだけで記述できます。

下記サイトをご覧下さい。
http://homepage1.nifty.com/silabel/net/gazo_mouse.html

id:makocan


これはただのオンマウスイベントの説明ではないでしょうか?
該当のアニメーションの参考になるものはどこにありますでしょうか?

2013/07/11 15:40:59
id:makocan

要するにURLにあるドーナッツ型の円のアニメーションを表現したいのです。

2013/07/11 16:36:38
id:Cherenkov No.2

Cherenkov回答回数1503ベストアンサー獲得回数4932013/07/11 22:26:57ここでベストアンサー

ポイント100pt

そのサイトはcss3でやってます。

.skills ul li .icon:hover {
    border: medium none;
    box-shadow: 0 0 0 100px #FFD2B0 inset;
    top: -10px;
}
.skills ul li .icon {
    animation: 5s linear 0s normal none infinite iconColor;
    animation-play-state: running;
    border: 10px solid #2AD2B0;
    border-radius: 130px 130px 130px 130px;
    height: 150px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    top: 0;
    transition: all 0.2s ease 0s;
    width: 150px;
}

このへん。

参考

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません