前端動畫相關筆記

1.四個屬性

（1）transition-property：規定設定過渡效果的css屬性的名稱。

（2）transition-duration：定義過渡效果花費的時間。預設是 0。

（3）transition-timing-function：規定過渡效果的時間曲線。預設是 「ease」。

（4）transition-delay： 規定過渡效果何時開始。預設是 0。

2.例項

lang

="en"
>
>
charset
="utf-8"
>
name
="viewport"
content
="width=device-width, initial-scale=1.0"
>
>
documenttitle
>
>
.box1
.box1:hover
style
>
head
>
>
class
="box1"
>
div>
body
>
html
>

>

>
>
*body
.sun
@keyframes runto}
style
>
head
>
>
class
="sun"
>
div>
body
>
html
>

animation-fill-mode: forwards;  //動畫停在終點

（1）translate()方法（移動）

translate(50px,100px);  //把元素從左側移動50畫素，從頂端移動100畫素

rotate(30deg);  //把元素順時針旋轉30度

scale(2,4);  //把寬度轉換為原始尺寸的2倍，把高度轉換為原來尺寸的4倍

skew(30deg,20deg);  //圍繞 x 軸把元素翻轉 30 度，圍繞 y 軸翻轉 20 度

transform: rotatex(-30deg) rotatey(30deg);

transform-origin:0% 0%;    //中心點在元素的最左上角

（1）perspective：視距

（2）transform-style：preserve 子元素保留其3d位置

（3）perspective-origin

（4）backface-visibility: visible|hidden; 背面是可見的|背面是不可見的

4.讓元素旋轉的例項

元素旋轉跟原點（transform-origin）有關。

.bigbox

@keyframes run 
to}

前端架構相關筆記

1 簡單少重用的前端模板可以配合underscore的模板引擎用script 注 解決語法和jsp衝突的問題 可以用轉義 也可以 templatesettings g 2 驗證外掛程式，jqueryvalidate支援控制項元素自定義屬性驗證，支援metadata 中文參考 使用 擴充套件 參考 m...

前端模擬排序動畫

第一種實現方式預覽 第二種實現方式預覽 第三種實現方式預覽 第四種實現方式預覽 贊一下攜程的這道題目，這才是前端該做的題目，既有意思，又考察了排序演算法，還考察了部分動畫及 dom 操作。話不多說，分析一下這道題目。用定時器的方式觸發動畫 我這裡是通過改 marginleft 屬性，然後設定 tra...

前端學習之路 jQuery動畫

動畫顯示 divpop show speed divpop toggle speed 切換彈出層的顯示狀態 單擊空白區域隱藏彈出層 document click function event 單擊彈出層則自身隱藏 divpop click function event jquery 的動畫函式主要分...