CSS3如何實現(xiàn)自定義“W”形運行軌跡

來源：懂視網責編：小采時間：2020-11-27 18:48:06

CSS3如何實現(xiàn)自定義“W”形運行軌跡

CSS3如何實現(xiàn)自定義W形運行軌跡:本篇文章主要介紹了CSS3效果：W形運行軌跡實例，可以通過css實現(xiàn)w的運行軌跡，非常具有實用價值，需要的朋友可以參考下。整理文檔，搜刮出一個CSS3效果：W形運行軌跡實例的代碼，稍微整理精簡一下做下分享。<!DOCTYPE html> <

推薦度：

點擊下載本文 文檔為doc格式

導讀CSS3如何實現(xiàn)自定義W形運行軌跡:本篇文章主要介紹了CSS3效果：W形運行軌跡實例，可以通過css實現(xiàn)w的運行軌跡，非常具有實用價值，需要的朋友可以參考下。整理文檔，搜刮出一個CSS3效果：W形運行軌跡實例的代碼，稍微整理精簡一下做下分享。<!DOCTYPE html> <

本篇文章主要介紹了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;
 }
 #p{
 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>
<p id="p">
 <span id="span">w</span>
</p>
</body>
</html>

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

CSS3如何實現(xiàn)自定義“W”形運行軌跡

推薦度：

點擊下載本文 文檔為doc格式

標簽：做到自定義軌跡

熱門焦點

CSS3如何實現(xiàn)自定義“W”形運行軌跡

CSS3如何實現(xiàn)自定義“W”形運行軌跡

CSS3如何實現(xiàn)自定義“W”形運行軌跡

最新推薦

猜你喜歡

熱門推薦