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

2016年12月23日 星期五

CSS: transform: 2D變形效果


CSS: transform: 2D變形效果
CSS的互動變化能力,愈來愈強。就技術面而言,要學的固來很多,但更重要的核心問在於:這 些技術要如何來使用,可以讓對文本的理解,表現出數位文本的對 話性意義給出特色。(mouseover)



教學影音  click!!


寫作物件的「旋轉」

CSS範例: transform: rotate();

<style>
div.trarota161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}

div.trarota161223:hover  {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
}
</style>







寫作物件的「縮放」

CSS範例: scale() /scaleX()/ scaleY();

<style>
div.trasca161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
margin: auto;
background-color: lightgray;
}

div.trasca161223:hover  {
-webkit-transform: scale(0.5, 2);
-moz-transform: scale(0.5, 2);
-0-transform: scale(0.5, 2);
-ms-transform: scale(0.5, 2);
transform: scale(0.5, 2);
}
</style>






寫作物件的「移動」

CSS範例: translate() /translateX()/ translateY();

<style>
.div16122301 {
border: 1px solid darkred;
}

div.tratral161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;

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

div.div16122301:hover >div.tratral161223  {
-webkit-transform: translate(200px, 20px);
-moz-transform: translate(200px, 20px);
-0-transform: translate(200px, 20px);
-ms-transform: translate(200px, 20px);
transform: translate(200px, 20px);
}
</style>






教 學影音  click!!



寫作物件的「傾斜」

CSS範例: skew()/ skewX()/ skewY();

<style>
.div16122302 {
border: 1px solid darkred;
}

div.traskew161223 {
border: 1px solid darkorange;
width: 100px;
height: 100px;
background-color: lightgray;

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

div.div16122302:hover >div.traskew161223  {
-webkit-transform: skewX(30deg);
-moz-transform: skewX(30deg);
-0-transform: skewX(30deg);
-ms-transform: skewX(30deg);
transform: skewX(30deg);
}
</style>




說明:
指定x軸,x不動,效果:
y軸往x軸方向以逆時方向傾斜30度的形狀。
指定y軸,y不動,效果:
x軸往Y軸方向以順時方向傾斜30度的形狀。



寫作物件的transform的「原點轉移」

CSS範例: transform-origin: x% y%;

<style>
.div16122303 {
border: 1px solid darkred;
text-align: center;
}

div.div16122303 >img {
margin: 0px;
padding: 0px;
border: none;

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

div.div16122303:hover > img:nth-of-type(2)  {
-webkit-transform: rotate(10deg);
-moz-transform: rotate(10deg);
-0-transform: rotate(10deg);
-ms-transform: rotate(10deg);
transform: rotate(10deg);
transform-origin: 0% 100%;
}
</style>


 

說明:
x軸:left / 0%, center /50%, right /100%;
Y軸: top /0%, center /50%,  bottom / 100%;






使用click的 方法


如果想要:click一下,物件可以移動,而不是使用hover功能。這 樣的互動模態之文本形式,可以使用jQuery程式來達成。
我們可以看到簡單的運用jQuery的toggleClass(),再配合使用css trnsition以及transform之語法,就可以創造補間形式的動態效果。
這一作用更直覺,更適合一般人的直覺寫作思考。



CSS:

<style>
.clicsstt170101 {
-webkit-transition: 1s linear;
-moz-transition: 1s linear;
-o-transition: 1s linear;
-ms-transition: 1s linear;
transition: 1s linear;
cursor: pointer;
}

.clicsstt170101add01 {
transform: translate(-350px, -140px);
}
</style>


jQuery: click

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>


$(this).toggleClass('clicsstt170101add01');


教學影音  click!!





2016年12月20日 星期二

動畫的使用與設計 CSS: @keyframes


動畫的使用與設計
CSS: @keyframes
教學影音  click!!





自動啟動的動畫效果

<style>

div.imagkey1220 {
color: gray;
-webkit-animation: myanim16122001 5s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122001 {
0%  {padding-left: 0px;}
50% {padding-left: 220px;}
100% {padding-left: 500px;}
}

img.keyrota {
-webkit-animation: myanim16122002 3s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122002 {
0%  {-webkit-transform: rotate(-0deg);}
30% {-webkit-transform: rotate(-15deg);}
50% {-webkit-transform: rotate(-45deg);}
80% {-webkit-transform: rotate(-90eg);}
100% {-webkit-transform: rotate(-60deg);}
}

</style>








滑鼠移入啟動移出停止的效果

<style>

div.imagkey1220b {
color: gray;
-webkit-animation: myanim16122001 5s infinite;
animation-timing-function: linear;
animation-play-state: paused;
}

@-webkit-keyframes myanim16122001 {
0%  {padding-left: 0px;}
50% {padding-left: 220px;}
100% {padding-left: 500px;}
}

div.imagkey1220b:hover {
animation-play-state: running;
}

img.keyrota {
-webkit-animation: myanim16122002 3s infinite;
animation-timing-function: linear;
}

@-webkit-keyframes myanim16122002 {
0%  {-webkit-transform: rotate(-0deg);}
30% {-webkit-transform: rotate(-15deg);}
50% {-webkit-transform: rotate(-45deg);}
80% {-webkit-transform: rotate(-90eg);}
100% {-webkit-transform: rotate(-60deg);}
}

</style>




教學影音  click!!



補充資料css:上面會自動移動的play icon


.teamov16122601 {
background-image: url(圖像網址);
background-repeat: no-repeat;
background-size: 24px;
background-position: left center;
padding-left: 30px;
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: bold;
line-height: 1.8em;
letter-spacing: 0.1em;
cursor: pointer;
}

.teamov16122601:hover {
-webkit-animation: myanim16122601 0.5s infinite;
animation-timing-function: linear;

}

@-webkit-keyframes myanim16122601 {
0%  {background-position: left center;}
100% {background-position: left 2px center;}
}



參考圖像