前幾天逛到暗殺教室動畫官網
指要把滑鼠移到暗殺老師頭，旁邊就會跑出說話框
然而還可以貼其靠左置中
而且持續拉螢幕一直放大，中間圖片背景還是不變(置中)
正常div置中都是用
1
2
|
width:50%;
margin:0px auto;
|
不過
完完全全不知道是怎麼做到了
想了很久其實很簡單
1
2
|
background-repeat: no-repeat;
background-position: center top;
|
當出碰CSS沒有印象有background-position這個東西
接下來，說話框他貼齊的方法是用table
1
2
3
4
5
6
7
8
|
.fukidashi table {
height: 305px;
width: 225px;
}
.fukidashi td {
text-align: left;
vertical-align: middle;
}
|
再好幾年前看到網頁設計要避免使用table
不過這個方法還滿簡單對齊
置於動態效果是用
1
2
3
4
5
6
|
$("#fukidashi").hover(function(){
$(".fukidashi img").stop().animate({"width":"215px","height":"305px"},100);
},
function(){
$(".fukidashi img").stop().animate({"width":"1px","height":"1px"},200);
});
|
沒想到JQuery的animate function可以做出此特效
最後手動實例一下吧
實例成果
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script data-require="jquery@2.1.1" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="script.js"></script>
<link href="style.css" rel="stylesheet" />
</head>
<body>
<h1>天線寶寶說你好</h1>
<div class="wrap">
<div class="main">
<div class="image"></div>
<div class="word">
<table><tr><td>
你好
</td></tr>
</table>
</div>
</div>
</div>
</body>
</html>
|
1
2
3
4
5
6
7
8
9
|
// Code goes here
$(document).ready(function(e) {
$("div.image").hover(function(){
$(".word").stop().animate({"font-size":"50px"},100);
},
function(){
$(".word").stop().animate({"font-size":"1px"},200);
});
});
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
div.image {
position:absolute;
top:300px;
left:300px;
background-image: url('data:image/png;base64,....);
width: 189px;
height: 240px;
}
div.wrap {
height:600px;
background-repeat: no-repeat;
background-position: center top;
background-image: url('data:image/png;base64,...);
}
div.word table{
width:100%;
height:100%;
}
div.word{
position:absolute;
width:200px;
height:100px;
top:200px;
left:290px;
font-size:1px;
}
div.word td{
text-align:center;
vertical-align:bottom;
}
div.main{
position:relative;
height: 600px;
}
|
最後做這個範例也花了我不少時間
由於Easy GO裡的GIMP和Krita都不太會使用… 耗了我滿久的時間(本人美功也很爛)
然後欄的用說話框，就改成字體放大
這個實例可能有點弱。哈。
