請問這裡的高手們 (自定側欄欄位) - 部落格

※ 引述《laukevin (沒回水球麻煩寄信給我^^)》之銘言：
: 小弟友一個問題想請教
: 如果我在痞客幫的部落格
: 在側欄的地方 我有新增自訂側欄
: 我查原始碼 我的自訂側欄是"box1661320"
: 我想用css呈現一個效果
: 我只想出現圖片(xxxxxx) 然後點選圖片會有連結
: 請問應該怎麼做
: 小弟在網路上做的功課 是有人說在自訂欄位的內容打上
: <a href="打上連結網址"><img src='上傳空間取得的圖片網址"></a>
: 但是小弟可能比較貪心 想要有一種漸變效果
: 就是ccs的 transition 以下有教學者的說明
: http://fundesigner.net/css-transition/
: 問題結論:
: 看起來漸變效果是要用css來編
: 所以自訂欄未出現圖片連結用設定內容來寫好像兩個錯開 對我來說已經混淆
: 而如果是用css在自訂欄位區寫圖片連結
: 第一小弟有點不知道該怎麼寫 好像分 li a 和 li a hover
: 而且也不知該該寫在text或是title
: 圖片設定是200px 50px
: 高手們啊 小弟已經搞了三天估狗好幾次
: 就這裡最後希望能有人幫幫我 感謝啦

看你的問題，也許可以認為是想要讓圖片緩緩出現，然後有連結

首先，圖片嵌連結只能在HTML完成，CSS這東西只是增加樣式，無關網頁內容

所以在側欄中填上你上面打的形式就對了


另外，漸變效果因為沒有用偽類，直接用transition應該是沒效果的

這時候應該配合keyframe用animation

如果只是要在載入網頁時讓圖片慢慢出來，可以用下面的CSS語法

#box1661320 .box-text img{
-moz-animation-name:fadeIn;
-moz-animation-duration:0.7s;
-moz-animation-timing-function:ease-in;
-webkit-animation-name:fadeIn;
-webkit-animation-duration:0.7s;
-webkit-animation-timing-function:ease-in;
-o-animation-name:fadeIn;
-o-animation-duration:0.7s;
-o-animation-timing-function:ease-in;
animation-name:fadeIn;
animation-duration:0.7s;
animation-timing-function:ease-in;
}

@-moz-keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-webkit-keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}
@-o-keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}
@keyframes fadeIn
{
0% { opacity: 0; }
100% { opacity: 1; }
}

要改漸變時間的話，變更animation-duration的值就行了

如果不符合你要的效果，請指正


--
予豈好辯哉？予不得已也。

--