css3 實現(xiàn)元素弧線運動的示例代碼
我要評論如何使用CSS控制元素弧線運動
我們都知道，CSS3的新屬性transfrom過渡效果可以實現(xiàn)元素位移、旋轉(zhuǎn)、縮放。結(jié)合animation屬性，就可以實現(xiàn)元素的動畫效果。但是如何通過css實現(xiàn)元素實現(xiàn)弧線運動呢：
如上圖動畫效果所示，圓球弧線運動，分析運動：
- 將小球的運動拆分成X軸和Y軸兩個運動來看，此時X軸的小球是以 （慢—快） 這樣的速度運動；
- 而Y軸的方向小球是以（快—慢）這樣的速度運動；
- 結(jié)合兩個軸的運動，實現(xiàn)弧線效果
三次貝塞爾（Cubic Bezier）函數(shù)
animation屬性中有一個 animation-timing-function 屬性，動畫的速度函數(shù)。而這個屬性 使用名為三次貝塞爾（Cubic Bezier）函數(shù)的數(shù)學(xué)函數(shù)，來生成速度曲線。
cubic-bezier (x1,y1,x2,y2)：（三次貝塞爾函數(shù)的具體含義請查閱相關(guān)資料）：
可以通過這個網(wǎng)站 傳送門 去實時調(diào)節(jié)曲線的取值。而animation-timing-function屬性中 已經(jīng)提供了幾個 已經(jīng)封裝好的速度函數(shù)：也就是我們常用的 ease、linear、ease-in、ease-out、ease-in-out。
效果實現(xiàn)
首先我們能想到的就是將X軸Y軸的位移動畫拆開。但是一個元素的動畫同一時間只能執(zhí)行一個動畫（最后申明的）。所以我們可以換位思考，用兩個父子元素。給父級元素添加X軸位移動畫，給子元素增加Y軸位移動畫，具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>元素弧線運動</title>
<style>
.box{
width: 400px;
height: 400px;
border: 2px solid #ff8800;
}
span{
display: block;
width: 40px;
height: 40px;
border: 1px solid #222;
animation: center1 2s ease-in forwards;
}
span:after{
content: '';
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: greenyellow;
animation: center2 2s ease-out forwards;
}
@keyframes center1 {
to{transform: translateX(360px)}
}
@keyframes center2 {
to{transform: translateY(360px)}
}
</style>
</head>
<body>
<div class="box">
<span></span>
</div>
</body>
</html>
此時我用的是元素的偽類after替代了子元素，效果一樣.給span一個給色border可以觀察兩個元素分別的運動軌跡，以便于觀察，動畫效果如下：
此時還是能比較明顯的看出綠色小球是做的弧線運動。
擴(kuò)展：
此時如果覺得弧線不夠大不夠明顯，我們可以自己調(diào)整次貝塞爾（Cubic Bezier）函數(shù)的值。根據(jù)網(wǎng)站 傳送門 。
- 選擇ease-in 的曲線效果，此時我們改變 x1,y1的值（將紅色點向右拉）。然后復(fù)制此時的cubic-bezier()值。將這個值取代原本span的動畫 ease-in 的位置。
- 選擇ease-out 的曲線效果，此時我們改變 x2,y2的值（將藍(lán)色點向右拉）。然后復(fù)制此時的cubic-bezier()值。將這個值取代原本span偽類after 的動畫 ease-out 的位置。
此時的CSS代碼如下：
span{
display: block;
width: 40px;
height: 40px;
border: 1px solid #222;
animation: center1 2s cubic-bezier(.66,.01,1,1) forwards;
}
span:after{
content: '';
display: block;
width: 40px;
height: 40px;
-webkit-border-radius: 20px;
-moz-border-radius: 20px;
border-radius: 20px;
background: greenyellow;
animation: center2 2s cubic-bezier(0,0,.36,1) forwards;
}
而此時的動畫效果的弧線，就更加的明顯了：
到此這篇關(guān)于css3 實現(xiàn)元素弧線運動的示例代碼的文章就介紹到這了,更多相關(guān)css3元素弧線運動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
本篇文章主要介紹了css3實現(xiàn)畫半圓弧線的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-11-06
