HTML學習筆記 cs動畫基礎（分列效果可用於做瀑布流）第十五節（原創）參考使用表

阿新 • • 發佈：2017-09-17

har orm 顏色無限動畫 ext top 效果 rotate

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>動畫、分列、過度</title>
    <link rel="stylesheet" href="tzy.css" type="text/css">
</head>
<body>
<div class="div0">動畫效果</div>
<div class="div1">分列效果
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？

.div0{
    width: 100px;
    height: 100px;
    background-color: forestgreen;
    position: relative;
    -webkit-animation: anima 5s infinite alternate;
    /*animation 動畫效果 infinite無限   alternate交替*/
    -o-animation: anima 5s infinite alternate;
    animation: anima 5s infinite alternate;
}
@keyframes anima 
{
    0%{background: #000;  left: 0px;  top: 0px;}
    25%{background: firebrick;  left: 200px;  top: 0px;}
    50%{background: fuchsia;  left: 200px;  top: 200px;}
    75%{background: cornflowerblue;  left: 0px;  top: 200px;}
    100%{background: #000000;  left: 0px;  top: 0px;}
}
@-webkit-keyframes anima {
    0%{background 
: #000;  left: 0px;  top: 0px;}
    25%{background: firebrick;  left: 200px;  top: 0px;}
    50%{background: fuchsia;  left: 200px;  top: 200px;}
    75%{background: cornflowerblue;  left: 0px;  top: 200px;}
    100%{background: #000000;  left: 0px;  top: 0px;}
}


.div1{
    -webkit-column-count: 4;
    column-count: 4;
    /*分列數量*/
    column-gap: 30px;
    /*列距離*/
    column-rule:5px outset #FF0000;
    /*列顏色*/
    -webkit-column-rule:5px outset #FF0000;
}
.div2{
    width: 100px;
    height: 100px;
    background-color: deepskyblue;
    -webkit-transition: width 2s, height 2s, -webkit-transform 2s;
    transition: width 2s, height 2s, transform 2s;
    transition-delay:2s;
    /*過度延時時間*/
}
.div2:hover{
    width: 200px;
    height: 200px;
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
}


    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
    我是一直小小鳥，飛呀飛呀飛不高，掉下去摔死怎麽辦？怎麽辦？
</div>
<div class="div2">過度效果展示</div>

</body>
</html>

HTML學習筆記 cs動畫基礎（分列效果可用於做瀑布流）第十五節（原創）參考使用表

har orm 顏色無限動畫 ext top 效果 rotate <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> &

Spring入門學習（AOP前置通知和後置通知）第十五節

Spring入門學習（AOP前置通知） AOP前置通知後置通知 AOP前置通知前置通知：在方法之前執行的通知，使用`@Before`註解並將切入點表示式的值作為註解值。使用Maven新增依賴的jar包：<!--

面試記錄第十五節——（bitmap釋放、lru、三級快取、圖片壓縮）

一、recycle釋放記憶體問題答：在Android2.3.3(API 10)及之前的版本中，Bitmap物件與其畫素資料是分開儲存的，Bitmap物件儲存在Dalvik heap中，而Bitmap物件的畫素資料則儲存在Native Memor

HTML學習筆記 cs2D3D展示基礎第十四節（原創）參考使用表

safari 學習筆記 ans com div2 s2d spa har tex <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

HTML學習筆記 w3sCss盒子模型應用第十一節（原創）

.com foo margin images href ack har htm com <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> &l

HTML學習筆記 css定位浮動及瀑布流案例第十三節（原創）參考使用表

20px 筆記 lis containe use cor ack 100% set #fd { width: 100px; height: 150px; background-color: forestgreen; float: left;

HTML學習筆記 css定位（靜態，相對，固定，絕對布局）偏移案例第十二節（原創）參考使用表

absolute write style 用戶學習 nbsp -c code posit <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"

python學習筆記第十一節（叠代和其他）

技術分享 img 余數商品列表步長取數 sorted函數學習四舍五入 yiled 面相過程編程造好內容，統一發給下面上面這個是傻瓜版內置函數 print(divmod(10,3)) 將10除以3，顯示商和余數 enumerate函數，顯示元素及它

python學習第十四節（正則）

image all flags 正則 asdf alt afa images lag python2和python3都有兩種字符串類型strbytes re模塊find一類的函數都是精確查找。字符串是模糊匹配 findall(pattern,string,flags) r

Java進階學習第十五天（Struts框架）

一、自定義一個Struts框架 1、MVC模式包括 Model：模型 View：檢視 Control：控制器 2、傳統mvc開發總結 ① 跳轉程式碼寫死，不靈活 ② 每次都去寫servlet，要web.xml中配置servlet！ 3、自定義一個Struts框架 ① 配置檔案

Spring入門學習（使用XML配置檔案方式來配置AOP）第十七節

Spring入門學習（使用XML配置檔案方式來配置AOP） xml配置檔案配置AOP xml配置檔案配置AOP 使用之前建立的類ArithmeticCalculator和ArithmeticCalculatorImpl 去掉Log

Spring入門學習（AOP返回通知&異常通知&環繞通知&切面的優先順序）第十六節

Spring入門學習（AOP返回通知&異常通知&環繞通知）返回通知異常通知環繞通知切面的優先順序返回通知使用`@AfterReturning`註解，在方法正常結束後執行的通知，它是可以獲得方法的返回

Spring入門學習（AOP）第十四節

Spring入門學習（AOP）為什麼需要AOP 一種方法是使用動態代理解決使用Spring AOP AOP簡介 AOP術語為什麼需要AOP 新建一個介面Ari

Spring入門學習（基於註解的方式配置Bean）第十二節

Spring入門學習（基於註解的方式配置Bean）指定SpringIOC容器掃描包分別建立`repository,service,controller`層指定SpringIOC容器掃描包分別建立reposi

Spring入門學習（通過FactoryBean配置Bean）第十一節

Spring入門學習（通過FactoryBean配置Bean） Spring中有兩種型別的Bean Spring中有兩種型別的Bean 普通的Bean和工廠Bean，工廠Bean返回的物件不是指類的一個例項，它返回的是該工廠bean的g

Spring入門學習（事務管理）第十九節

Spring入門學習（事務管理）事務簡介事務的四個關鍵屬性（ACID）沒有事務之前事務管理器事務簡介事務就是用來確保資料的完整性和一致性的一系列的動作，它們被當做一個單獨的工作單元，這些動作要

零基礎入門學習java第十五節：對象的比較

obj println lse 來看 filter () 情況轉換行修改這一篇主要講講對象的比較，什麽是對象的比較，我們知道兩個數值類型只需要用“==”符號即可進行相等判斷，但如果是兩個Goods對象呢？如何進行比較？這時候，我們的equals

python學習第十五節(正則)

重復數 src spl efault 操作 alt 是個 lin 多次正則的貪婪匹配非貪婪模式按照最小重復數取非貪婪匹配正則的方法 re.split 正則分割分割次數保留分隔符，用一個括號套住分隔符 sub 替換字符串需要三個參數，要替換的內容

第十五週（sklearn）

首先是建立資料集和split 資料集 import sklearn from sklearn import datasets from sklearn import cross_validation from sklearn.naive_bayes import GaussianNB fr

tcp/ip入門經典（第2版）第十五章監控和遠端訪問

1.本章內容 telnet berkeley r*工具 ssh 遠端控制網路管理 snmp rmon 2.網路可以說是為了共享遠端的資源而建立的，所以在網路上做的幾乎所有的事情都可以歸結為遠端訪問。 3.telnet telnet是對遠端計算機進

HTML學習筆記 cs動畫基礎（分列效果可用於做瀑布流） 第十五節 （原創） 參考使用表

相關推薦

HTML學習筆記 cs動畫基礎（分列效果可用於做瀑布流）第十五節（原創）參考使用表