ピックアップ記事

はじめてのhtml5 CSS3

ドットマリオ

ドットマリオ

 

皆様おはようございます、

中村です。

最近、店舗の模様替えとアンケートからの組織の変化のスピードが早くて、かなり嬉しいことです。

来年のもう一店舗と、将来的な増えるであろう店舗、

楽しみですね。

まずは、介護と、来年に向けてもう一店舗鍼灸整骨院を国分寺あたりでだします。

これは確定ですね。

でかい会社にするため、OtoOの意識を高めていきたいと思います。

それでは今回はトランディション一括指定です。

transition: プロパティ デュレーション;

といった感じで値がでます。

<div style=”background:url(http://aliceplanblog.com/wp-content/uploads/2014/08/landscape_a02.png); background-size: cover; width: 600px; height:300px;”><img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/mario.gif” alt=”ドットマリオ” id=”dodmario3″></div>

 

#dodmario3

{

transition: transform 3s liner;

}

#transition3:hover

{

transform: translateX(400) scale(0.1)

}

 

こんな感じでデモってみます!!ヽ(´▽`)/

 

 

ドットマリオ

 

 

どうですか??

マリオが右にはしっていってますね!!笑

アニメーション関連プロパティ

CSSのアニメーションは簡単に言えばトランディションを連続で実行させているようなものなのです。

アニメーション全体の時間中のどの地点でどのプロパティがどの状態になるのかを

@keyframes ほにゃらら {

0% {

プロパティ: 値;

}

実数% {

プロパティ: 値;

}

100% {

プロパティ: 値;

}

}

 

では解説していきますヽ(´▽`)/

初めに

@keyframes と書き、半角スペースをつけて、名前をつけます。

14年3月の時点では、ベンダープレフィックスをかいておくべきです。

対応していないブラウザがあるみたいですので、確認してみてくださいね!!ヽ(;▽;)ノ

それではデモしてみますね!!

 

<div style=”width: 600px; height: 300px; background:url(http://aliceplanblog.com/wp-content/uploads/2014/08/landscape_a02.png); background-size: cover;”><img src=”http://aliceplanblog.com/wp-content/uploads/2014/08/mario.gif” alt=”ドットマリオ” -webkit-animation: dod1 0.5s infinite ease-out alternate,dod2 infinite liner alternate;>

これわ画像に対して、animation: 名前 時間 どのような速さで 再生,名前 時間 どのような感じで 交互;

と書かれてますね。

しかも、コンマで複合アニメーションができます。

 

@keyframes dod1 {

0% { top:50px; }
100% { top:0px; }}

@keyframes dod2{

0% { left:0px; }
100% { left:500px; }

}

 

ではデモってます。

 

ドットマリオ

 

 

できていると、動きがでます!!

どうですか??

アニメーションっておもしろいですね!!

というか、単語覚えるのが、、今更ですが、大変です!!

それでは、今日も肌寒いですが、頑張っていきましょう!!

have a nice day!!

 

この記事を書いた人

中村 真徳
中村 真徳
(株)アリスプラン 代表取締社長
サービスITソリューションで関わる人を幸せに
平成5年4月1日 髙松市より香川町剛柔流空手道スポーツ少年団 発足
平成22年11月 個人事業主開業
平成24年8月  株式会社アリスプラン 代表取締役
会社理念「サービスITソリューションで関わる人を幸せに」
道徳と利潤の調和を目指し日々奮闘中
趣味…自分がしたいことをするのが趣味です

この投稿者の最近の記事

関連記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    介護予防体操

  2. 今までの晩御飯(゚∀゚)③

  3. 超音波

    超音波の効能

  4. 花粉

    花粉症

  5. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    急な手首の痛み

  6. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    熱中症処置

  7. jくえり

    WEBデザイナーのための簡単なJQ

  8. ありす, 整骨院, 求人, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院

    自賠責、慰謝料算定

  9. インソールによる足の変化

人気記事

  1. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  2. 予防体操 チラシ
  3. 整骨院, 求人, 治療, 高松 事故通院, 高松 整骨院, 高松市 ムチウチ, 高松市 整骨院
  4. 高松市 猫背

PV解析

  • 416現在の記事:
  • 103591総閲覧数:
  • 210今日の閲覧数:
  • 100昨日の閲覧数:
  • 930先週の閲覧数:
  • 1608月別閲覧数:
  • 71844総訪問者数:
  • 107今日の訪問者数:
  • 99昨日の訪問者数:
  • 602先週の訪問者数:
  • 1244月別訪問者数:
  • 71一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP