利用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>

总结

利用css代码实现纸飞机效果实例

利用css代码实现纸飞机效果实例:实现效果图如下：实例代码如下：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>纸飞机</title> <style> .wrap

推荐度：

点击下载本文 文档为doc格式

标签：纸飞机实现代码

热门焦点

利用css代码实现纸飞机效果实例

利用css代码实现纸飞机效果实例

利用css代码实现纸飞机效果实例

最新推荐

猜你喜欢

热门推荐