首頁»HTML/CSS»有趣的CSS彈跳動畫

有趣的CSS彈跳動畫

來源:果凍 發布時間:2019-05-22 閱讀次數:

  這是只用了一個div來做的小動畫,純粹利用CSS3的animation來完成,就像是一個正方形在地上彈跳,碰到地面的時候尖角還會壓縮變圓,陰影的部分也會隨著正方形升高而縮小,至于到底該怎么完成呢?讓我們繼續看下去。

 利用偽元素

  由于只使用了一個div,要同時達到正方形旋轉與陰影縮放的效果,這里必須使用兩個偽元素(before與after)來完成,嚴格來說,雖然只有一個div,但是卻是把這個div當作外框,讓偽元素before作為旋轉的正方形,讓偽元素after作為陰影。

.box{
  position:relative;

}
.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
}

 CSS動畫

  畫出正方形與陰影之后,再來就是要做動畫了,為了避免太過復雜,這里我們先不要旋轉,先單純讓正方形上下跳動,然后陰影會放大縮小,下面的示例的動畫,又新增了20%與80%的keyframe,目的是為了讓接觸的時候角落才會變圓,不然就會變成剛開始移動時尖角就變圓,就會很怪異了。

.box:before{
  content:'';
  position:absolute;
  z-index:2;
  top:60px;
  left:50px;
  width:50px;
  height:50px;
  background:#c00;
  border-radius:2px;
  transform: rotate(45deg);
  -webkit-animation:box .8s infinite ; 
}
@-webkit-keyframes box{
  0%{
    top:50px;
  }
  20%{
    border-radius:2px;  /*從20%的地方才開始變形*/
  }
  50%{
    top:80px; 
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;  /*到80%的地方恢復原狀*/
  }
  100%{
    top:50px;
  }
}
.box:after{
  content:'';
  position:absolute;
  z-index:1;
  top:128px;
  left:52px;
  width:44px;
  height:3px;
  background:#eaeaea;
  border-radius:100%;
  -webkit-animation:shadow .8s infinite ; 
}
@-webkit-keyframes shadow{
  0%,100%{
    left:54px;
    width:40px;
    background:#eaeaea;
  }
  50%{
    top:126px;
    left:50px;   /*讓陰影保持在原位*/
    width:50px;
    height:7px;
    background:#eee;
  }
}

 加入旋轉效果

  了解原理之后,我們只要再加上旋轉的屬性,就可以達到彈跳起來的時候有旋轉的效果,不過這里又有用到一個小技巧,就是落下的時候是90度轉到45度,彈上去的時候從45旋轉到0度,然后在這一瞬間從0度變成90度(100%到0%),如此一來我們就會產生錯覺,感覺好像一直在旋轉了。

@-webkit-keyframes box{
  0%{
    top:50px;
    transform: rotate(90deg); /**/
  }
  20%{
    border-radius:2px;
  }
  50%{
    top:80px; 
    transform: rotate(45deg);
    border-bottom-right-radius:25px;
  }
  80%{
    border-radius:2px;
  }
  100%{
    top:50px;
    transform: rotate(0deg);
  }
}

  舉一反三,我們也可以把角度反轉,就會往另外一邊彈跳。

  如果我們把動畫里頭添加linear,就會變成線性的連續方式喔。

QQ群:WEB開發者官方群(515171538),驗證消息:10000
微信群:加小編微信 849023636 邀請您加入,驗證消息:10000
提示:更多精彩內容關注微信公眾號:全棧開發者中心(fsder-com)
CSS
網友評論(共0條評論) 正在載入評論......
理智評論文明上網,拒絕惡意謾罵 發表評論 / 共0條評論
登錄會員中心
快乐彩票开奖号码 孟连| 镶黄旗| 扎鲁特旗| 灌云县| 凭祥市| 江山市| 永顺县| 宝丰县| 西昌市| 沈阳市| 栖霞市| 工布江达县| 渭源县| 昌吉市| 怀仁县| 安图县| 彰化市| 宜州市| 仁化县| 彰武县| 岐山县| 承德市| 长宁县| 沙田区| 巴里| 光山县| 西安市| 东明县| 平安县| 长海县| 黄浦区| 三门峡市| 错那县| 衡山县| 河南省| 双桥区| 清远市| 龙门县| 赤城县| 六安市| 常德市| 常德市| 花莲县| 交城县| 观塘区| 汝南县| 循化| 香格里拉县| 宾川县| 天台县| 如皋市| 临夏市| 莲花县| 收藏| 安义县| 高密市| 两当县| 谢通门县| 中方县| 苍梧县| 体育| 泗阳县| 宣武区| 牟定县| 渑池县| 崇左市| 文昌市| 炉霍县| 荣昌县| 衡阳市| 宁阳县| 余姚市| 宁安市| 鄂托克旗| 泸西县| 卢湾区| 巴林左旗| 罗城| 贵港市| 冀州市| 乌拉特前旗| 井陉县| 阿拉善左旗| 南京市| 徐水县| 雅安市| 桂平市| 长子县| 神池县| 双桥区| 惠来县| 霍城县| 会东县| 海盐县| 嘉兴市| 京山县| 棋牌| 方城县| 治多县| 九寨沟县| 台安县| 威海市| 甘孜县| 沙湾县| 丹江口市| 西乌珠穆沁旗| 芦溪县| 怀来县| 鹤壁市| 乐清市| 辽阳县| 历史| 若羌县| 澳门| 方正县| 黎平县| 江陵县| 巴楚县| 乐陵市| 诸暨市| 崇明县| 同仁县| 屏东县| 平果县| 宜城市| 遵义市| 泰安市| 商洛市| 沛县| 乌拉特后旗| 郧西县| 连江县| 九江市| 东至县| 和平区| 芜湖县| 肇源县|