教程 | 鼠标指向后图片会改变
26 August 2012 @ 10:05 PM


给 Cindy 的教程

转帖请留言和附上链接 ♥




步骤一

Blogger Template : Template - Edit html

Blogskin : Design - Edit html


步骤二

用 ctrl + f 找 :

Blogskin :
</style>

Blogger Template :
]]></b:skin>


步骤三

把代码放在 </style> 或者 ]]></b:skin> 上面 :

img.first { width:95px;height:95px;border: 3px solid #FFFFFF; -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg);}
img.second { width:95px;height:95px; border: 3px solid #FFFFFF; -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg);}


红色的 是图片的宽度 .

蓝色的 是图片的高度 .

备注 : 如果图片是正方形的 , 请把宽度和高度调成一样的 .


黄色的 是框框的粗细度 .

橙色 highlight 的 是框框的种类 .

黄色 highlight 的 是框框的颜色 .

蓝色 highlight 的 是单数图片的旋转度数 .

紫色 highlight 的 是双数图片的旋转度数 .

可从 -360 到 360 度 !


额外的代码 :

框框影子的代码 :
box-shadow:0 0 10px #影子的颜色代码;


步骤四

用 ctrl + f 找 :
</body>


步骤五

把代码放在 </body> 上面 :

<div style="position: fixed; top:40px; left:20px;">

<img class="first" src="图片 1" onmouseover="this.src='鼠标指向后的图片 1'" onmouseout="this.src='图片 1'"/>
<br><br>
<img class="second" src="图片 2" onmouseover="this.src='鼠标指向后的图片 2'" onmouseout="this.src='图片 2'"/>
<br><br>
<img class="first" src="图片 3" onmouseover="this.src='鼠标指向后的图片 3'" onmouseout="this.src='图片 3'"/>
<br><bR>
<img class="second" src="图片 4" onmouseover="this.src='鼠标指向后的图片 4'" onmouseout="this.src='图片 4'"/>
<br><br>
<img class="first" src="图片 5" onmouseover="this.src='鼠标指向后的图片 15'" onmouseout="this.src='图片 5'"/>
</div>



灰色 highlight 的 是图片和部落格顶部的距离 .

粉色的 是图片和左边的距离 .


要添加图片的话 ,

单数图片的代码 :
<img class="first" src="图片 URL" onmouseover="this.src='鼠标指向后的图片 URL'" onmouseout="this.src='图片 URL'"/>
<br><br>

双数图片的代码 :
<img class="second" src="图片 URL" onmouseover="this.src='鼠标指向后的图片 URL'" onmouseout="this.src='图片 URL'"/>
<br><br>




任何疑问请在 tagboard 留言 .

在评论箱留言请告诉我 (:



版权所有 翻印必究. ♥