ピックアップ記事

はじめての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. 整骨院のはがき作成

    整骨院GWの販促はがきの作成

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

    小顔矯正

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

    自賠責保険について。

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

    事故患者様の対応

人気記事

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

PV解析

  • 88現在の記事:
  • 92693総閲覧数:
  • 45今日の閲覧数:
  • 70昨日の閲覧数:
  • 498先週の閲覧数:
  • 2450月別閲覧数:
  • 62583総訪問者数:
  • 44今日の訪問者数:
  • 65昨日の訪問者数:
  • 448先週の訪問者数:
  • 1342月別訪問者数:
  • 58一日あたりの訪問者数:
  • 0現在オンライン中の人数:
  • 2013年9月21日カウント開始日:
PAGE TOP