ピックアップ記事

はじめてのhtml5 css3

ドットマリオ

ドットマリオ

おはようございます、中村です

久々に、クライアントさんのワードプレスをテーマから作ってたものを、

編集してキレイになってきているところです!(´・ω・`)

実は今日も朝、五時半から目が覚めて、、無駄にネットサーフィンしたりと、

ちょっと時間を無駄遣いしてしまいました。ガーン

で、やはり最近思うのは、「疑うな、信じるな、確かめろ」

コレ大事だと思います。新聞やニュースはあまりみないようにしています、

なぜかというと必要最低限の会話が成り立つぐらいの幅ひろい知識は必要ですが、

そのあたりは情報過多な時代、自分で必要な栄養を選ぶのと同じように、必要な情報を選ぶようにしていかなければダメな気がします。

なんか結局、生き物としての普遍的な大原則の中で生きているのは間違いないものなので、

いつかは死ぬであろうし、自然界でも、市場と同じで変化できなければ淘汰されるわけですし、

どう考えても自然には勝てないわけで、、、あとは自分の宇宙の解釈が存在するだけ。

という感じですかね。つまり、のるかそるかは結局のところ、どんなにうまいこといっても、

運なんですよ、そこに生まれた境遇、人と出会うタイミング、何かを行動し起こること。

これって、現在進行形で未来ができているので結局、運と行動意思なんですよ。

※効率的だったり、加速がどうのは別として。

未来を自分の思い描いていることすら、自分の限界であって、

自分の思い込みにしか、すぎないわけなわけです。笑

だって、なにも知らない先住民という人たちが、高層ビルなんてもの想像できないでしょ。

せいぜい、村の村長になって、レンガの家を建てたい。ぐらいのものだと思います。

まず、知らないわけなんで、ということは、行動意思すら、自分自身の思い込みになってくるわけなのです。

つまり今自分が選択したことは自分が選んだようで、限られた中で選んでいるという事実ですね。笑

なので、自分の体験以上のこと、見て感じたこと以上のことは想像も選択もできないということですね。

ちょっとでも、社員や家族に視野が広がり、選択の幅が広がるような体験をさせてあげたいですね(´・ω・`)

ということで。

まずはシンガポール目指します!!笑

それではWEBやっていきます。

トランディションのその他のプロパティです。

transition-propertyとtransition-duration 勉強をしました。

property でどうするか書いて transfrom で

duration で変化の秒数を書き加えます。

で、:hover でtransfrom 変化内容

translate(正右負逆px or %、正下負逆px or %) skew(ほにゃららdeg)

で記述していきます。

とまあ、いわいる復習ですね、

で、

transition-delay で、開始を遅らせるようにできるプロパティです!!

例えば、マウスを上にもってきてら次、二秒後なら、

2s ミリ秒後なら 2ms

こんな感じになりますね。

で次は流れる速さです。

ここまでついてこれてますか?

transition-duration で期間

発動タイミングを遅らせるのが transition-delay

です。どちらとも上記の s or ms

 

 

始めから終わりまでの時間は transition-duration で区切ります。

その時間内での加速や減速を

transition-timing-function プロパティでします。

functionはphpでもおなじみですね!!笑 和訳だと機能と読みたいですが、、、笑

初期値は ease です。

transition-timing-function で指定できる要素

 

  • ease 加速してゆっくりして終わる
  • ease-in ゆっくりと始まり 一定速度で終わります
  • ease-out 一定速度で始まり ゆっくりと終わる
  • ease-in-out ゆっくりと終わり ゆっくりと終わります
  • liner 最初から最後まで一定の速度で変化します

 

こんな感じですね、それではデモっていきます。

<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=”ドットマリオ” id=”dodmario2″> </div>

CSSは、

#dodmario2 { transition-property: transform; transition-duration: 2s; transition-timing-function: ease-in-out;}

#dodmario2:hover{ transform: translateX(300px); }

 

 

ドットマリオ

 

どうですか?できていますか?笑

この記事を書くにあたって色々なCSS3の記事みましたが、

私なんかひよっこでした!!笑

もっと勉強して頑張りたいと思います!!

次回は今度こそ、アニメーションをしたいと思います。笑

それではサランヘヨ!!

この記事を書いた人

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

この投稿者の最近の記事

関連記事

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

    事故患者様の対応

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

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

    体温上昇・免疫力アップ

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

    皆様、よいお年を!!

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

    訪問鍼灸・マッサージ

  6. 高松 骨盤 ゆがみ,チェック 骨盤 ゆがみ,骨盤 ゆがみ ストレッチ,骨盤 ゆがみ 矯正,骨盤ゆがみ解消,骨盤ゆがみ原因 骨盤のゆがみ,骨盤 ゆがみ 症状 骨盤,ゆがみ 直す,骨盤のゆがみチェック 骨盤 ゆがみ,腰痛 骨盤 ゆがみ,治す 骨盤 ゆがみ 矯正 ストレッチ 骨盤 ゆがみ ダイエット 骨盤ゆがみ 治し方 骨盤のゆがみを治す 骨盤のゆがみ 矯正 骨盤のゆがみを治す方法 骨盤 ゆがみ 改善 骨盤 ゆがみ 痛み 骨盤のゆがみを直す 骨盤のゆがみ 原因 骨盤のゆがみ 体操 骨盤 ゆがみ 肩こり 骨盤 ゆがみ 妊娠 骨盤 ゆがみ 矯正 体操 腰痛 骨盤 ゆがみ 産後の骨盤矯正 産後 骨盤矯正 骨盤矯正 産後 産後 骨盤矯正 体操 産後 骨盤矯正 方法 産後の骨盤矯正はいつから 産後ダイエット 骨盤矯正 産後 骨盤矯正 エクササイズ 産後 骨盤矯正 ダイエット 産後 骨盤矯正 保険 産後 矯正 骨盤 産後 矯正 産後 骨盤矯正 ブログ 産後骨盤矯正料金 産後 骨盤矯正 必要 骨盤矯正 産後 方法 骨盤矯正 効果 産後骨盤矯正効果 骨盤矯正ダイエット効果 骨盤矯正の効果 産後の骨盤矯正 効果 骨盤調整 効果 骨盤矯正 産後 効果 骨盤矯正 カイロプラクティック 効果 ダイエット 骨盤矯正 効果 骨盤 効果 骨盤エクササイズ 効果 骨盤矯正 効果的 骨盤 歪み 治す 骨盤の歪み 骨盤 歪み 骨盤の歪みを治す 骨盤 歪み ストレッチ 骨盤の歪みを治す方法 骨盤歪み治す方法 産後 骨盤 歪み 骨盤の歪み 治す 骨盤 歪み 体操 骨盤歪み 病院 骨盤の歪みを直す 骨盤歪み改善 骨盤歪み 影響 骨盤の歪み 治す方法 骨盤 歪み 身長 骨盤の歪み 影響

    骨盤がゆがむと太りやすい理由

  7. ワードプレス

    初ワードプレスでのブログ、これからたくさん発信していきます!!

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

    ありす鍼灸整骨院 健康体操

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

    自賠責保険について。

人気記事

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

PV解析

  • 91現在の記事:
  • 99271総閲覧数:
  • 22今日の閲覧数:
  • 62昨日の閲覧数:
  • 430先週の閲覧数:
  • 1357月別閲覧数:
  • 68133総訪問者数:
  • 22今日の訪問者数:
  • 62昨日の訪問者数:
  • 428先週の訪問者数:
  • 1223月別訪問者数:
  • 58一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP