2. 程式人生 > >關於純cs3動畫的五個原創實例分享

關於純cs3動畫的五個原創實例分享

阿新 • • 發佈：2018-05-03
c3動畫

話不多說還是直接上菜把。
1.落葉動畫（狀態描述：形如秋風吹落葉，落葉無情逗秋風）
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>texiao1</title>
<style>
{
margin: 0;
padding: 0;
}
body {
background: url("./image/timg.jpg")no-repeat;/ 設置落葉背景圖*/
background-size: 100%;

    }
    .one{
        height: 160px;
        width: 120px;
    }
    .one>img{
        width: 60%;
        height: 60%;
    }
    @keyframes yezi {
        0% {
            transform: rotatez(0deg);

        }/* 自定義動畫*/
        20%{
            transform: rotatez(720deg);
            height: 10%;
            width: 10%;
        }
        40%{
            transform: rotatez(1440deg);
            height: 40%;
            width: 40%;
        }
        60%{
            transform: rotatez(1620deg);
            height: 40%;
            width: 40%;
        }
        80%{
            transform: rotatez(1800deg);
            height: 60%;
            width: 60%;
        }
        100%{
            transform: rotatez(1980deg);
            height: 60%;
            width: 60%;
        }
    }/* 動畫分五個步驟*/
    .one_1{
        position: absolute;
        animation: yezi 20s  linear infinite;

        animation-direction:alternate;
    }/*動畫應用，落葉旋轉*/
    .one_2{
        animation: yezi 20s  linear infinite;
        animation-timing-function: cubic-bezier(0.42,0,1,1);/*設置個別動畫軌跡*/

    }
    .bao{
        width: 1500px;
        height: 1000px;
        margin: 0 auto;
    }
    .one1{
      margin-left: 200px;
        margin-top: -100px;
    }
    .one2{
        margin-left: 200px;
        margin-top: -300px;
    }
    .one3{
        margin-right: 200px;
        margin-top: -500px;
    }
</style>

</head>
<body>
<div class="bao" >
<div style="float: left" class="one1">
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" >

</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div style="float: left" class="one2">

    <div class="one one_2">
        <img src="./image/ye3.png "  >
    </div>

</div>
<div class="one one_1">
    <img src="./image/ye1.png "  >
</div>
<div class="one one_1">
<img src="./image/ye1.png "  >

</div>
<div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div> <div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div>
<div style="float: right" class="one3">
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div>
</div>
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div> <div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye2.png " alt="" >
</div>
<div style="float: right" >
<div class="one one_1">
<img src="./image/ye1.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye3.png " alt="" >
</div>
<div class="one one_2">
<img src="./image/ye2.png " alt="" >
</div>

</div>

</div>
</body>
</html>
由於是動態圖，效果還是請大家復制代碼，替換圖片，自行觀看。
2.小車跑跑圖（我噠噠的馬蹄聲是個美麗的錯誤，我不是歸人，因為我開奧迪奔奔）
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>texiao2</title>
<style>
*{
margin: 0;
padding: 0;
}
body {
background: url("./image/b999a9014c086e062487d66e08087bf40ad1cbec.jpg")no-repeat;
background-size: 100%;
background-position: 0 -150px ;
position: relative;
}
.che{
position: absolute;
width: 400px;
height: 200px;
top:400px;
left: -400px;
background: url("./image/cheshen.png")no-repeat;
background-size: 145%;
background-position: -95px -40px;
animation: pao 10s ease-in-out infinite;

    }/*定義最外圍車身的框架及背景圖片*/
    @keyframes pao {
        from { left: -400px; }
        to{
            left: 1400px;
        }
    }/*定義車整體動畫*/
    .houlun {
        width: 65px;
        height: 65px;
        top: 115px;
        left: 28px;
        border-radius: 50%;
        border: 1px solid red;
        position: absolute;
        animation: che 0.5s linear  infinite;
    }/*後輪div定義*/
    .qianlun {
        width: 65px;
        height: 65px;
        top: 115px;
        left:293px;
        border-radius: 50%;
        border: 1px solid red;
        position: absolute;
        animation: che 0.5s linear  infinite;
    }/*前輪div定義*/
    .che img{
        max-height: 100%;
        max-width: 100%;
    }
    @keyframes che {
        from {
            transform: rotatez(90deg);
        }
        to {
            transform: rotatez(810deg);
        }
    }
 </style>

