トップ・ページの表示 注意書きの表示 掲示板に書き込む前に必ず この ”注意書き”を お読み下さい.

"Twilight"

Index Menu
(1)<FirstTitle>:JavaFXデモ/Sceneの遷移 <FirstUser>:amanojaku@管理人 (1)<FirstTitle>:Javaデモ/うるう年 <FirstUser>:amanojaku@管理人

   
   

ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:











<Number>: [00000133]  <Date>: 2021/07/07 17:46:14
<Title>: CSSデモ/「transform、transition」(2)
<Name>: amanojaku@管理人



灰色の部分にマウスカーソルを乗せると表示が変化する。

下記は実際のページです。

http://xd305417.html.xdomain.jp/demo/Transition068.htm


<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style>
  .Transition003 {
    position: absolute;
    box-sizing: border-box;
    margin: 0px;
    width: -0px;
    height: -0px;
    background: #0f0;
    transition: none 1s ease 0s;
    transition-property: width, height;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .Container003:hover .Transition003 {
    width: 300px;
    height: 300px;
  }

  .Container003 {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 300px;
    height: 300px;
    background: #ccc;
  }
</style>

<body>
  <div class="Container003">
    <div class="Transition003"></div>
  </div>
</body>

</html>


<Number>: [00000134]  <Date>: 2021/06/27 19:21:49
<Title>: CSSデモ/「transform、transition」(3)
<Name>: amanojaku@管理人



<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<style>
  .Transition001 {
    transition-property: width, height;
    transition-duration: 1s;
    transition-timing-function: ease;
    transition-delay: 0s;
  }

  .Border002 {
    border: thin solid #000;
  }

  .Transition003 {
    position: absolute;
    box-sizing: border-box;
    margin: 0px;
    width: -0px;
    height: -0px;
    background: #0f0;
    transition: none 1s ease 0s;
    transition-property: width, height;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }

  .Container003:hover .Transition003 {
    width: 100px;
    height: 100px;
  }

  .Container003 {
    position: relative;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    width: 100px;
    height: 100px;
    background: #ccc;
  }

  .TransitionImg003 {
    display: block;
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div class="Container003">
    <div class="Transition003">
      <img class="TransitionImg003" src="hoge.jpg">
    </div>
  </div>
</body>

</html>

Block( Address 00000160 Identity 00000132 )










ページの表示順:{ 新しい順/ 古い順}.
初期・ページの表示・位置:{ 先頭ページ/ 末尾ページ}.
1ページ内のスレッド表示数:

   
   

管理者用 Password:

  




SMT Version 8.022(+A) Release M6.
Author : amanojaku.