整合營(yíng)銷服務(wù)商

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          時(shí)尚的藍(lán)紫色動(dòng)漫網(wǎng)站HTML模板 - OneAnime

          neAnime是精美的動(dòng)漫在線觀看網(wǎng)站HTML5模板,也可以作為動(dòng)漫新聞和博客網(wǎng)站的界面。模板使用紫黑色的UI設(shè)計(jì),看起來(lái)很漂亮。模板編碼基于Bootstrap v4.1.3框架,很容易自定義。
          主要特色

          • Bootstrap v4.1.3
          • 響應(yīng)式布局
          • 時(shí)尚的UI設(shè)計(jì)
          • themify字體小圖標(biāo)
          • 無(wú)控制臺(tái)錯(cuò)誤
          • SEO友好的代碼
          • 動(dòng)漫動(dòng)漫觀看動(dòng)漫新聞動(dòng)漫博客黑紫色oneanime

          時(shí)尚的藍(lán)紫色動(dòng)漫網(wǎng)站HTML模板(共124個(gè)文件)

          • assets
          • anime_details.html
          • anime_video.html
          • blog.html
          • category.html
          • elements.html
          • genres.html
          • index.html
          • single-blog.html

          義和用法

          一些 CSS 屬性是可以有動(dòng)畫效果的,這意味著它們可以用于動(dòng)畫和過(guò)渡。

          動(dòng)畫屬性可以逐漸地從一個(gè)值變化到另一個(gè)值,比如尺寸大小、數(shù)量、百分比和顏色。


          瀏覽器支持

          表格中的數(shù)字表示支持該方法的第一個(gè)瀏覽器的版本號(hào)。

          緊跟在數(shù)字后面的 -webkit-, -moz-, 或 -o- 指定了第一個(gè)支持該屬性的瀏覽器版本前綴。

          4.0 -webkit-10.016.05.0 -moz-4.0 -webkit-15.0 -webkit-12.112.0 -o-

          實(shí)例

          背景顏色逐漸地從紅色變化到藍(lán)色:

          @keyframes mymove

          {

          from {background-color:red;}

          to {left:blue;}

          }

          /*Safari 和 Chrome:*/

          @-webkit-keyframes mymove

          {

          from {background-color:red;}

          to {background-color:blue;}

          }

          動(dòng)畫屬性

          CSS 中的動(dòng)畫屬性:

          屬性實(shí)例
          background嘗試一下 》
          background-color嘗試一下 》
          background-position嘗試一下 》
          background-size嘗試一下 》
          border嘗試一下 》
          border-bottom嘗試一下 》
          border-bottom-color嘗試一下 》
          border-bottom-left-radius嘗試一下 》
          border-bottom-right-radius嘗試一下 》
          border-bottom-width嘗試一下 》
          border-color嘗試一下 》
          border-left嘗試一下 》
          border-left-color嘗試一下 》
          border-left-width嘗試一下 》
          border-right嘗試一下 》
          border-right-color嘗試一下 》
          border-right-width嘗試一下 》
          border-spacing嘗試一下 》
          border-top嘗試一下 》
          border-top-color嘗試一下 》
          border-top-left-radius嘗試一下 》
          border-top-right-radius嘗試一下 》
          border-top-width嘗試一下 》
          bottom嘗試一下 》
          box-shadow嘗試一下 》
          clip嘗試一下 》
          color嘗試一下 》
          column-count嘗試一下 》
          column-gap嘗試一下 》
          column-rule嘗試一下 》
          column-rule-color嘗試一下 》
          column-rule-width嘗試一下 》
          column-width嘗試一下 》
          columns嘗試一下 》
          filter嘗試一下 》
          flex
          flex-basis嘗試一下 》
          flex-grow嘗試一下 》
          flex-shrink嘗試一下 》
          font嘗試一下 》
          font-size嘗試一下 》
          font-size-adjust
          font-stretch
          font-weight嘗試一下 》
          height嘗試一下 》
          left嘗試一下 》
          letter-spacing嘗試一下 》
          line-height嘗試一下 》
          margin嘗試一下 》
          margin-bottom嘗試一下 》
          margin-left嘗試一下 》
          margin-right嘗試一下 》
          margin-top嘗試一下 》
          max-height嘗試一下 》
          max-width嘗試一下 》
          min-height嘗試一下 》
          min-width嘗試一下 》
          opacity嘗試一下 》
          order嘗試一下 》
          outline嘗試一下 》
          outline-color嘗試一下 》
          outline-offset嘗試一下 》
          outline-width嘗試一下 》
          padding嘗試一下 》
          padding-bottom嘗試一下 》
          padding-left嘗試一下 》
          padding-right嘗試一下 》
          padding-top嘗試一下 》
          perspective嘗試一下 》
          perspective-origin嘗試一下 》
          right嘗試一下 》
          text-decoration-color嘗試一下 》
          text-indent嘗試一下 》
          text-shadow嘗試一下 》
          top嘗試一下 》
          transform嘗試一下 》
          transform-origin嘗試一下 》
          vertical-align嘗試一下 》
          visibility
          width嘗試一下 》
          word-spacing嘗試一下 》
          z-index嘗試一下 》

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          文主要內(nèi)容

          • 過(guò)渡:transition
          • 2D 轉(zhuǎn)換 transform
          • 3D 轉(zhuǎn)換 transform
          • 動(dòng)畫:animation

          過(guò)渡:transition

          transition的中文含義是過(guò)渡。過(guò)渡是CSS3中具有顛覆性的一個(gè)特征,可以實(shí)現(xiàn)元素不同狀態(tài)間的平滑過(guò)渡(補(bǔ)間動(dòng)畫),經(jīng)常用來(lái)制作動(dòng)畫效果。

          • 補(bǔ)間動(dòng)畫:自動(dòng)完成從起始狀態(tài)到終止?fàn)顟B(tài)的的過(guò)渡。不用管中間的狀態(tài)。
          • 幀動(dòng)畫:通過(guò)一幀一幀的畫面按照固定順序和速度播放。如電影膠片。

          transition 包括以下屬性:

          • transition-property: all; 如果希望所有的屬性都發(fā)生過(guò)渡,就使用all。
          • transition-duration: 1s; 過(guò)渡的持續(xù)時(shí)間。
          • transition-timing-function: linear; 運(yùn)動(dòng)曲線。屬性值可以是:
          • linear 線性
          • ease 減速
          • ease-in 加速
          • ease-out 減速
          • ease-in-out 先加速后減速
          • transition-delay: 1s; 過(guò)渡延遲。多長(zhǎng)時(shí)間后再執(zhí)行這個(gè)過(guò)渡動(dòng)畫。

          上面的四個(gè)屬性也可以寫成綜合屬性

           transition: 讓哪些屬性進(jìn)行過(guò)度 過(guò)渡的持續(xù)時(shí)間 運(yùn)動(dòng)曲線 延遲時(shí)間;
           transition: all 3s linear 0s;
          

          其中,transition-property這個(gè)屬性是尤其需要注意的,不同的屬性值有不同的現(xiàn)象。我們來(lái)示范一下。

          如果設(shè)置 transition-property: width,意思是只讓盒子的寬度在變化時(shí)進(jìn)行過(guò)渡。效果如下:

          如果設(shè)置 transition-property: all,意思是讓盒子的所有屬性(包括寬度、背景色等)在變化時(shí)都進(jìn)行過(guò)渡。效果如下

          案例:小米商品詳情

          效果如下:

          2D 轉(zhuǎn)換

          轉(zhuǎn)換是 CSS3 中具有顛覆性的一個(gè)特征,可以實(shí)現(xiàn)元素的位移、旋轉(zhuǎn)、變形、縮放,甚至支持矩陣方式。

          轉(zhuǎn)換再配合過(guò)渡和動(dòng)畫,可以取代大量早期只能靠 Flash 才可以實(shí)現(xiàn)的效果。

          在 CSS3 當(dāng)中,通過(guò) transform 轉(zhuǎn)換來(lái)實(shí)現(xiàn) 2D 轉(zhuǎn)換或者 3D 轉(zhuǎn)換。

          • 2D轉(zhuǎn)換包括:縮放、移動(dòng)、旋轉(zhuǎn)。

          1、縮放:scale

          格式:

           transform: scale(x, y);
           transform: scale(2, 0.5);
          

          參數(shù)解釋: x:表示水平方向的縮放倍數(shù)。y:表示垂直方向的縮放倍數(shù)。如果只寫一個(gè)值就是等比例縮放。

          取值:大于1表示放大,小于1表示縮小。不能為百分比。

          格式舉例:

          效果:

          上圖可以看到,給 box1 設(shè)置 2D 轉(zhuǎn)換,并不會(huì)把兄弟元素?cái)D走。

          2、位移:translate

          格式:

           transform: translate(水平位移, 垂直位移);
           transform: translate(-50%, -50%);
          

          參數(shù)解釋:

          • 參數(shù)為百分比,相對(duì)于自身移動(dòng)。
          • 正值:向右和向下。 負(fù)值:向左和向上。如果只寫一個(gè)值,則表示水平移動(dòng)。

          格式舉例:

          效果:

          上圖中,因?yàn)槲以诓僮鞯臅r(shí)候,鼠標(biāo)懸停后,立即進(jìn)行了略微的移動(dòng),所以產(chǎn)生了兩次動(dòng)畫。正確的效果應(yīng)該是下面這樣的

          應(yīng)用:讓絕對(duì)定位中的盒子在父親里居中

          我們知道,如果想讓一個(gè)標(biāo)準(zhǔn)流中的盒子在父親里居中(水平方向看),可以將其設(shè)置margin: 0 auto屬性。

          可如果盒子是絕對(duì)定位的,此時(shí)已經(jīng)脫標(biāo)了,如果還想讓其居中(位于父親的正中間),可以這樣做:

           div {
           width: 600px;
           height: 60px;
           position: absolute; 絕對(duì)定位的盒子
           left: 50%; 首先,讓左邊線居中
           top: 0;
           margin-left: -300px; 然后,向左移動(dòng)寬度(600px)的一半
           }
          

          如上方代碼所示,我們先讓這個(gè)寬度為600px的盒子,左邊線居中,然后向左移動(dòng)寬度(600px)的一半,就達(dá)到效果了。

          現(xiàn)在,我們還可以利用偏移 translate 來(lái)做,這也是比較推薦的寫法:

          div {
           width: 600px;
           height: 60px;
           background-color: red;
           position: absolute; 絕對(duì)定位的盒子
           left: 50%; 首先,讓左邊線居中
           top: 0;
           transform: translate(-50%); 然后,利用translate,往左走自己寬度的一半【推薦寫法】
           }
          

          3、旋轉(zhuǎn):rotate

          格式:

           transform: rotate(角度);
           transform: rotate(45deg);
          

          參數(shù)解釋:正值 順時(shí)針;負(fù)值:逆時(shí)針。

          效果:

          注意,上方代碼中,我們給盒子設(shè)置了 transform 中的 rotate 旋轉(zhuǎn),但同時(shí)還要給盒子設(shè)置 transition 過(guò)渡。如果沒(méi)有這行過(guò)渡的代碼,旋轉(zhuǎn)會(huì)直接一步到位,效果如下:(不是我們期望的效果)

          案例1:小火箭

          上方代碼中,我們將 transform 的兩個(gè)小屬性合并起來(lái)寫了。

          案例2:撲克牌

          rotate 旋轉(zhuǎn)時(shí),默認(rèn)是以盒子的正中心為坐標(biāo)原點(diǎn)的。如果想改變旋轉(zhuǎn)的坐標(biāo)原點(diǎn),可以用transform-origin屬性。格式如下:

           transform-origin: 水平坐標(biāo) 垂直坐標(biāo);
           transform-origin: 50px 50px;
           transform-origin: center bottom; //旋轉(zhuǎn)時(shí),以盒子底部的中心為坐標(biāo)原點(diǎn)
          

          我們來(lái)看一下 rotate 結(jié)合 transform-origin 的用法舉例。

          代碼如下:

          效果如下:

          4、傾斜

          3D 轉(zhuǎn)換

          1、旋轉(zhuǎn):rotateX、rotateY、rotateZ

          3D坐標(biāo)系(左手坐標(biāo)系)

          如上圖所示,伸出左手,讓拇指和食指成“L”形,大拇指向右,食指向上,中指指向前方。拇指、食指和中指分別代表X、Y、Z軸的正方向,這樣我們就建立了一個(gè)左手坐標(biāo)系。

          瀏覽器的這個(gè)平面,是X軸、Y軸;垂直于瀏覽器的平面,是Z軸。

          旋轉(zhuǎn)的方向:(左手法則)

          左手握住旋轉(zhuǎn)軸,豎起拇指指向旋轉(zhuǎn)軸的正方向,正向就是其余手指卷曲的方向

          從上面這句話,我們也能看出:所有的3d旋轉(zhuǎn),對(duì)著正方向去看,都是順時(shí)針旋轉(zhuǎn)。

          格式:

           transform: rotateX(360deg); //繞 X 軸旋轉(zhuǎn)360度
           transform: rotateY(360deg); //繞 Y 軸旋轉(zhuǎn)360度
           transform: rotateZ(360deg); //繞 Z 軸旋轉(zhuǎn)360度
          

          格式舉例:

          (1)rotateX 舉例

          效果:

          上方代碼中,我們最好加個(gè)透視的屬性,方能看到3D的效果;沒(méi)有這個(gè)屬性的話,圖片旋轉(zhuǎn)的時(shí)候,像是壓癟了一樣。

          而且,透視的是要加給圖片的父元素 div,方能生效。我們?cè)诤竺鏁?huì)講解透視屬性。

          (2)rotateY 舉例:

          效果:

          (3)rotateZ 舉例:

          <!DOCTYPE html>
          <html>
          <head lang="en">
           <meta charset="UTF-8">
           <title></title>
           <style>
           .rotateZ {
           width: 330px;
           height: 227px;
           margin: 100px auto;
           /* 透視*/
           perspective: 200px;
           }
           img {
           transition: all 1s;
           }
           .rotateZ:hover img {
           transform: rotateZ(360deg);
           }
           </style>
          </head>
          <body>
          <div class="rotateZ">
           <img src="images/z.jpg" alt=""/>
          </div>
          </body>
          </html>
          

          效果:

          案例:百度錢包

          現(xiàn)在有下面這張圖片素材:

          要求做成下面這種效果:

          上面這張圖片素材其實(shí)用的是精靈圖。實(shí)現(xiàn)的代碼如下:

          2、移動(dòng):translateX、translateY、translateZ

          格式:

           transform: translateX(100px); //沿著 X 軸移動(dòng)
           transform: translateY(360px); //沿著 Y 軸移動(dòng)
           transform: translateZ(360px); //沿著 Z 軸移動(dòng)
          

          格式舉例:

          (1)translateX 舉例:

          <!DOCTYPE html>
          <html>
          <head lang="en">
           <meta charset="UTF-8">
           <title></title>
           <style>
           .box {
           width: 200px;
           height: 200px;
           background: green;
           transition: all 1s;
           }
           .box:hover {
           transform: translateX(100px);
           }
           </style>
          </head>
          <body>
          <div class="box">
          </div>
          </body>
          </html>
          

          效果:

          (2)translateY 舉例:

          <!DOCTYPE html>
          <html>
          <head lang="en">
           <meta charset="UTF-8">
           <title></title>
           <style>
           .box {
           width: 200px;
           height: 200px;
           background: green;
           transition: all 1s;
           }
           .box:hover {
           transform: translateY(100px);
           }
           </style>
          </head>
          <body>
          <div class="box">
          </div>
          </body>
          </html>
          

          效果:

          (3)translateZ 舉例:

          <!DOCTYPE html>
          <html>
          <head lang="en">
           <meta charset="UTF-8">
           <title></title>
           <style>
           body {
           /* 給box的父元素加透視效果*/
           perspective: 1000px;
           }
           .box {
           width: 250px;
           height: 250px;
           background: green;
           transition: all 1s;
           margin: 200px auto
           }
           .box:hover {
           /* translateZ必須配合透視來(lái)使用*/
           transform: translateZ(400px);
           }
           </style>
          </head>
          <body>
          <div class="box">
          </div>
          </body>
          </html>
          

          效果:

          上方代碼中,如果不加透視屬性,是看不到translateZ的效果的。

          3、透視:perspective

          電腦顯示屏是一個(gè) 2D 平面,圖像之所以具有立體感(3D效果),其實(shí)只是一種視覺(jué)呈現(xiàn),通過(guò)透視可以實(shí)現(xiàn)此目的。

          透視可以將一個(gè)2D平面,在轉(zhuǎn)換的過(guò)程當(dāng)中,呈現(xiàn)3D效果。但僅僅只是視覺(jué)呈現(xiàn)出3d 效果,并不是正真的3d。

          格式有兩種寫法:

          • 作為一個(gè)屬性,設(shè)置給父元素,作用于所有3D轉(zhuǎn)換的子元素
          • 作為 transform 屬性的一個(gè)值,做用于元素自身。

          4、3D呈現(xiàn)(transform-style)

          3D元素構(gòu)建是指某個(gè)圖形是由多個(gè)元素構(gòu)成的,可以給這些元素的父元素設(shè)置transform-style: preserve-3d來(lái)使其變成一個(gè)真正的3D圖形。屬性值可以如下:

           transform-style: preserve-3d; //讓 子盒子 位于三維空間里
           transform-style: flat; //讓子盒子位于此元素所在的平面內(nèi)(子盒子被扁平化)
          

          案例:立方體

          動(dòng)畫

          動(dòng)畫是CSS3中具有顛覆性的特征,可通過(guò)設(shè)置多個(gè)節(jié)點(diǎn) 來(lái)精確控制一個(gè)或一組動(dòng)畫,常用來(lái)實(shí)現(xiàn)復(fù)雜的動(dòng)畫效果。

          1、定義動(dòng)畫的步驟

          (1)通過(guò)@keyframes定義動(dòng)畫;

          (2)將這段動(dòng)畫通過(guò)百分比,分割成多個(gè)節(jié)點(diǎn);然后各節(jié)點(diǎn)中分別定義各屬性;

          (3)在指定元素里,通過(guò) animation 屬性調(diào)用動(dòng)畫。

          之前,我們?cè)?js 中定義一個(gè)函數(shù)的時(shí)候,是先定義,再調(diào)用:

           js 定義函數(shù):
           function fun(){ 函數(shù)體 }
           調(diào)用:
           fun();
          

          同樣,我們?cè)?CSS3 中定義動(dòng)畫的時(shí)候,也是先定義,再調(diào)用

           定義動(dòng)畫:
           @keyframes 動(dòng)畫名{
           from{ 初始狀態(tài) }
           to{ 結(jié)束狀態(tài) }
           }
           調(diào)用:
           animation: 動(dòng)畫名稱 持續(xù)時(shí)間;
          

          其中,animation屬性的格式如下:

           animation: 定義的動(dòng)畫名稱 持續(xù)時(shí)間 執(zhí)行次數(shù) 是否反向 運(yùn)動(dòng)曲線 延遲執(zhí)行。(infinite 表示無(wú)限次)
           animation: move1 1s alternate linear 3;
           animation: move2 4s;
          

          定義動(dòng)畫的格式舉例:

          注意好好看代碼中的注釋。

          效果如下:

          2、動(dòng)畫屬性

          我們剛剛在調(diào)用動(dòng)畫時(shí),animation屬性的格式如下:

          animation屬性的格式如下:

           animation: 定義的動(dòng)畫名稱 持續(xù)時(shí)間 執(zhí)行次數(shù) 是否反向 運(yùn)動(dòng)曲線 延遲執(zhí)行。(infinite 表示無(wú)限次)
           animation: move1 1s alternate linear 3;
           animation: move2 4s;
          

          可以看出,這里的 animation 是綜合屬性,接下來(lái),我們把這個(gè)綜合屬性拆分看看。

          (1)動(dòng)畫名稱:

           animation-name: move;
          

          (2)執(zhí)行一次動(dòng)畫的持續(xù)時(shí)間:

           animation-duration: 4s;
          

          備注:上面兩個(gè)屬性,是必選項(xiàng),且順序固定。

          (3)動(dòng)畫的執(zhí)行次數(shù):

           animation-iteration-count: 1; //iteration的含義表示迭代
          

          屬性值infinite表示無(wú)數(shù)次。

          (3)動(dòng)畫的方向:

           animation-direction: alternate;
          

          屬性值:normal 正常,alternate 反向。

          (4)動(dòng)畫延遲執(zhí)行:

           animation-delay: 1s;
          

          (5)設(shè)置動(dòng)畫結(jié)束時(shí),盒子的狀態(tài):

           animation-fill-mode: forwards;
          

          屬性值: forwards:保持動(dòng)畫結(jié)束后的狀態(tài)(默認(rèn)), backwards:動(dòng)畫結(jié)束后回到最初的狀態(tài)。

          (6)運(yùn)動(dòng)曲線:

           animation-timing-function: ease-in;
          

          屬性值可以是:linear ease-in-out steps()等。

          注意,如果把屬性值寫成steps(),則表示動(dòng)畫不是連續(xù)執(zhí)行,而是間斷地分成幾步執(zhí)行。我們接下來(lái)專門講一下屬性值 steps()。

          steps()的效果

          我們還是拿上面的例子來(lái)舉例,如果在調(diào)用動(dòng)畫時(shí),我們寫成:

           animation: move2 4s steps(2);
          

          效果如下:

          有了屬性值 steps(),我們就可以作出很多不連續(xù)地動(dòng)畫效果。比如時(shí)鐘;再比如,通過(guò)多張靜態(tài)的魚,作出一張游動(dòng)的魚。

          step()舉例:時(shí)鐘的簡(jiǎn)易模型

          <!DOCTYPE html>
          <html>
          <head lang="en">
           <meta charset="UTF-8">
           <title></title>
           <style>
           div {
           width: 3px;
           height: 200px;
           background-color: #000;
           margin: 100px auto;
           transform-origin: center bottom; /* 旋轉(zhuǎn)的中心點(diǎn)是底部 */
           animation: myClock 60s steps(60) infinite;
           }
           @keyframes myClock {
           0% {
           transform: rotate(0deg);
           }
           100% {
           transform: rotate(360deg);
           }
           }
           </style>
          </head>
          <body>
          <div></div>
          </body>
          </html>
          

          上方代碼,我們通過(guò)一個(gè)黑色的長(zhǎng)條div,旋轉(zhuǎn)360度,耗時(shí)60s,分成60步完成。即可實(shí)現(xiàn)。

          效果如下:

          動(dòng)畫舉例:擺動(dòng)的魚

          現(xiàn)在,我們要做下面這種效果,為了作出上面這種效果,要分成兩步。

          (1)第一步:讓魚在原地?cái)[動(dòng)

          魚在原地?cái)[動(dòng)并不是一張 gif動(dòng)圖,她其實(shí)是由很多張靜態(tài)圖間隔地播放,一秒鐘播放完畢,就可以了

          圖片的url是http://img.smyhvae.com/20180209_1245.gif,圖片較大,如無(wú)法觀看,可在瀏覽器中單獨(dú)打開(kāi)。

          上面這張大圖的尺寸是:寬 509 px、高 2160 px。

          我們可以理解成,每一幀的尺寸是:寬 509 px、高 270 px。270 * 8 = 2160。讓上面這張大圖,在一秒內(nèi)從 0px 的位置往上移動(dòng)2160px,分成8步來(lái)移動(dòng)。就可以實(shí)現(xiàn)了。

          代碼是:

          <!DOCTYPE html>
          <html>
          <head lang="en">
           <meta charset="UTF-8">
           <title></title>
           <style>
           .shark {
           width: 509px;
           height: 270px; /*盒子的寬高是一幀的寬高*/
           border: 1px solid #000;
           margin: 100px auto;
           background: url(images/shark.png) left top; /* 讓圖片一開(kāi)始位于 0 px的位置 */
           animation: sharkRun 1s steps(8) infinite; /* 一秒之內(nèi),從頂部移動(dòng)到底部,分八幀, */
           }
           @keyframes sharkRun {
           0% {
           }
           /* 270 * 8 = 2160 */
           100% {
           background-position: left -2160px; /* 動(dòng)畫結(jié)束時(shí),讓圖片位于最底部 */
           }
           }
           </style>
          </head>
          <body>
          <div class="sharkBox">
           <div class="shark"></div>
          </div>
          </div>
          </body>
          </html>
          

          我們不妨把上面的動(dòng)畫的持續(xù)時(shí)間從1s改成 8s,就可以看到動(dòng)畫的慢鏡頭

          這下,你應(yīng)該恍然大悟了。

          (2)第二步:讓魚所在的盒子向前移動(dòng)。

          實(shí)現(xiàn)的原理也很簡(jiǎn)單,我們?cè)谏弦徊街幸呀?jīng)讓shark這個(gè)盒子實(shí)現(xiàn)了原地?fù)u擺,現(xiàn)在,讓 shark 所在的父盒子 sharkBox向前移動(dòng),即可。完整版代碼是:

          最后效果很好

          這是我在學(xué)習(xí)CSS3動(dòng)畫的時(shí)候收藏的一篇好文,現(xiàn)在分享在這里,既方便大家學(xué)習(xí)參考,也方便日后查閱,最后感謝作者

          鏈接文章

          https://www.cnblogs.com/qianguyihao/p/8435182.html


          主站蜘蛛池模板: 欧洲精品无码一区二区三区在线播放 | 无码人妻一区二区三区兔费| 亚洲AV无码一区二区三区牲色| 国产丝袜无码一区二区三区视频| 无码乱码av天堂一区二区| 久久精品无码一区二区三区| 国产一区二区三区樱花动漫| 无码日韩精品一区二区免费| 人妖在线精品一区二区三区| 一区二区三区日韩| 无码日韩精品一区二区三区免费| 狠狠色婷婷久久一区二区三区| 国产一区二区三区在线免费观看| 日本精品3d动漫一区二区| 国产麻豆精品一区二区三区| 国产乱码精品一区二区三区麻豆 | 精品一区二区三区无码免费直播 | 中文字幕一精品亚洲无线一区| 一区二区三区91| 一区二区三区免费精品视频| 性色AV 一区二区三区| 一区二区三区免费视频网站| 亚洲国产成人久久一区WWW| 亚洲男人的天堂一区二区| 精品久久国产一区二区三区香蕉 | 人妖在线精品一区二区三区| 少妇无码一区二区三区免费| 精品无码AV一区二区三区不卡| 中文字幕日韩一区| 无码一区二区三区爆白浆| 日韩精品一区二区三区国语自制| 国产伦精品一区二区三区在线观看| 国产精品亚洲专区一区| 国产成人精品无人区一区| 中文字幕无码一区二区免费| 无码人妻AⅤ一区二区三区| 日韩一区二区视频| 精品视频一区二区三区在线播放| 久久久久人妻一区精品| 亚洲一区免费观看| 日本v片免费一区二区三区|