Kazuma Labolatory's

Nothing is Impossible. ✿

Menu

【CSS】影で遊んでみた - Part2

- box-shadow:

- transition:

- animation:

- transform:

 

練習してみました。

 2Dでリアルに見えるように~ε==└(└  ⸝⸝⸝›ω‹)┘?

 

 

   -大きさ変化 ➜ transform:scale(x,y)

   -影 ➜ box-shadow:

を使用しています

 

 

 

1-1.シンプル

- transition: -

 

 

 

 

 

1-2.シンプル+

- transition: --ease --

 

 

 

 

 

2.transition: + animation:

 

 

 

3. transition:  -- ease --  ( box-shadow凝り.ver )

 

 

影の変化はanimation: --- @keyframes{}   で設定すると良い感じになる気がします。

また、「戻る時の影」はtransition: の方がよく、大きさ変化も、@keyframesを設定しない時の方がスムーズな気がします。(ブラウザによるとは思いますが。また、僕のコードが問題ありなのかもしれません( ¯∀¯٥)w )

 

ということで、結局transition: に落ち着きましたw

 

- 3. transition -- ease --

.div3 {
    margin:auto;
    width: 200px;
    height: 200px;
    background: deepskyblue;
    -webkit-transition: transform .4s ease, box-shadow .4s ease;
    transition: transform .4s ease, box-shadow .4s ease; }
.div3:hover {
    -webkit-transform:scale(1.1,1.1);
    transform:scale(1.1,1.1);
    box-shadow:6px 14px 7px rgba(0,0,0,0.4),12px 20px 16px rgba(0,0,0,0.3); }

 

後、一応 2. @keyframes の値も、載せておきます?

時間設定を5秒くらいにして、スローモーションで確認もしたので、影の変化はそこそこのクオリティが出ているかと自分ではおもとります~(´つヮ⊂)✨♪w

 

 

- 2.animation -- @keyframes --

@keyframes shadow {
   5%{box-shadow:2px 4px 1px rgba(0,0,0,0.7); }
   10%{box-shadow:4px 8px 1px rgba(0,0,0,0.7); }
   15%{box-shadow:6px 14px 5px rgba(0,0,0,0.5); }
   100%{box-shadow:12px 20px 16px rgba(0,0,0,0.3); } 
   }

 

 

 

中々の影具合にできた気がします( ・ㅂ・)و ̑̑✨♪

 

このブログで使用している 影のホバー エフェクト はW3Schoolsさんの値を使わせていただいているのですが、僕はW3Sさんの影のホバーエフェクトも、コードがシンプルなが効果がリアルで好きです(∩´ㅂ`∩).*・゚

 

 

 

 

timing function の分かりやすい比較デモ

 

Animation speed- w3schools - 

[場所 ] --- ページ中下 / 『Specify the Speed Curve of the Animation』

http://www.w3schools.com/css/css3_animations.asp ---

 

 

This Blog uses M+ Font, Logo Type Gothic, Google Fonts and FontAwesome. It"s free & Designed cool font. Greatful for Koji Morishita of M+ Fonts Designer( Creator) and "フォントな" , Google, Adobe, and Dave Gandy!
Background Photos is downloaded by Unsplash.com. Thanks!
|*´-`)チラッ
Please Click Me
本ブログ全てにおいて、アフィリエイトプログラムには参加しておりません(•ᵕᴗᵕ•) 詳しくはこちらをご覧下さい。また、 以下のバナーは、私が「質が高い・あら素敵(ˊo̶̶̷ᴗo̶̶̷`)✨」と感じたサイト様を掲載させて頂いておます_(( _๑´ω`))_⭐️