CSS3效果：自定義“W”形運行軌跡實例
發(fā)布時間：2017-03-29 17:27:21 作者：WEB前端工程師--錢成 
我要評論
我要評論本篇文章主要介紹了CSS3效果：“W”形運行軌跡實例，可以通過css實現(xiàn)w的運行軌跡，非常具有實用價值，需要的朋友可以參考下。
整理文檔，搜刮出一個CSS3效果：“W”形運行軌跡實例的代碼，稍微整理精簡一下做下分享。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding:0;
}
#div{
width:900px;
height:400px;
border:2px solid black;
margin: 100px auto;
}
#span{
float:left;
display: block;
font-size: 100px;
width: 100px;
height: 100px;
line-height: 80px;
text-align: center;
border-radius: 50%;
background: radial-gradient(blue,green);
animation: move 4s ease 0s infinite alternate;
}
@keyframes move {
0%{
transform: translate(0px,0px);
}
25%{
transform: translate(200px,300px);
}
50%{
transform: translate(400px,0px);
}
75%{
transform: translate(600px,300px);
}
100%{
transform: translate(800px,0px);
}
}
</style>
</head>
<body>
<div id="div">
<span id="span">w</span>
</div>
</body>
</html>
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本源碼是一套使用純CSS3制作的逼真汽車運動動畫特效的代碼，通過公路斑馬線的左右晃動來制作出汽車運動的視覺效果2016-08-17
這是一款基于純CSS3繪制的太陽系行星動畫運動軌跡效果源碼。畫面上各個行星圍繞著中心的太陽以自身的速度做圓周運動，動畫效果流暢自然，采用純css3技術(shù)實現(xiàn)動畫效果2016-06-28
本特效源碼是一款效果非常炫酷的HTML5和CSS3圖片運動模糊和傾斜效果的代碼。圖片產(chǎn)生輕微的運動模糊并傾斜的效果2016-03-24
一款利用純CSS3實現(xiàn)的自行車動畫，這個自行車是可以運動的2014-06-12
一款基于jquery+css3實現(xiàn)的動態(tài)圓圈背景特效代碼2013-12-18
CSS3 3D運動步數(shù)統(tǒng)計樣式特效源碼
CSS3 3D運動步數(shù)統(tǒng)計樣式特效源碼是一款鼠標(biāo)移入的時候顯示柱狀圖特效。本段特效源碼可以在各大網(wǎng)站使用，有需要的朋友直接下載使用2017-05-17
