<big id="n3dbt"><strong id="n3dbt"></strong></big>
      1. <small id="n3dbt"><delect id="n3dbt"></delect></small>

        <thead id="n3dbt"><ruby id="n3dbt"><rp id="n3dbt"></rp></ruby></thead>
        <th id="n3dbt"></th>
        <span id="n3dbt"></span><span id="n3dbt"></span><span id="n3dbt"></span><strike id="n3dbt"></strike>

        建站百科Website News

        當前位置:首頁 »西安網站建設中的 css3 動畫

        西安網站建設中的 css3 動畫

        至成科技 2014-07-21 訪問量(1698) 評論(0)
        摘要:

        CSS即層疊樣式表(Cascading StyleSheet)。 在網頁制作時采用層疊樣式表技術,可以有效地對頁面的布局、字體、顏色、背景和其它效果實現更加—有效的控制。 只要對相應的代碼做一些簡單的修改,就可以改變同一頁面的不同部分,或者頁數不同的網頁的外觀和格式。CSS3是CSS技術的升級版本,CSS3語言開發是朝著模塊化發展的。以前的規范作為一個模塊實在是太龐大而且比較復雜,所以,把它分解為一些小的模塊,更多新的模塊也被加入進來。這些模塊包括: 盒子模型、列表模塊、超鏈接方式 、語言模塊 、背景和邊框 、文字有效 、多欄布局等。

        CSS3屬性中有關于制作動畫的三個屬性:Transform,Transition,Animation;我們一起學習完了Transform和Transition,讓我們對元素實現了一些基本的動畫效果,這些我想足以讓大家激動了一陣子,今天我們趁著這個熱勁繼續第三個動畫屬性Animation的學習,單從Animation字面上的意思,我們就知道是“動畫”的意思。但CSS3中的Animation與HTML5中的Canvas繪制動畫又不同,Animation只應用在頁面上已存在的DOM元素上,而且他跟Flash和JavaScript以及jQuery制作出來的動畫效果又不一樣,因為我們使用CSS3的Animation制作動畫我們可以省去復雜的js,jquery代碼(像我這種不懂js的人來說是件很高興的事了),只是有一點不足之處,我們運用Animation能創建自己想要的一些動畫效果,但是有點粗糙,如果想要制作比較好的動畫,我見意大家還是使用flash或js等。雖然說Animation制作出來的動畫簡單粗糙,但我想還是不能減少我們大家對其學習的熱情。

        在開始介紹Animation之前我們有必要先來了解一個特殊的東西,那就是"Keyframes",我們把他叫做“關鍵幀”,玩過flash的朋友可能對這個東西并不會陌生。下面我們就一起來看看這個“Keyframes”是什么東西。前面我們在使用transition制作一個簡單的transition效果時,我們包括了初始屬性和較終屬性,一個開始執行動作時間和一個延續動作時間以及動作的變換速率,其實這些值都是一個中間值,如果我們要控制的更細一些,比如說我要先進個時間段執行什么動作,第二個時間段執行什么動作(換到flash中說,就是先進幀我要執行什么動作,第二幀我要執行什么動作),這樣我們用Transition就很難實現了,此時我們也需要這樣的一個“關鍵幀”來控制。那么CSS3的Animation就是由“keyframes”這個屬性來實現這樣的效果。下面我們一起先來看看Keyframes:

        Keyframes具有其自己的語法規則,他的命名是由"@keyframes"開頭,后面緊接著是這個“動畫的名稱”加上一對花括號“{}”,括號中就是一些不同時間段樣式規則,有點像我們css的樣式寫法一樣。對于一個"@keyframes"中的樣式規則是由多個百分比構成的,如“0%”到"100%"之間,我們可以在這個規則中創建多個百分比,我們分別給每一個百分比中給需要有動畫效果的元素加上不同的屬性,從而讓元素達到一種在不斷變化的效果,比如說移動,改變元素顏色,位置,大小,形狀等,不過有一點需要注意的是,我們可以使用“fromt”“to”來代表一個動畫是從哪開始,到哪結束,也就是說這個 "from"就相當于"0%"而"to"相當于"100%",值得一說的是,其中"0%"不能像別的屬性取值一樣把百分比符號省略,我們在這里必須加上百分符號(“%”)如果沒有加上的話,我們這個keyframes是無效的,不起任何作用。因為keyframes的單位只接受百分比值。

        網友評論

        登錄后可評論,請登錄

        全部評論:0條

        掃描左側二維碼
        關注至成微信公眾號

        西安至成信息科技有限公司  Copyright 2012-2019  xazcit.com  All rights reserved.

        Email:[email protected]     郵政編碼:710016     《中華人民共和國增值電信業務經營許可證》陜B1.B2-20140011     陜ICP備12008874號-1

        聯系地址:西安市經開區鳳城四路西安國際企業中心B座23層06-10室    售前咨詢熱線:029-89390727    售后服務電話:029-89393039

        西安網站建設、網站設計制作公司-至成科技,已為眾多企業提供網站建設網站制作響應式網站設計手機網站建設虛擬主機云主機服務器租用等建站解決方案。

        網絡警察 12321垃圾信息舉報 不良信息舉報 中國文明網 西安工商
        ×
        安徽25选5计划 云云南快乐十分走势图 混合贷计算器 北京体育频道 百家乐怎么样 浙江十一选五预测号码 3d分析表 福建十一选五投注 双色球19053期 福彩快3预测专家预测 体育彩票综合走势图 山东群英会走势图开奖结果 广东36选7最新开奖结果查询 彩客网百家欧赔 鸿运彩票平台怎么样 2018年彩票销售员一个月多少工资