|
|
<Number>: [00000133]
<Date>: 2021/07/07 17:46:14
<Title>:
<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>:
<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>
|
|
|
掲示板に書き込む前に必ず この ”注意書き”を お読み下さい．