</head>
<body>
<div class="che" >

<div class="qianlun">
    <img src="./image/qianlun.png"  >
</div>
<div class="houlun">
    <img src="./image/houlun.png"   >
</div>

</div>
</body>
</html>
3.扇子（還可以點擊一下）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>shanzi</title>

    .one{ <style>
           *{
               margin: 0;
               padding: 0;
           }
       body {
           background: url("./image/shui.jpg")no-repeat;
           background-size: 100%;
           position: relative;

       }
       .one{
        position: absolute;
        width: 30px;
        height: 500px;
        border-radius: 20px;
        text-align: center;
        font-size: 18px;
        top: 0px;
        font-family:"華文楷體","STKaiti " ;
        box-shadow: 0 0 20px #806000;
        border: 2px solid #997835;
        animation: shanzi 5s 2;
        animation-direction:alternate;
    }
    @keyframes shanzi {
        from {
            transform: rotatez(0deg);
        }
        to{
            transform: rotatez(-60deg);
        }
    }
    .one_1 {
        left: 400px;
    }
    .one_1:hover .one_2 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_3 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_4 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_5 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_6 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_7 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_8 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_9 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_10 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_11 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_12{
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_13 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_14 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_15 {
           transform: rotatez(5deg);
           transform-origin:0% 90%;
       }
    .one_1:hover .one_16 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_17 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_18 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_19 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_20 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_21 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_22 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_23 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_24 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_25 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_26 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }
    .one_1:hover .one_27 {
           transform: rotatez(5deg);
           transform-origin:0% 90%;
       }
    .one_1:hover .one_28 {
        transform: rotatez(5deg);
        transform-origin:0% 90%;
    }

</style>

</head>
<body>
<div class="one one_1" >
寂寞花開寂寞處
<div class="one one_2">
寂寞處裏尋無路
<div class="one one_3">
誰怨秋風催人思
<div class="one one_4">
一重相思一重癡
<div class="one one_5">
癡子揮筆署情詩
<div class="one one_6">
情在墨裏安可知
<div class="one one_7">
天高地闊自逍遙
<div class="one one_8">
無緣也罷莫悴憔
<div class="one one_9">
世間情人多離分
<div class="one one_10">
莫笑僧尼斷紅塵
<div class="one one_11">
佳人不待癡情人
<div class="one one_12">
癡情枉然苦情深
<div class="one one_13">
蕩胸且懷壯誌在
<div class="one one_14">
行路不懼冰雪塞
<div class="one one_15">
浮雲不逐金日高
<div class="one one_16">
吾又何必為折腰
<div class="one one_17">
淌過綠水上青山
<div class="one one_18">
山青景秀人欲瞻
<div class="one one_19">
居巍俯瞰路千萬
<div class="one one_20">
不知何去恨寡斷
<div class="one one_21">
忽見潔雲遊蒼穹
<div class="one one_22">
無拘不羈多羨崇
<div class="one one_23">
吾輩躊躇疑西東
<div class="one one_24">
如斯怎能化騰龍
<div class="one one_25">
吾輩躊躇疑西東
<div class="one one_26">
，如斯怎能化騰龍
<div class="one one_27">
如斯怎能化騰龍
<div class="one one_28">
【二十八絕句】

                                                                                                        </div>
                                                                                                    </div>
                                                                                                </div>
                                                                                            </div>
                                                                                        </div>
                                                                                    </div>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

</div>

</body>
</html>
4.發光字體（不是很炫酷）
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>faguangzi</title>
<style>
{
margin: 0;
padding: 0;
}
body {
background-color:black ;
font-size: 50px;
}
.one{
text-align: center;
color: white;
animation: faguang 4s linear infinite;
}
@keyframes faguang {
25%{color: #744800;
text-shadow:0 0 10px darkgray;
}
50%{color: #744800;
text-shadow:0 0 50px #f2f2f2;
}
75%{color: #d39200;
text-shadow:0 0 100px #f2f2f2;
}
100%{color: orangered;
text-shadow:0 0 150px #f2f2f2;
}
}
.five{
text-align: center;
color: white;
animation: faguang5 4s linear infinite;
}
@keyframes faguang5 {
25%{color: #744800;
text-shadow:0 0 10px darkgray;
}
50%{color: #744800;
text-shadow:0 0 50px #f2f2f2;
}
75%{color: #d39200;
text-shadow:0 0 100px #f2f2f2;
}
100%{color: orangered;
text-shadow:0 0 150px #f2f2f2;
}
}
.two{
text-align: center;
color: white;
animation: faguang2 4s linear infinite;
}
@keyframes faguang2 {
25%{color: #744800;
text-shadow:0 0 10px #7c0515;
}
50%{color: #a36700;
text-shadow:0 0 50px #ae051d;
}
75%{color: #e8a300;
text-shadow:0 0 100px #d75f00;
}
100%{color: #ffc683;
text-shadow:0 0 150px #ff0a2c;
}
}
.three{
text-align: center;
color: white;
animation: faguang3 4s linear infinite;
}
@keyframes faguang3 {
25%{color: #214838;
text-shadow:0 0 10px #0e4a1a;
}
50%{color: #3f8567;
text-shadow:0 0 50px #3a7538;
}
75%{color: #54bf99;
text-shadow:0 0 100px #20bf43;
}
100%{color: #73ffcc;
text-shadow:0 0 150px #2eff54;
}
}
.four{
text-align: center;
color: white;
animation: faguang4 4s linear infinite;
}
@keyframes faguang4 {
25%{color: #744800;
text-shadow:0 0 10px darkgray;
}
50%{color: #744800;
text-shadow:0 0 50px #f2f2f2;
}
75%{color: #d39200;
text-shadow:0 0 100px #f2f2f2;
}
100%{color: orangered;
text-shadow:0 0 150px #f2f2f2;
}
}
</style>
</head>
<body>
<p class="one">世界四大邪術</p>
<p class="two">×××術</p>
<p class="three">變性術</p>
<p class="four">化妝術</p>
<p class="five">PS術</p>
</body>
</html>
5.大風車吱呦呦的轉
代碼如下：
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>風箏</title>
<style>
<style>
{
margin: 0;
padding: 0;
}
body {
background: url("./image/fengche.jpg")no-repeat;
background-size: 100%;
position: relative;

    }
    .wai{
        width: 600px;
        height: 600px;
        position: absolute;
        top: 100px;
        left: 400px;
        animation: fengche 5s ease-in-out infinite;
    }/*定義大框*/
    @keyframes fengche {
        from {transform: rotatez(90deg)}
        to{
            transform: rotatez(-3600deg);
        }
    }/*定義動畫*/
    .che {
       position: absolute;
        overflow: hidden;
    }
    .one{
        height: 300px;
        width: 100px;
        left: 200px;
        border-radius:150px 0 30px 0;
        background-color: #85ff5d;
    }/*調整四個小風葉之一*/
    .three{
        height: 300px;
        width: 100px;
        bottom: 0px;
        left: 300px;
        overflow:hidden ;
        border-radius: 30px 0 150px 0;
        background-color: #ffc22d;
    }/*調整四個小風葉之一*/
    .two{
        height: 100px;
        width: 300px;
        top: 300px;
        overflow: hidden;
        border-radius:0 30px 0 150px;
        background-color: #46c1ff;
    }/*調整四個小風葉之一*/
    .four{
        height: 100px;
        width: 300px;
        right: 0px;
        top: 200px;
        overflow: hidden;
        border-radius:  0 150px 0 30px;
        background-color: #ff2540;
    }/*調整四個小風葉之一*/
    .xian1{
        display: block;
        height: 300px;
        position: absolute;
        background-color: #cecece;
        width: 1px;
        bottom: 0px;
        right: 0px;
        transform: rotatez(-25deg);
        transform-origin: 0% 100%;
    }/*調整分割虛線*/
    .xian2{
        display: block;
        height: 1px;
        position: absolute;
        background-color: #cecece;
        width: 300px;
        right: 0;
       top: 0;
        transform: rotatez(-25deg);
        transform-origin: 100% 0%;
    }/*調整分割虛線*/
    .xian3{
        display: block;
        height: 300px;
        position: absolute;
        background-color: #cecece;
        width: 1px;
        bottom: 0px;
        left: 0px;
        transform: rotatez(-25deg);
        transform-origin: 0% 0%;
    }/*調整分割虛線*/
    .xian4{
        display: block;
        height: 1px;
        position: absolute;
        background-color:  #cecece;
        width: 300px;
        bottom: 0px;
        right: 0px;
        transform: rotatez(-25deg);
        transform-origin: 0% 100%;
    }/*調整分割虛線*/
</style>

</head>
<body>
<div class="wai">
<div class="che one">
<i class="xian1"></i>
</div>
<div class="che two">
<i class="xian2"></i>
</div>
<div class="che three">
<i class="xian3"></i>
</div>
<div class="che four">
<i class="xian4"></i>
</div>
</div>
</body>
</html>
今天就寫到這裏，如有錯誤賀問題歡迎大家指正賀探討！

關於純cs3動畫的五個原創實例分享

相關推薦

關於純cs3動畫的五個原創實例分享

c3動畫話不多說還是直接上菜把。1.落葉動畫（狀態描述：形如秋風吹落葉，落葉無情逗秋風）代碼如下：<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><

同一臺服務器，啟動多個redis實例

ports ping spa margin span wan opp clas then 該腳本放到/etc/init.d/下，命名為redis #!/bin/sh #chkconfig: 2345 10 90 #description: Startup and stop

一個tomcat部署多個應用實例總結

%u error 難度 conf proto webapp 信息 eba onf 項目組有好幾個項目需要運行，之前項目少，一個tomcat對應一個項目還能應付，但現在項目多了，要是再一個tomcat對應一個項目的話，一方面看起來很業余，一方面也加大服務器的維護難度。所以現在

42個javescript實例（唐傑）

javescript 、實例http://note.youdao.com/noteshare?id=d08a1c014778b62d4cb92a1a569fa76a本文出自 “新網學會博客” 博客，請務必保留此出處http://xwxhvip.blog.51cto.com/13020757/197974442

Vue入門系列（五）Vue實例詳解與生命周期

auto res context mode parent all from bool silent 【入門系列】 【本文轉自】 　　http://www.cnblogs.com/fly_dragon Vue的實例是Vue框架的入口，其實也就是前端的ViewM

純java config配置Spring MVC實例

enable lang version ive org 表單 級別 tro group 1、首先創建一個Maven工程，項目結構如下： pom.xml添加Spring和servlet依賴，配置如下 <project xmlns="http://maven.ap

Windows上安裝多個MySQL實例（轉）

windows 小寫 install current -o iter 不同的 包安裝 class 在學習和開發過程中有時候會用到多個MySQL數據庫，比如Master-S

Windows下多個Mysql實例配置主從

ims logs mys oca 文件 家裝 應該 存在 停止 序： 網上有很多類似的文章，也是各種百度出來的，但是對於多數剛開始接觸MYSQL主從的小白來說，網上文章的代碼裏面很多技術點都沒有理解，有跌打誤撞碰上的，但

單機上啟動多個elasticsearch實例

sse sysctl ofo 啟動文件 ping service sco tcp mit 使用elasticsearch的默認配置的話，一臺機器上只能啟動一個elasticsearch實例，下面是配置多實例的過程。1.環境介紹操作系統：centos7elasticsearc

用戶目錄下編譯mysql源碼，實現單主機安裝多個mysql實例

.tar.gz 5.7 unix Language working 符號 cmak sam dcm 1.建立用於安裝mysql的用戶目錄：useradd mysql_1; passwd mysql_1; 2.在沒有mysql_1目錄下建立文件夾setup： su - mys

PHP程序連接多個redis實例做緩存

unix時間戳 auto 配置 相關操作 store $_server fun 自動刪除 method 1、redis配置： $CONFIG_REDIS = array( array(‘host‘ => ‘192.168.19.29‘, ‘port‘ =>

Windows下多個Mysql實例配置主從（轉）

local 定期 spa root lan 百度 data- ast 迷糊 https://www.cnblogs.com/jpfss/p/8143720.html 序： 網上有很多類似的文章，也是各種百度出來的，但是對於多數剛開始接觸MYSQL主從的小白來說，

2個簡單實例讓你快速理解try-catch的用法

分享圖片 代碼塊 button mage 理解 bsp click pan 簡單 　　相信在實際項目中，你可能經常會看到類似下面的代碼 try { // 嘗試執行代碼塊 } catch(err) { // 捕獲錯誤的代碼塊 } finally {

【筆記】嵩天-Python語言程序設計-完成兩個簡單實例

字母 輸入 port temp 過程 family 設計 log 目錄 【根索引】　【Python索引】 目標 使用PyCharm，完成兩個小實例的編寫和運行。一個是溫度轉換，一個是蟒蛇圖形繪制。 過程 1、先設置project目錄，雖然命名不是很正式，主要不太習慣

numpy meshgrid 和 mgrid 的兩個簡單實例和解析

sci function 網格 print 圖像變形 一個數 ise future href numpy.meshgrid 和 numpy.mgrid 用於返回包含坐標向量的坐標矩陣. 當坐標矩陣為二維時, 可用於在圖像變形時構建網格. 實例一 from _

iOS App初次啟動時的用戶引導頁制作實例分享

復制代碼 bound gpo 並且 fault launch boa com content iOS App初次啟動時的用戶引導頁制作實例分享 作者：老初 字體：[增加 減小] 類型：轉載 時間：2016-03-09 我要評論 這篇文章主要介紹了iOS App初次啟動

BPM實例分享：如何設置表單字體樣式

ont bsp 版本 span 字體 important 文件 shee font 系統版本：V10.0 一些業務場景中，時爾需要改變表單字體 那如何設置表單字體樣式？ 本文將會針對全局表單和單個表單進行闡述！ 1、全局表單： 修改WFRES\CSS\MvcSheet.c

BPM實例分享：如何設置開窗高度與寬度？

解決方案 項目 如何 版本：V９.２.７ 問題描述：DropDown的開窗查詢中高度與寬度設置無效 解決方案：修改MvcSheetAll，具體修改文件位置在：/Portal/WFRes/_Scripts/MVCSheet/Controls/SheetTextBox.js修改內容如下圖： 備註：Ｈ

使用Python編寫簡單的端口掃描器的實例分享【轉】

技術分享 new his col 2.7 imp eas read try 轉自 使用Python編寫簡單的端口掃描器的實例分享_python_腳本之家 http://www.jb51.net/article/76630.htm -*- coding:

shell腳本中輸出帶顏色字體實例分享

shell腳本 顏色shell腳本中echo顯示內容帶顏色顯示,需要使用參數-e 　　格式如下： 　　echo -e "\033[字背景顏色；文字顏色m字符串\033[0m" 　　eg： 　　echo -e "\033[36;34m hello world \033[0m&qu