利用css代碼實現紙飛機效果實例

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

利用css代碼實現紙飛機效果實例

利用css代碼實現紙飛機效果實例:實現效果圖如下：實例代碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>紙飛機</title> <style> .wrap

推薦度：

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

導讀利用css代碼實現紙飛機效果實例:實現效果圖如下：實例代碼如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>紙飛機</title> <style> .wrap

實現效果圖如下：

利用css代碼實現紙飛機效果實例

實例代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>紙飛機</title>
 <style>
 .wrap {
 position: relative;
 display: inline-block;
 width: 300px;
 height: 120px;
 -webkit-animation: fly 6s;
 -moz-animation: fly 6s;
 -o-animation: fly 6s;
 animation: fly 6s;:
 }
 .triangle1 { /*黃色三角形*/
 position: absolute;
 top: 50px;
 left: 8px;
 height: 0;
 width: 0;
 border-left: 100px solid rgba(255, 255, 255, 0);
 border-right: 180px solid rgba(255, 255, 255, 0);
 border-bottom: 24px solid #f09c18;
 -webkit-transform: rotate(-10deg);
 -moz-transform: rotate(-10deg);
 -ms-transform: rotate(-10deg);
 -o-transform: rotate(-10deg);
 transform: rotate(-10deg);
 }
 .triangle1:after { /*紅色邊線*/
 position: absolute;
 left: -100px;
 content: '';
 display: block;
 width: 280px;
 height: 24px;
 border-bottom: 1px solid red;
 }
 .triangle2 { /*綠色三角形*/
 position: absolute;
 top: 39px;
 left: 66px;
 height:0;
 width: 0;
 border-left: 40px solid rgba(255, 255, 255, 0);
 border-right: 180px solid rgba(255, 255, 255, 0);
 border-top: 24px solid #07d362;
 -webkit-transform: rotate(5.2deg);
 -moz-transform: rotate(5.2deg);
 -ms-transform: rotate(5.2deg);
 -o-transform: rotate(5.2deg);
 transform: rotate(5.2deg);
 }
 .triangle2:after { /*黃色邊線*/
 position: absolute;
 top: -24px;
 left: -40px;
 content: '';
 display: block;
 width: 220px;
 height: 24px;
 border-top: 1px solid yellow;
 }
 .triangle3 { /*黑色三角形*/
 position: absolute;
 top: 68px;
 left: 100px;
 height: 0;
 width: 0;
 border-left: 6px solid rgba(255, 255, 255, 0);
 border-right: 100px solid rgba(255, 255, 255, 0);
 border-bottom: 12px solid #2e302c;
 -webkit-transform: rotate(-16.8deg);
 -moz-transform: rotate(-16.8deg);
 -ms-transform: rotate(-16.8deg);
 -o-transform: rotate(-16.8deg);
 transform: rotate(-16.8deg);
 }
 @keyframes fly { /*定義動畫*/
 0% {
 top: 0;
 left: 0;
 }
 5% {
 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 transform: rotate(10deg);
 }
 50% {
 top: 200px;
 left: 800px;
 -webkit-transform: rotate(10deg);
 -moz-transform: rotate(10deg);
 -ms-transform: rotate(10deg);
 -o-transform: rotate(10deg);
 transform: rotate(10deg);
 }
 55% {
 -webkit-transform: rotate(170deg) rotateX(180deg);
 -moz-transform: rotate(170deg) rotateX(180deg);
 -ms-transform: rotate(170deg) rotateX(180deg);
 -o-transform: rotate(170deg) rotateX(180deg);
 transform: rotate(170deg) rotateX(180deg);
 }
 100% {
 top: 400px;
 left: 0;
 -webkit-transform: rotate(170deg) rotateX(180deg);
 -moz-transform: rotate(170deg) rotateX(180deg);
 -ms-transform: rotate(170deg) rotateX(180deg);
 -o-transform: rotate(170deg) rotateX(180deg);
 transform: rotate(170deg) rotateX(180deg);
 }
 }
 </style>
</head>
<body>
 <p class="wrap">
 <p class="triangle1"></p>
 <p class="triangle2"></p>
 <p class="triangle3"></p>
 </p>
</body>
</html>

總結

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