<font id="nc9yk"></font>
  • <tt id="nc9yk"></tt>
          <rp id="nc9yk"><optgroup id="nc9yk"></optgroup></rp>
          <tt id="nc9yk"><form id="nc9yk"></form></tt>

            <cite id="nc9yk"></cite>

            使用CSS3制作版頭動畫效果

              發布時間:2020-12-24 16:12:33   作者:佚名   我要評論
            這篇文章主要介紹了使用CSS3制作版頭動畫效果,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下

            網易看游戲官網(http://kanyouxi.163.com/)(已下架),是我以前(2014年)做的一個項目,也是我們首個放棄Flash,采用HTML5與制作動畫的網站,當時業內為數不多的采用CSS3用于主動畫實際生產的網站,當然現在已經很廣泛使用了,特別是在移動端,CSS3是性能的保障。現在總結分享一下,能讓自己有溫故知新之余,也希望對初學者進階有幫助。

            怎樣的動畫?

            這個動畫并不算復雜,但包含了transform,rotate,translate,keyframes,緩動,和循環次數這幾個重要的內容。好了,先看看動畫效果,下面是錄屏動畫,也可以到網易看游戲官網(http://kanyouxi.163.com/)(已下架)上去看看。

            有幾個關鍵點,按順序分別為:

            •  白色iPhone向上翻動,然后做幾個小幅度抖動;
            • 字幕從右邊出現,把白色iPhone向左推動;
            • 白色iPhone快到心頭后,黑色iPhone也跟隨出現;
            • 大標題“網易看游戲”背景波浪式閃爍滾動。

            下面讓我們我們一個個來。

            注:這是一個CSS3進階實踐文章,如果你對CSS3動畫還不是很了解,請先看這里: CSS3動畫 ,1分鐘快速了解一下再回來。

            1. 向上翻動并抖動

            這里有幾個關鍵屬性,詳細使用方法可以進去看: @keyframes transform:rotate(deg);transform-origin:x,y;

            準備動畫關鍵幀@keyframes

            @keyframes iphone-front{
                0% {
                    transform:rotate(-30deg);
                    transform-origin:125px 650px;
                    }
                100% {
                    transform:rotate(0deg); 
                    transform-origin:125px 600px;
                    }            
            }

            我們直接用百份比來作為幀點,因為后面還會把它再細分多個幀。

            設置旋轉與Anchor Point(錨點transform-origin:x,y;

            transform:rotate(-30deg);
            transform-origin:125px 650px;

            旋轉是必須的,但為何要修改Anchor Point呢?

            Anchor Point,是借用了cocos2D里的說法,是指變換的原點。

            因為transform的默認錨點是中心,即(50%,50%),在transform里Anchor Point屬性就是 transform-origin ,以下是默認值:

            transform-origin:50%,50%

            在支持3D的變換里,還有第3個數值:z,默認是0

            如果不修改,就會以iPhone的中心為原點旋轉,這不是我們想要的效果,所以把它移到下方的水平中央去。

            這個圖片的寬度是250px,高度為525px,下方中央就是(125px,525px),但為了模擬實物在桌子上搖擺,還要往下移一些,經過嘗試,我們最終選擇了(125px,650px),如下圖示:

            添加抖動與擬物

            抖動其實也是幾個關鍵幀組合的產物,首次旋轉不是0度,而是過了一點點的10度,接著往返各兩個關鍵幀,幅度逐漸減小。添加關鍵幀后的@keyframes改動如下:

            @keyframes iphone-front{
                0% {
                    transform:rotate(-30deg);
                    transform-origin:125px 650px;
                    }
                50% {
                    transform:rotate(10deg);
                    transform-origin:125px 600px;
                    }
                75% {
                    transform:rotate(-5deg);
                    }
                100% {
                    transform:rotate(0deg);
                    }
            }

            注意,上面33%位置的幀處,添加了一條 transform-origin:125px 600px; ,因為如果一成不變的錨點,會給人感覺像是一個鐘擺,太死板不夠擬物化,想像一下:一個東西以某個拋物線落到地上,經過與地面碰撞,改變運動方向,最終慢慢停下來,所以我們把中心點的高度也減小一點,讓人看上去“ 不那么規律 ”。

            在關鍵幀的時間點上,也模擬了慢出的緩動效果。所謂的動畫感覺做得好不好,也就是緩動效果做得如何,夠不夠接近物理世界給人的認知。

            這個幀點也并非最后的時間點,請繼續往下看。

            2. 字幕出現并推走iPhone

            字幕出現

            字幕在另外一個元素,所以我們新建一個關鍵幀組:

            @keyframes content{
                0% { transform: translate3d(550px,0,0);}
                100% { transform: translate3d(0,0,0);}
            }

            因為是iPhone動畫先走,然后才是字幕,所以動畫延時執行 animation-delay :

            animation-delay:.2s;

            但為了兩個關鍵幀組能更好的同步,不用算來算去,我們也以這樣做:

            @keyframes content{
                0% { opacity: 0;}
                40% { transform: translate3d(550px,0,0); opacity: 0;}
                100% { transform: translate3d(0,0,0); opacity: 1; }
            }

            先用透明度隱藏它,在40%才開始,在移動的過程再逐漸顯示,讓過程更平滑。

            前面還說到,中間還要用字幕推iPhone一下,怎么做?

            模擬碰撞

            純CSS3是做不了的,除非全程用JS進行,或者用Box2D進行碰撞判斷。但我們這里只是一個簡單的走過場動畫,不需要人機交互,也不會變化移動的距離,所以,我們用一個變戲法,兩個動畫一起并行,在關鍵節點埋關鍵幀,即:字幕移動到iPhone位置時,iPhone才開始移動。

            兩個關鍵幀組結合起來就是:

            @keyframes iphone-front{
                0% {transform:rotate(-30deg); transform-origin:125px 650px; opacity: 0;}
                20% {transform:rotate(10deg); transform-origin:125px 600px; opacity: 1;}
                30% {transform:rotate(-5deg);}
                38% {transform:rotate(0deg);}
                60% {transform: translate3d(0,0,0);  opacity: 1;}
                90% {transform: translate3d(-340px,0,0); }
                100% {transform: translate3d(-340px,0,0);}
            }
            @keyframes content{
                0% { opacity: 0;}
                40% { transform: translate3d(550px,0,0); opacity: 0;}
                60% { transform: translate3d(225px,0,0); opacity: 1; }
                80% { transform: translate3d(0,0,0); opacity: 1; }
                100% { transform: translate3d(0,0,0); opacity: 1; }
            }
            
            /*以下選擇器略去了非動畫屬性設置,例如寬高等,我們就當他們默認就是正確的值吧*/
            .iphone-front{ 
                animation: iphone-front 1.8s ease-out forwards;
            }
            .content{
                animation: content 1.8s ease-out;
            }

            可以看出,這里沒有使用delay屬性,是為了更直觀的設置并行動畫,大家都在60%的位置碰頭,都使用了ease-out緩出。

            為什么iphone-front的100%幀處要重復90%的內容?因為我們用了 animation-fill-mode 屬性,值為forwards,即停在最后一幀,如果100%沒有寫,就會退回到最初狀態了。

            3. 黑色iPhone跟隨出現

            黑色iPhone的動畫更簡單,只是一個漸現加移動,同樣也是另外一個并行動畫,不過這次可以用delay了,先預估一下大概出現的時間,可以得到從0.5s開始:

            @keyframes iphone-back{
                0% { transform: translate3d(97px,0,0); opacity: 0;}
                40%{ opacity: 0; }
                50%{ transform: translate3d(0,0,0); opacity: 1;}
                100% {opacity: 1; }
            }
            .iphone-back-ani{
                animation: iphone-back 1.8s ease-out .5s forwards;
            }

            這里不需要最后一幀重復寫代碼了,因為它本來就是(0,0,0),不會產生任何變化。

            為何用translate3d(x,y,z);而不用translateX(x)?因為早前有人認為這個效率會更高,特別在移動端性能更優。

            查看手冊:transform

            4. 大標題背景波浪

            這個不涉及transfrom,讓前景與背景重疊在一起,背景圖片在y軸不間斷移動,無限循環,無緩動;關鍵的是這個背景圖必須上下能無縫連接:

            @keyframes title{
                0% { background-position: 0 0;}
                100% { background-position: 0 -76px;}
            }
            
            .title-bg{
                width: 301px; 
                height: 61px; 
                position:absolute;
                top:0;
                left:0;
                z-index:1;
                background: url(title_text_bg.png) repeat-y;
                animation: title 1.2s linear;
                animation-iteration-count:infinite;
            }
            .title-front{
                width: 301px; 
                height: 61px;
                position:absolute;
                top:0;
                left:0;
                z-index:2;
                background: url(title_text_front.png) no-repeat;
            }

            這是最簡單的做法,適合大多數情況。也有另外一些更高級的,例如使用mask,關于mask,有興趣請看 《CSS Masking》 。

            其它效果

            結語

            手寫動畫,雖然比較費時,但能讓你了解現實原理。如果需要可視化制作,推薦一個在線工具給大家: cssanimate ,相比其它生成器,優點是可以設置多個關鍵幀,而且可以通過鼠標拖動直接操作,推薦!

            到此這篇關于使用CSS3制作版頭動畫效果的文章就介紹到這了,更多相關css3版頭動畫內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關文章,希望大家以后多多支持腳本之家!

            相關文章

            • 使用CSS3制作版頭動畫效果

              這篇文章主要介紹了使用CSS3制作版頭動畫效果,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
              2020-12-24
            • CSS3實現紅包抖動效果

              這篇文章主要介紹了CSS3實現紅包抖動效果,本文通過實例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
              2020-12-23
            • CSS3中animation實現流光按鈕效果

              這篇文章主要介紹了CSS3中animation實現流光按鈕效果,本文通過實例代碼給大家介紹的非常詳細對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
              2020-12-21
            • css3中flex布局寬度不生效的解決

              這篇文章主要介紹了css3中flex布局寬度不生效的解決,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習
              2020-12-09
            • html+css3實現的登錄界面

              這篇文章主要介紹了html+css3實現的登錄界面的示例代碼,幫助大家更好的制作網頁,感興趣的朋友可以了解下
              2020-12-09
            • CSS3 實現的縮略圖懸停效果

              這篇文章主要介紹了CSS3 實現的縮略圖懸停效果的示例代碼幫助大家更好的理解和使用CSS3,感興趣的朋友可以了解下
              2020-12-09
            • CSS3 實現的火焰動畫

              這篇文章主要介紹了CSS3 實現的火焰動畫的示例代碼,幫助大家更好的理解和使用CSS3制作特效,感興趣的朋友可以了解下
              2020-12-07
            • CSS3 實現的加載動畫

              這篇文章主要介紹了CSS3 實現的加載動畫的示例代碼,幫助大家更好的理解和使用CSS3,感興趣的朋友可以了解下
              2020-12-07
            • 詳解CSS3+JS完美實現放大鏡模式

              這篇文章主要介紹了詳解CSS3+JS完美實現放大鏡模式,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習
              2020-12-03
            • css3中仿放大鏡效果的幾種方式原理解析

              這篇文章主要介紹了css3中仿放大鏡效果的幾種方式原理解析,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一
              2020-12-03

            最新評論

            hao500彩票 www.5itours.com:青冈县| www.alldownloadstuff.com:府谷县| www.soledoubtshow.com:莎车县| www.5005560.com:青龙| www.catdossettboudoir.com:玛沁县| www.szbaled.com:宾阳县| www.borrevannet.net:分宜县| www.jt-pen.com:麟游县| www.solar-toys.org:赣州市| www.hbtzn.com:兴安县| www.allsignsbycos.com:天祝| www.9908899.com:剑阁县| www.yourlifebar.com:台南县| www.x5china.com:甘孜| www.lainiyin.com:溧水县| www.anapanasatiyoga.net:大渡口区| www.cp7576.com:白朗县| www.atramusic.com:台中县| www.jimmysocks.com:SHOW| www.nmgshanhua.com:枣强县| www.sandersfieldtrees.org:镶黄旗| www.nicolasbessol.com:长海县| www.huthug.com:岢岚县| www.zhiminjia.com:汤原县| www.slrhfoundation.org:曲麻莱县| www.xunxi360.com:乐清市| www.play-nike.com:怀仁县| www.smartwhitesmile.com:江达县| www.mosmedia.net:连云港市| www.tjhct.com:萨嘎县| www.leonardhaleyelectric.com:西林县| www.zrvzsv.com:富民县| www.assurancecarolefortin.com:保靖县| www.showbar8.com:鄯善县| www.hg59789.com:福清市| www.kdtlw.cn:临朐县| www.erausquyn.com:双江| www.choco-loco-net.com:介休市| www.tintasetinteiros.com:呼玛县| www.chery-ruixiang.com:抚松县| www.violinstudiova.com:伊川县| www.vivaviralvideo.com:商水县| www.sunn99.com:龙海市| www.21cloudnet.com:大庆市| www.szabo-enterprises.com:东乌珠穆沁旗| www.sihaicsw.com:麟游县| www.jhtmnc.com:武汉市| www.cecilevangrieken.com:瑞昌市| www.originalcachemire.com:娱乐| www.abouthorses.net:樟树市| www.awov.org:桃源县| www.midifa.com:林芝县| www.zoneii.com:闻喜县| www.yongtaikym.com:全南县| www.tao2u.com:嵩明县| www.wowgoldu.com:兰西县| www.maestroluggage.com:拜泉县| www.friendsofryankennedy.com:兴业县| www.ab-mc.com:吉林省| www.s59uk.com:甘谷县| www.jysese.com:临湘市| www.abgoonfelezgroup.com:西华县| www.dramacity4u.net:潍坊市| www.resediservice.com:涡阳县| www.lclxh.com:临泽县| www.zhibo6789.com:靖安县| www.boutiquenergizhotel.com:虞城县| www.wagescout.com:赤城县| www.guoqq.com:凤凰县| www.jinjunepet.com:襄汾县| www.jinlanwanmuye.com:龙门县| www.zzhfjx.com:北辰区| www.nation-wide-building.com:扶绥县| www.ujaxu.com:浦县| www.hg94678.com:云阳县| www.feastbookstore.com:镇宁| www.janainaewilliam.com:海兴县| www.microseep.com:宜春市| www.cdzhyz.com:南陵县| www.gw336.com:阜南县| www.loupanvip.com:勃利县| www.bustybarmaid.com:饶河县| www.amb-eco.com:册亨县| www.justintoy.com:崇左市|