5.12 練習
練習 1: cubic-bezier
透過這個網站,拉一個效果,如下結果示意。
指定檔名:cubic_bezier.html
提供 html:
<div class="outer_block">
<div class="block">div 區塊</div>
</div>
<button type="button" class="trigger">觸發</button>
提供部份 css:
* {
box-sizing: border-box;
}
body{
margin: 0;
}
div.outer_block{
width: 500px;
height: 100px;
border: 1px solid black;
position: relative;
margin-left: 100px;
margin-top: 100px;
}
div.block{
border: 1px solid blue;
display: inline-block;
width: 100px;
height: 98px;
position: absolute;
left: 0;
top: 0;
}
提供 js:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
// 「觸發」按鈕點擊
$("button.trigger").on("click", function(){
// move 樣式的切換(點擊一次加上 move 樣式,再點擊則移除)
$("div.block").toggleClass("move");
});
});
</script>
結果示意:
參考作法:
練習 2:左右擺動
指定檔名:button_wiggle.html
@keyframes 說明:
其它說明:
動畫效果執行一次( animation-duration
)的時間為 1s
漸變函式( animation-timing-function
)設定為 linear
input.input_text 元素的 position 設定為 relative
提供 html:
<div class="fixed_block">
<input type="text" class="input_text" placeholder="text 欄位">
<br>
<button type="button" class="trigger">資料送出</button>
</div>
提供部份 css:
* {
box-sizing: border-box;
}
body{
margin: 0;
}
div.fixed_block{
position: fixed;
display: inline-block;
border: 1px solid gray;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input.input_text{
border: 1px solid red;
position: relative;
}
提供 js(放在 </body>
結束標籤之前):
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(function(){
// 點擊(click)事件
$("button.trigger").on("click", function(){
// 加上指定的樣式
$("input.input_text").addClass("-wiggle");
// 經過指定毫秒後,移除 -wiggle 樣式
setTimeout(function(){
$("input.input_text").removeClass("-wiggle");
}, 1000); // 單位是毫秒
});
});
</script>
結果示意:
參考作法:
練習 3:Sprite 效果
指定檔名:animation_sprite.html
圖片路徑:
https://alldata.sgp1.digitaloceanspaces.com/images/sprite_img_new.png
說明:
animation-timing-function
使用 steps
函式。
執行方向:做一個寬高都是 170px 的 div,搭配 animation 動畫效果。
提供 html:
<!-- 用 CSS 背景圖 方式來做 -->
<div class="sprite_block"></div>
<!-- 或 用 img 標籤來做 -->
<div class="sprite_block"><img src="https://alldata.sgp1.digitaloceanspaces.com/images/sprite_img_new.png"></div>
結果示意:
參考作法:
背景圖做法:
1、算出每跳一次,要多少百分比 → 25%。
2、steps 要 5 個間隔,就 25% * 5 = 125%。
img 標籤做法: