數位時代的寫作,是一種新形態的文本表達模式!
首頁
初學者技能教案專區
google Meet遠距上課技能
javascript互動文本寫作
融媒體Wix教學
網路新聞寫作:HTML&CSS
新聞影音剪輯:premiere
匯流寫作基模知識:gravit
基礎影音編輯:shotcut
基礎向量圖像編輯:inkscape
基礎圖像編輯:GIMP
排版設計scribus
匯流新聞專題寫作
影音新聞製作與剪輯(上課用)
新聞直播編導/OBS(上課用)
基礎新聞攝影(上課用)
數位排版/敘事(上課用)
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
品嚐《華嚴經》
Unsplash圖像集
Pexels 圖像集
我的給大學生書單
傳播理論/研究

2017年1月14日 星期六

滑鼠移入後,小圖變大圖



滑鼠移入後,小圖變大圖
CSS綜合練習:float; overflow; transform; animation





mouseover the picture to expand!

滑鼠移入圖放大
CSS的互動變化能力,可以使得一些複雜的變化形式,變得容易被思考出來。
這裡我強 調思考形式!
互動文本的思考形式作用於互動變化,在於創造互動閱讀狀況下,對文本理解可能的新解讀廣度。這種互 動解讀特色在於空間的變化,所產生的意義解 讀的全新解讀可 能性。但這種全新的寫作模式,寫作狀態,寫作思考,是以前的寫作經驗所沒有的,需要有著全新的學習過程,以及對之的全新想像。




CSS語法:

<style>
.div0001 {
overflow: hidden;
float: left;
margin-right: 20px;
margin-bottom: 12px;
}

.div0001 >img {
width: 1024px;
transform: translate(-270px, -330px);
}

.div0001:hover {
overflow:visible;
}

.div0001:hover >img {
transform: translate(0px, 0px);
width: 576px;
opacity: 0;
-webkit-animation: myanim16122001 1s 1;
animation-timing-function: linear;
animation-fill-mode: forwards;
}

@-webkit-keyframes myanim16122001 {
0% {opacity: 0;}
5% {opacity: 0;}
100% {opacity: 1;}
}

/* 中標 */
.midtitle17011401 {
font-family: Verdana, '微軟正黑體';
font-size: 1.37em;
font-weight: bold;
line-height: 1.6;
letter-spacing: 0.1em;
text-align: center;
margin-bottom: 0.5em;
}

/* 基本黑體內文 */
.ironcontent17011401 {
font-family: Verdana, '微軟正黑體';
font-size: 1.17em;
font-weight: normal;
line-height: 1.87;
text-align: left;
letter-spacing: 0.08em;
}

</style>




1 則留言:

  1. 有一个Lightbox的JS很好用,想分享给您看看:
    https://mrju.cn/js-demo/zoomimg/

    回覆刪除