*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
布落格寫作
數位影音專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
flickr圖像集

2015年10月23日 星期五

超快速圖文互搭互動:CSS hover



超快速的圖文互搭互動技能:CSS hover


那是一家我常去的
供應德國風味的
餐廳。

油油的香腸,泛著天花板的黃色燈光,
彷若一種暫時的時空置換。

沈思,可以配飯!



影音教學:



<style>
.word2015102301 {
width: 520px;
height: 347px;

font-family: Verdana, '微軟正黑體';
font-size: 1.3em;
font-weight: bold;
line-height: 1.6;
text-align: left;
padding: 0.5em;
letter-spacing: 0.1em;

border-bottom: 1px solid darkorange;
}

</style>


可以產生互動的CSS:

.word2015102301:hover {
background-image: url(照片網址);
background-repeat: no-repeat;
background-size: 520px;

webkit-transition: 1s all linear;
-moz-transition: 1s all linear;
-o-transition: 1s all linear;
-ms-transition: 1s all linear;
transition: 1s all linear;

}

增強功能的CSS:

/* 字體顏色 */
color: white;

/* 邊框 */
border: 1px solid darkorange;

/* 圓角框 */
border-radius: 25px;

/* 旋轉 */
-webkit-transform: rotate(-2deg);








2 則留言:

  1. 這個很漂亮,但沒有教學影片,不知道怎麼用出來的,是貼在body之後嗎?

    回覆刪除